Figma to SVG: Export Settings and What Gets Flattened

Figma exports SVG more cleanly than any other design tool — no embedded rasters, no proprietary markup, and minimal path bloat. Yet the way Figma organizes layers, applies constraints, and handles text can produce SVG files that are awkward to edit in other tools or that break when embedded in web pages. The difference between a Figma SVG that works everywhere and one that fails in production is understanding what "Flatten Selection" does, when to outline strokes, and how to structure frames before export.

This guide explains Figma's SVG export pipeline, shows which settings to enable for web versus fabrication workflows, and demonstrates how to prepare designs to avoid common failures.

How Figma SVG Export Works

When you export a frame or selection to SVG, Figma converts every vector node, text span, and effect into standard SVG elements. Rectangles become <rect>, circles become <circle>, arbitrary shapes become <path>, and text becomes <text> with font attributes. Strokes are preserved as stroke attributes, not separate paths. Masks become <clipPath> or <mask> elements. Effects (shadows, blurs) become <filter> elements.

This direct mapping produces compact, standard-compliant SVG. The file size is typically 40–70% smaller than an equivalent export from Illustrator or Sketch because Figma does not embed previews, multiple resolution variants, or editor metadata.

The Export Panel

Select a frame, group, or individual layer and open the Export panel (lower-right, or right-click → Export). Click the + button and choose SVG from the format dropdown. Figma shows two settings beneath the format: Outline strokes and Include 'id' attribute.

Enable "Outline strokes" if the target tool does not support stroke attributes (laser cutters, vinyl plotters, some web renderers). This converts strokes into filled paths. Disable it if you need to edit stroke widths later in Illustrator or Inkscape.

Enable "Include 'id' attribute" if you will manipulate the SVG with JavaScript or CSS. Figma generates IDs from layer names ("Rectangle 5" becomes id="Rectangle_5"). Disable it to reduce file size when IDs are not needed.

Flatten Selection vs. Export As-Is

Before exporting, decide whether to flatten the selection. Flattening merges overlapping shapes, resolves boolean operations, and converts effects into static paths. It produces simpler SVG but removes editability.

When to Flatten

Flatten when the SVG will be used as a final asset with no further editing: web icons, print logos, app resources, or fabrication files. Select the frame or group and choose Object → Flatten Selection (Ctrl+E on Windows, Cmd+E on Mac). Figma merges all layers into a single flattened group.

Export the flattened group. The resulting SVG has fewer elements, no nested groups, and no boolean operations — just paths. This format is more compatible with edge-case renderers (Android VectorDrawable, older browsers, some laser cutter software).

When to Keep Layer Structure

Keep layers when you or someone else will edit the SVG in Illustrator, Inkscape, or Figma again. Export the frame without flattening. The SVG preserves groups, named layers, and mask relationships. Strokes remain as stroke attributes, not expanded paths. Boolean operations (unions, subtracts) remain as separate overlapping paths — the target editor must resolve them.

Handling Text in SVG Export

Figma exports text as <text> elements with font-family, font-size, and other attributes. This works in browsers if the font is web-available (Google Fonts, system fonts). It fails in tools that don't load fonts (Android Studio, Inkscape on headless servers, some fabrication software).

Outlining Text (Convert to Vector)

To ensure text renders identically everywhere, convert it to vector paths before export. Select the text layer and choose Object → Flatten Selection, or right-click → Outline Stroke (this works on text too). Figma converts the text into path geometry. The downside is the text becomes non-editable — you cannot change the wording or font after conversion.

For body text or text that will be translated, keep it as <text>. For logos, headings, and decorative text, outline it.

Font Subsetting and Embedding

Figma does not embed fonts in SVG exports. If the font is not available on the target system or in the browser's font stack, the text displays in a fallback font (usually Arial or sans-serif). To prevent this, either outline the text before export or host the font as a web font and reference it in CSS.

Exporting Multiple Artboards or Frames

Figma does not batch-export multiple frames into a single SVG. Each frame exports as a separate file. To export many frames at once, select all frames in the layers panel (Shift+click), add SVG to the export settings (one setting applies to all selected frames), and click Export. Figma generates one SVG per frame and downloads them in a ZIP archive.

If you need all frames in one SVG (rare, typically for sprite sheets), manually copy-paste frames into a single master frame before export. Use a plugin like "Combine Artboards" or script it via the Figma API.

Optimizing Figma SVG for Web

Figma SVG is already lean, but two tools make it leaner: SVGO (command-line) and SVGOMG (web GUI).

Using SVGO

Install SVGO via npm: npm install -g svgo. Run it on your exported file:

svgo input.svg -o output.svg

SVGO removes unused definitions, merges paths, rounds coordinates, and collapses redundant groups. For Figma exports, the size reduction is typically 10–30% (smaller than the 40–60% reduction on Illustrator exports, because Figma already produces clean SVG).

Using SVGOMG (Web GUI)

Open SVGOMG in a browser. Drag your SVG into the window. Toggle optimization passes in the left panel. Disable "Remove viewBox" if your SVG is responsive. Disable "Remove hidden elements" if your file includes layers meant to be shown/hidden via CSS. Download the optimized version when satisfied.

Preparing Figma Designs for Fabrication

Laser cutters, vinyl plotters, and CNC routers require vector paths with specific stroke or fill configurations. Figma's default export produces filled shapes and stroked paths, which fabrication software may interpret incorrectly.

Laser Cutting Workflow

For laser cutting, convert all shapes to hairline outlines with no fills. In Figma, select all objects in the frame, set fill to "None," and set stroke to 0.01px (the smallest allowed). Assign different stroke colors to different layers: red for cut, blue for engrave, green for marking (standard conventions vary by shop).

Enable "Outline strokes" in the export settings. This converts the strokes into filled paths that laser cutters can interpret. Export as SVG or DXF (use a plugin like "DXF Export" for native DXF output).

Vinyl Plotting Workflow

Vinyl plotters need closed paths with no strokes. Select all shapes, set stroke to "None," and ensure all paths are closed (no open endpoints). Export with "Outline strokes" disabled. Open the SVG in Inkscape or Illustrator to verify paths are closed (Path → Close Path if needed).

Figma SVG vs. Illustrator SVG

Figma SVG is cleaner, smaller, and more standards-compliant than Illustrator SVG. Illustrator embeds editor metadata, preview images, and multiple coordinate systems that bloat file size. Figma strips all metadata and writes minimal markup.

The tradeoff is that Illustrator SVG preserves more editability — layers, adjustment layers, and appearance attributes remain when you re-open the file in Illustrator. Figma SVG is optimized for final output, not round-tripping back to the editor.

For web use, Figma is superior. For print workflows where you will re-edit the file in Illustrator, export from Figma to PDF (which Illustrator opens cleanly) rather than SVG.

Common Figma SVG Failures and Fixes

Three problems appear frequently: missing text (font not available), clipping masks not working, and bloated file sizes due to unnecessary complexity.

Missing or Wrong Fonts

If text displays in the wrong font, outline it before export: select the text layer, choose Object → Flatten Selection. The text becomes vector paths. For editable text, host the font as a web font and reference it in your page's CSS.

Clipping Masks Not Working

If a clipping mask fails in a browser or Illustrator, the mask geometry may be invalid. In Figma, masks must be closed paths. Check that the mask layer is a closed shape (no open endpoints). If the mask is a group, flatten it before export.

Bloated File Size

If your SVG is over 1 MB, the design is too complex. Simplify it: merge overlapping shapes (Union boolean operation), delete hidden layers, and reduce the number of nodes in curves (use the Simplify plugin or redraw curves with fewer points). Flatten the selection before export.