Exporting Assets from Figma Dev Mode: What Works, and the One Thing That Doesn't
The short answer: select the layer, use the Export section in the right-hand panel. Dev Mode detects icons automatically and offers them as assets, so most of the time the thing you want is already sitting there waiting.
The catch: Dev Mode cannot select multiple layers. There is no shift-click-and-export-everything. For more than one asset you switch back to Design mode and use the batch export there. Figma has acknowledged this in its own forum; it is a limitation, not something you are doing wrong.
Which means the honest version of "developers can self-serve assets now" is: yes, one at a time.
Dev Mode was Figma's answer to a real problem: developers needed assets and measurements out of a design file, and every route to getting them involved interrupting a designer. It solved most of that. It did not solve all of it, and the gap is in a specific, predictable place.
Where the export lives
Toggle Dev Mode from the top right of the toolbar, or press Shift + D. The right-hand panel switches from design controls to inspect output — measurements, code snippets, and an Export section for whatever you have selected.
Select an icon or image, pick a format and scale, download. The available formats are the same four Figma supports everywhere: PNG, JPG, SVG and PDF. There is no WebP option here, same as in Design mode — see the WebP guide for the ways around that.
Automatic icon detection
The genuinely useful bit. Dev Mode identifies things that look like icons and surfaces them as downloadable assets even when nobody set up export settings for them.
This is the feature that actually reduces designer interruptions, because the most common handoff request is "can you export me this icon" and now the answer is usually "it's already there."
It works on things shaped like icons — small, self-contained, vector. It does not conjure export settings for a hero image, an illustration, or a marketing banner. Those still need a designer to mark them, which brings us to the limitation below.
Getting the original image, not a re-render
Underrated and worth knowing about: for a placed image, Dev Mode can give you the source file at its full original resolution, rather than a fresh render of the frame at whatever size the design uses.
The difference matters more often than you would think. A photo dropped into a 400 px card might be a 3000 px original underneath. Export the frame and you get 400 px — or 800 px at 2x — and you have thrown away most of the image. Take the original and you have the full file to work from.
This is the same distinction behind Fig2WP's Original Image mode: pull the raw bytes of the placed image out of the file rather than re-rendering the frame around it. Different tool, same insight — the frame is a crop, not the asset.
Dev Mode also handles GIF and video nodes, which the standard export panel does not present as neatly.
Copy as SVG, and when to use it
Right-click an asset and you get Copy as SVG and Copy as PNG. For an icon going straight into a component as inline markup, Copy as SVG is the fastest path there is — no file, no folder, no import statement.
Two cautions:
- Figma's SVG output is verbose. It is correct but not tidy: extra groups, generated ids, sometimes redundant paths. Run it through an SVG optimiser before it goes into a repo, especially for an icon you will ship on every page.
- Copy as PNG goes via the clipboard, which is lossy in ways you don't control. Plenty of applications flatten clipboard images onto a solid colour rather than preserving transparency. If the icon has a transparent background, export a file — we go into the details in the transparency post.
The multi-select limitation
Here is the thing people search for, and the answer is unsatisfying: Dev Mode does not let you select multiple layers to export them together.
Not a hidden setting. Not a plan tier. It simply is not there. Figma's response in its community forum has been that Dev Mode is relatively new and the feedback is noted, with no commitment or timeline.
The workaround is the obvious one:
- Switch out of Dev Mode back to Design mode.
- Shift-click the layers you want.
- Export them all in one action with
Cmd/Ctrl + Shift + E.
Which works, and is also mildly absurd — the mode built for developers sends you back to the designer's mode for the one operation developers do most. If you are pulling a whole icon set or every image on a screen, do not fight Dev Mode. Switch modes and use the batch export workflow, including the slash trick that sorts the output into folders for you.
Related trap: on a large file, exporting many assets at once can be slow or fail outright. If a big batch stalls, split it into smaller selections rather than assuming the file is broken.
Dev Mode vs Design mode, side by side
| Task | Dev Mode | Design mode |
|---|---|---|
| Export one selected asset | Yes | Yes |
| Export several at once | No | Yes — shift-click, one keystroke |
| Add export settings to a layer | No | Yes |
| Automatic icon detection | Yes | No |
| Original source image at full resolution | Yes | Only via a plugin |
| Copy as SVG / PNG | Yes | Yes |
| Export into folders (slash naming) | No | Yes |
| Two scales from one layer | No | Yes |
| Measurements and code snippets | Yes | Limited |
Read down that table and the split is clear. Dev Mode is for reading a design. Design mode is for producing files from it. Export is a production task that happens to be needed by readers, which is why it sits awkwardly across the two.
What this means for handoff
Three practical consequences.
Designers should still set export settings before handoff
Automatic icon detection covers icons. It does not cover the hero, the illustration, the background pattern, or the product photography. Anything that isn't obviously an icon still needs the designer to mark it for export — and a developer in Dev Mode cannot add those settings themselves. Mark them, or expect the question in Slack.
Layer names become file names, so name them properly
Whatever the layer is called becomes the exported file name, which becomes the URL if the image ends up on a website. Group 47 is a bad file name and an actively bad image URL. This is worth caring about beyond tidiness — file names are a real signal for image search, and we cover the whole chain from layer name to live URL in the alt text workflow post.
Decide who exports before the file is "ready"
Dev Mode makes it possible for developers to pull single assets themselves, which is good. It does not make batch handoff self-service. If a project has fifty images to place, someone still has to do a bulk export — and the useful conversation is who and when, not whether Dev Mode covers it. Our handoff checklist has the full list of what to settle first.
The step after export
Everything above ends the same way: files in a downloads folder. For an app, that is the finish line — they go into the repo.
For a WordPress site it isn't. Those files now have to be dragged into the Media Library, given titles and alt text, and matched back to the pages they belong on. That second half is where the time actually goes, and no amount of Dev Mode polish touches it, because Dev Mode's job ends at the download.
If the destination is WordPress rather than a repo, the download step is not a milestone — it is an intermediate file you are creating so you can immediately upload it somewhere else. Skipping it entirely is the shorter path.
FAQ
How do I export assets in Figma Dev Mode?
Select the layer and use the Export section of the right-hand inspect panel — pick PNG, JPG, SVG or PDF, set the scale, download. For icons you can also right-click and Copy as SVG to paste the markup straight into a component.
Can I export multiple assets at once in Dev Mode?
No. Dev Mode has no multi-select for export. Switch to Design mode, shift-click the layers, and press Cmd/Ctrl + Shift + E. Figma has acknowledged the limitation without committing to a fix.
Can developers export assets without the designer?
For icons and anything already marked for export, yes. For layers with no export settings, no — Dev Mode cannot add them. That is exactly why designers should set export settings before calling a file ready.
How do I get the original image at full resolution?
Dev Mode can hand you the source file of a placed image at its original resolution rather than a re-render of the frame. Use it when the design frame is smaller than the image behind it, which is most of the time with photography.
Why is my exported SVG so messy?
Figma's SVG output is correct but verbose — extra groups, generated ids, occasional redundant paths. Run it through an optimiser before committing it, particularly for icons that ship on every page.
Can Dev Mode export WebP?
No. Figma exports PNG, JPG, SVG and PDF in both modes. WebP needs a conversion step or a plugin — the four working approaches are in our WebP guide.
Skip the downloads folder entirely
Fig2WP exports your selected layers and sends them straight to the WordPress Media Library, with titles and alt text already attached — batch selection included, no mode switching.