SVG for Figma
How to import an SVG into Figma — and a layer panel that already makes sense.
Three routes in, six reasons an import fails, and one thing that decides whether the result is workable: Figma names layers from group ids. A file with named groups arrives ready to use instead of as seventy anonymous vectors you click through one at a time.
layers
- faceted_foxframe
- earsgroup
- ear-leftvector
- ear-rightvector
- muzzlegroup
- snoutvector
- shadinggroup
These names come from the group IDs in the SVG. Nothing was renamed after the paste.
Three routes
Paste it, drag it, or place it.
Figma reads SVG natively — no plugin required for any of these. All three produce the same editable vector nodes.
Paste the markup
Copy the SVG code, click the canvas, paste.
Fastest when the file exists as text — out of a code panel, a repo or an icon site's copy button. Nothing touches your file system.
Drag the file in
Drag a .svg from Finder or Explorer onto the canvas.
The obvious one, and the one that fails loudest when the file is malformed. Figma refuses rather than importing something broken.
Place image
Main menu, then File and Place image, then pick the .svg.
Useful when you want the import to land inside a specific frame rather than wherever the cursor was.
When it refuses
Six reasons Figma will not take your SVG.
Every one of these is a property of the file rather than of Figma, which is why reinstalling, re-downloading and trying a different plugin all fail in the same way.
- 01
No viewBox, width or height
Figma cannot work out how big the drawing is and refuses it. Add a viewBox to the root element — this is the single most common cause of a flat refusal.
- 02
Missing xmlns declaration
An <svg> without xmlns="http://www.w3.org/2000/svg" is not valid SVG to a strict parser, even though many browsers render it anyway.
- 03
It is not actually an SVG
An EPS, PDF or PNG renamed to .svg is common, particularly from freebie download sites. Open it in a text editor: real SVG starts with readable markup, not binary.
- 04
It is a raster wrapped in an svg tag
One <image> element and no paths means a converter embedded a bitmap rather than tracing it. It imports as an uneditable picture. Vectorise it properly instead.
- 05
Truncated or malformed markup
A copy-paste that dropped the closing tag, or a file cut off mid-download. Open it in a browser first — if the browser will not render it, Figma will not take it.
- 06
Tens of thousands of nodes
A bad auto-trace of a photograph produces node counts that make the canvas crawl or the import hang. Simplify at the tracing stage, not afterwards.
The first three cannot happen to a file exported from the editor here: export refuses outright if the markup will not parse, and writes a viewBox, an explicit width and height, and the xmlns declaration onto every file on the way out — adding each one if the drawing arrived without it.
What survives the paste
Nine things, honestly graded.
| Feature | Transfers | Notes |
|---|---|---|
| Paths and shapes | Fully | Arrive as editable vector nodes. Every anchor is draggable with Figma's own pen tool. |
| Group and layer names | Fully | An id on a group becomes the layer name — the single biggest reason a generated file is pleasant to work with. |
| Solid fills and strokes | Fully | Hex values transfer exactly. Attach them to your library styles once they land. |
| Linear and radial gradients | Fully | Come through as editable Figma gradients with their stops intact. |
| Opacity | Fully | Both element opacity and fill-opacity map onto Figma's own opacity controls. |
| Clip paths and masks | Mostly | Usually become a Figma mask. Complex nested masking is worth checking rather than assuming. |
| Text elements | Partly | Text stays live but re-renders in whatever font Figma has. Outline it first if the letterforms matter. |
| CSS animation and SMIL | Not at all | Figma is a static canvas. Animation is stripped, and the geometry it targeted comes through unmoved. |
| Filter primitives | Not reliably | Blur may map to a Figma effect; anything more elaborate is best flattened before you paste. |
Generated to component
Six steps to a published component.
- 01
Copy the markup
Take the inline SVG out of the code panel. Pasting markup straight onto the canvas is faster than saving a file and importing it.
- 02
Paste onto the canvas
Figma parses it on paste and builds a frame of vector nodes — not a flat image, not a placeholder.
- 03
Check the layer panel
Group IDs are now layer names. If the drawing was generated with named groups, this panel already reads correctly.
- 04
Attach your styles
Swap the literal hex fills for your library colour styles so the artwork participates in your theme.
- 05
Flatten what should be one shape
Union the pieces that are conceptually a single form. Fewer nodes, cleaner selection, faster canvas.
- 06
Make it a component
Create the component, add a colour variant if you need one, and publish it to the team library.
The round trip
Figma's SVG export is not a shipping format.
Exporting back out of Figma produces markup carrying frame wrappers, redundant transforms, clip paths for every frame boundary and coordinates to many decimal places. It renders correctly and it is two to three times larger than it needs to be.
Run it through the optimiser before it reaches a repository. That is one pass, no credits, and the file never leaves your browser.
Open the optimiserQuestions
Design tool handoff.
- Can you open SVG files in Figma?
- Yes, natively — Figma reads SVG as a first-class format and turns it into editable vector nodes rather than a placed picture. There is no plugin needed for the basic case, though several exist for bulk work and for pasting raw markup.
- Why does Figma say it cannot import or convert my SVG?
- Almost always the file itself. The usual causes are a missing viewBox or width and height so Figma cannot work out the size, a missing xmlns declaration, markup that is truncated or malformed, or a file that is not really SVG — an EPS or PDF renamed, or a raster image with an .svg extension. Opening it in a browser first is the quickest test: if the browser will not render it, Figma will not import it.
- How do I edit SVG files in Figma?
- Once imported, every anchor is editable with Figma's own pen tool and every fill and stroke is a normal property. The thing that decides whether editing is pleasant is the layer panel — which comes from the group ids in the source file, not from anything you can do after the fact.
- Why did my import arrive as layers all called Vector?
- Because the source had no group ids for Figma to name them from, so it falls back to a generic label on every node. It is not a Figma bug and there is no setting for it — the names have to exist in the file before you paste. Naming forty nodes by hand afterwards is the alternative, and it is why generated files here arrive grouped.
- How do I get an SVG into Figma?
- Copy the markup and paste it directly onto the canvas — Figma parses SVG on paste. You can also drag the .svg file in, or use File → Place image. All three produce the same editable vector nodes.
- Why does my import arrive as one flat layer?
- Either the source had no groups, or it is not really vector at all — a lot of files sold as SVG are a raster image wrapped in an <svg> tag, which imports as a single uneditable picture. Open the markup and look: if you see one <image> element and no paths, converting it properly is the fix.
- Do gradients survive the import?
- Yes. Linear and radial gradients defined in the file come through as editable Figma gradients with their stops in place.
- Should I outline text before importing?
- Yes, unless you know Figma has the typeface. Outlined letterforms are identical everywhere; live text substitutes silently and you find out later.
- Can I re-export from Figma afterwards?
- Yes, and Figma's SVG export is verbose — it carries frames and transforms you do not need. Run the result through the optimiser before shipping it.
- Does this work with Illustrator and Sketch?
- The same file works in both. SVG is the interchange format all of them read, which is what makes it a better handoff than any application's native document.