How to export as SVG in Figma on Mac: single layers, frames and bulk export

SVG suits logos, icons and simple illustrations. The file stays sharp at any size, and most code editors and browsers can open it. Photos and textured artwork are a different case. For those, PNG or JPG usually works better. This page covers the single-layer export first. Then it covers bulk export, copying SVG without a file, the settings that change the output, and the mistakes that break a file. Read the steps first. Come back to the rest when something looks wrong.

Export a single layer or frame as SVG

This is the route most people need. Select the object first, so the export settings apply to it. Each export row holds one format and its settings. You choose the format, check the options, and then save. The export only affects the object you selected. Nothing else on the canvas gets exported with it.

Where the Export section sits in each mode

The Export section moves depending on how you open the file. In Design mode, it sits at the bottom of the right sidebar. With view-only access, look under Properties. In Dev Mode, the section appears only when an object is selected, so click the layer first if you see nothing. If the section still does not show, read the troubleshooting list below before you start over.

Set the SVG options before you export

The SVG options are short, but each one changes the file. Most icons look right with the defaults. Change one option at a time, then click Preview to see what it did. Here is what each option does, based on Figma's help article.

• Ignore overlapping layers: on by default. Change it only when the preview looks wrong.
• Include bounding box: shown for text layers only. Use it when the text box matters in the file.
• Include id attribute: adds an id to elements. Turn it on when a developer needs to target parts of the SVG in code.
• Outline text: on by default when text is selected. Text becomes glyph shapes and stops being editable.
• Simplify stroke: on by default for vector networks with inside or outside strokes.
• Suffix: adds text to the end of the exported file name.
• Scale: SVG supports only 1x, so larger sizes are not an option here.

Copy as SVG when you do not need a file

Sometimes you want the code, not a file. Right-click the object, hover over Copy/Paste as, and select Copy as SVG. Figma places the SVG markup on your clipboard and creates no export file. Paste it into a code editor or a plain text file to read it. This route is quick for a single icon. It is less useful when someone needs a file to attach or upload.

Export several layers at once with File > Export

Bulk export handles sets, such as a row of icons, a group of screens or a batch of logos. Open the main menu and go to File > Export, or press ⇧⌘E. The modal lists every selection with its own export setting. Uncheck anything you want to skip, then click Export. Bulk export opens the bulk modal, so it does not replace the single-layer route.

Layer names matter here. A slash in a layer name creates folders when you export. A layer named button/pill/default exports into a button folder and a pill folder, and the file is named default. Name layers with that in mind, or you will get folders you did not plan for.

Mistakes that break SVG exports

Most broken SVGs come from a short list of causes. SVG Genie, a third-party guide to Figma exports, lists several of them. Its percentages have no source, so this page uses only the list. Check each item in Preview before you send the file.

• White background: a frame fill can end up in the file. Remove the fill if you need a transparent background.
• Wrong fonts: text can render in another font unless Outline text is on. Keep Outline text on for logos.
• Inside or outside strokes: only center strokes carry over. Set the stroke position to center first.
• Blur missing: a background blur must sit on the layer itself. Apply it to that layer directly.
• Clipped edges: shapes that cross the frame edge can be cut off. Move them inside the frame, or resize the frame.
• Gradients that look wrong: check the gradient in Preview, then adjust the fill and export again.

Outline text decides whether text stays editable

Outline text is the biggest choice in the SVG options. It is on by default when text is selected. With it on, Figma exports text as glyphs, which are shapes. The file looks the same on any machine, but nobody can edit the words. Turn it off to keep text as text. Then the file depends on the font, and a viewer without that font may see another typeface. For logos and icons, leave it on. For copy that changes often, turn it off and check the result in a browser.

Sizing an SVG export in Figma

SVG export in Figma supports only 1x. You cannot pick a larger scale in the SVG settings. If you need a bigger version, change the width and height values in the code, or use width and height variables. The artwork stays vector, so the size change lives in the code, not in the export dialog.

When the Export section is missing or locked

Start with a refresh of the page. If the Export section still does not appear, the file owner may have restricted viewers from copying or exporting. View-only access needs the owner to allow copying and sharing before export is possible. Ask the owner to change that setting, or ask for edit access, then try again. The owner controls this, not you.

Desktop app or browser: where your file ends up

In the Figma desktop app, the export asks you to rename the file and choose a save location. Pick a project folder you will remember, not the Desktop, so the file is easy to find later. In the browser, the file goes to your browser's download location. That is usually the Downloads folder, unless you changed it in the browser settings.

Figma version and recent release notes

Figma's help pages do not list a desktop version for these steps, so this page does not tie them to a version number. Figma's release notes dated November 2 and November 6, 2026 cover shaders and selection. Neither one mentions SVG export. If your window looks different, update the app and read the labels on your own screen.

How Lazur helps while you export

Lazur is a voice assistant for the Mac that lives in the notch. Hold ⌥⌘, which is Option and Command together, and ask about anything on screen. Lazur answers out loud. Ask where the Export section is, and Lazur draws a circle and a label around it. Ask how to export, and Lazur guides you one click at a time, waiting for each click. It does not click for you, and it does not operate Figma. You still make every click.

For more on voice help in Figma, see Figma on Mac with Lazur.

Quick check before you send the SVG

Run through this list before the file leaves your hands. It takes a minute and catches most problems from the list above.

• Open the SVG in a browser and check edges, colors and text.
• Open it in a code editor if a developer will use the markup.
• Confirm the background is transparent if you need that.
• Confirm the strokes are center strokes, or that the outline is what you expect.
• Check the file name uses lowercase words and hyphens, such as pill-button.svg.
• Keep the source frame in your Figma file so you can export again.

When SVG is the wrong format

SVG works best for shapes, icons, logos and simple illustrations. Photos and textures do not suit vector files. Use PNG for raster images and set the export options for that format. Choose SVG only when a developer or a tool needs vector shapes. A wrong format costs more time than a quick export setting.