How to export assets from Figma for developers
Introduction
Design is only halfway done in the Figma file. To build the product, developers need actual image files for icons, illustrations, and photos. Figma's export tools allow you to generate these assets in multiple formats and sizes instantly.
This guide shows you how to mark layers for export and generate the final files.
Prerequisites
- •Selected layer or frame
- •Figma design ready for handoff
Guide Steps
Select layers to export
Click on the icon, image, or frame you want to export. You can select multiple layers at once using Shift + Click.
Add export settings
In the right sidebar, scroll to the 'Export' section at the bottom. Click the '+' sign. By default, it sets up a 1x PNG export.
Choose format and size
Click the format dropdown to choose PNG, JPG, SVG, or PDF. For retina screens, add a second export setting by clicking '+' again and changing the scale to '2x'.
Export the files
Click the 'Export [Layer Name]' button. If you have multiple items selected, it will say 'Export X layers'. Choose a folder on your computer to save them.
Common Mistakes to Avoid
- ×Exporting icons as PNG instead of SVG, which makes them pixelated on scaling.
- ×Forgetting to group the icon shape with its background frame before exporting.
Pro-Level Design Tips & Workflows
💡 Asset Export: Hold the Option (Mac) or Alt (Windows) key while choosing resolution multipliers to export layers in exact dimensions.
💡 Vector Grid Snapping: Enable 'Snap to pixel grid' (Shift + Cmd + ') to prevent decimal positioning values which cause asset export pixelation.
Practical UI Example & Screenshot Checklist
Here is a real-world scenario where you will apply these exact layout rules:
Build a container frame with a logo and menu links. Set Auto Layout horizontal direction, padding margins to 24px, and select 'Space between' alignment to keep elements pinned to the margins.
- ✓ Inspect the right-hand design variables sidebar.
- ✓ Verify child width dropdown is set to
Fill container. - ✓ Drag the parent frame width to verify elements adapt automatically.
Glossary of Core Design Terms
A sizing constraint instructing the container frame boundaries to fit around child layers automatically.
A responsive instruction that stretches child layers to consume the remaining horizontal space of its parent flex frame.
The primary component template source. Updates to the master component propagate across all visual instances.
Figma Templates & Resources
Figma Starter Playground (.fig)
Includes pre-built design grids, responsive card examples, and button variant frames.