figma · braza shows you
how to export svg from figma
braza points at the export panel and the svg settings so your icon comes out clean, not broken.
svg keeps your icons and logos crisp at any size and tiny in file size - perfect for the web. figma's export lives in a small panel that's easy to miss, and a couple of settings decide whether your output is clean or mangled. here's the path.
or do it yourself
- 1select the layer, group, or frame you want to export.
- 2in the right panel scroll to 'export' and click the '+' to add an export setting.
- 3change the format dropdown from png to 'svg'.
- 4for cleaner code, open the '…' next to it and tick 'outline text' if your font might not be available, and 'include id attribute' only if your code needs it.
- 5click 'export [name]' and choose where to save the .svg.
let braza do this with you
braza is a tiny on-screen guide that points at the right buttons and talks you through it, on windows and mac.
downloadcommon questions
why is my exported svg blurry or broken?
svg is vector so it can't blur - broken output usually means missing fonts (tick 'outline text') or grouped effects figma flattened; flatten complex layers first.
where is the export option in figma?
select your layer and scroll to the bottom of the right-hand design panel - 'export' with a '+' button is there.