SVG in Figma: how to import, edit and export
How to import an SVG into Figma by dragging or pasting, edit it as vector layers, and export SVG with the right settings for text, strokes and ids.
Published
Figma reads and writes SVG. To import one, drag the .svg file onto the canvas of an open design file, or paste SVG copied from another program: it arrives as editable vector layers, not as a flat image. To export, select a layer or frame, press the plus beside Export at the bottom of the right sidebar, choose SVG as the format and press Export. Right-click, Copy/Paste as, Copy as SVG puts the same code on the clipboard without making a file.
Import an SVG into Figma
Drag the file in. Open a design file and drag the .svg from a folder onto the canvas. Figma’s help centre notes that an imported SVG is not treated as an image: it is converted into an editable vector layer.
Paste it. In the other program, copy the artwork as SVG. In Figma, right-click the canvas and choose Paste here, or press Ctrl+V, or Cmd+V on a Mac. SVG code copied as text from a code editor or a web page can generally be pasted the same way.
Two things to know:
- The file browser does not take SVG. Its Import command lists Figma and Sketch files, PNG and JPG, among others, and SVG is not among them. Open or create a design file first and bring the SVG into that.
- Not everything comes across. Figma’s help centre says that SVG
markerandpatternelements are not included in an import. Arrowheads made with markers and pattern fills will be missing.
Edit the imported SVG
The SVG generally arrives as a frame named after the file, with a vector layer for each shape inside it.
- Double-click to step inside, and click a shape to select it.
- Change Fill and Stroke in the right sidebar.
- Select a shape and press Enter to edit its points and curves.
- Resize the whole drawing with the frame’s handles, or type a width and height in the sidebar.
Lettering that was converted to outlines in the SVG is shapes, and cannot be retyped.
Export an SVG from Figma
- Select the layer, group or frame to export. To export the whole page, select nothing.
- Find the Export section at the bottom of the right sidebar and press the plus.
- Change the format from PNG to SVG.
- Press Export. In a browser the file goes to the downloads folder. The desktop app asks where to save it.
To export many things at once, give each one an export setting, then use File, Export from the main menu, or press Shift+Ctrl+E, or Shift+Cmd+E on a Mac.
Someone with only view access to a file can still export, unless the owner has switched off copying and sharing. In that case the Export section does not appear.
Figma exports SVG at 1x only. An SVG has no pixels, so that is no loss: set whatever size is needed afterwards, in the code or with resize SVG.
The SVG export settings
These are in the menu beside the export row. The descriptions follow Figma’s help centre.
| Setting | What it does |
|---|---|
| Ignore overlapping layers | Exports only the selected layers, leaving out other things that happen to overlap them. On by default |
| Include bounding box | For text layers only: sizes the export by the text box and not by the letters themselves |
| Include “id” attribute | Writes an id into the file based on each layer’s name, for use by CSS or scripts |
| Outline text | Converts text to shapes so that it looks the same everywhere. On by default when a text layer is selected |
| Simplify stroke | Rewrites inside and outside strokes so that other programs draw them correctly. On by default where it applies |
Outline text. With it on, lettering is exported as shapes and cannot be edited as text afterwards. That is the right choice for a logo or a cut file. Untick it to keep real text, which then depends on the font being available wherever the file is opened.
Strokes. SVG can only draw a stroke centred on its line, while Figma also offers strokes inside or outside the edge. Figma’s help centre says it exports strokes as fills, and that with Simplify stroke switched off it thickens the stroke and adds a mask to get the same look. For an SVG that keeps a plain stroke, which pen plotters and some laser jobs need, set strokes to Center in Figma before exporting, and check the result. SVG fill and stroke explains the difference in the code.
Frames. Exporting a frame makes the frame’s size the size of the SVG. A frame’s own fill is exported as a background unless Show in exports is unticked in its Fill section.
Background blur. Figma’s help centre notes that a background blur is not exported, and the layer has to be blurred directly.
Using a Figma SVG for cutting or engraving
Figma is built for screens, and its SVG files measure in pixels. A cutting or laser program may read those pixels as the wrong physical size.
- Export with Outline text on, so that no fonts are needed.
- Avoid effects, image fills and masks. Cricut Design Space reports a file with clipping paths or embedded pictures as having unsupported items.
- Set the real size after exporting. Resize SVG writes the width and height in millimetres or inches.
- Open the file in the SVG viewer to see whether it contains text or images before sending it to a machine.
How to upload an SVG to Cricut Design Space lists what that program accepts.
Common problems
| What you see | Cause | Fix |
|---|---|---|
| Arrowheads or pattern fills are missing after import | Markers and patterns are not imported | Redraw them in Figma, or convert them to plain shapes before importing |
| The SVG cannot be chosen in the file browser’s Import | The file browser does not take SVG | Open a design file and drag the SVG onto the canvas |
| No Export section in the sidebar | The owner has restricted copying and sharing, or the file is in Dev Mode with nothing selected | Ask the owner, or select a layer |
| Text in the exported file cannot be edited | Outline text was on | Export again with it unticked |
| Text shows in the wrong font elsewhere | Outline text was off, and the font is missing there | Export with Outline text on |
| An outline has become a filled shape | An inside or outside stroke was rewritten on export | Use a centred stroke in Figma |
| The export has a coloured rectangle behind it | The frame’s fill was exported | Untick Show in exports on the frame’s fill |
| Other layers appear in the export | Ignore overlapping layers was off | Switch it on |
| The file opens at the wrong size in other software | It is sized in pixels | Set a size in millimetres or inches |
Questions
Can a whole Figma file be exported as one SVG? A page can, by exporting with nothing selected. A file with several pages needs an export for each.
Is the exported code clean? It is generally plain SVG without editor data. The SVG optimizer can shorten the numbers further.
Why does my export contain a picture and not shapes? A layer with an image fill is pixels, and is embedded as a picture. Only vector layers and text export as shapes.