figma · HeyBraza shows you
how to export svg from figma
HeyBraza 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.
short answer
select the layer, add an export setting in the right panel with the '+', and change the format from png to 'svg'. tick 'outline text' in the '…' options if the font might not be available wherever the svg is used.
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.
steps last checked
let HeyBraza do this with you
HeyBraza teaches you software while you're using it. hold a key and ask out loud - an ai tutor that sees your screen walks you through every step in real time, pointing and highlighting on your real work, talking you through it as it goes - not someone else's tutorial.
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.
