Intermediate
How to export assets for development on Figma
Quick Answer
Export development assets from Figma by selecting design elements, configuring export settings in the right panel, and choosing appropriate formats like PNG, SVG, or PDF. Use the Export panel to batch export multiple assets or utilize Figma's Dev Mode for seamless developer handoff.
Prerequisites
- Figma account with design access
- Understanding of web/mobile development formats
- Knowledge of design handoff workflows
- Basic familiarity with Figma interface
1
Select the assets you want to export
Click on the design element, component, or frame you want to export. Hold
Shift to select multiple elements, or use Cmd/Ctrl + A to select all elements on the canvas. You can also select layers directly from the Layers panel on the left sidebar.Tip
Group related assets into frames before exporting to maintain organization and consistent export settings.
2
Open the Export panel
With your assets selected, locate the Export section in the right sidebar panel. If you don't see it, make sure you have elements selected. The Export panel will show export format options and settings for your selected elements.
3
Configure export settings
Click the + button next to Export to add export formats. Choose from formats like PNG, JPG, SVG, or PDF. Set the scale multiplier (1x, 2x, 3x) for different screen densities. For web assets, use PNG or SVG. For mobile, export multiple scales like @1x, @2x, @3x.
Tip
Use SVG format for icons and simple graphics to ensure scalability across different screen sizes.
4
Set up file naming and organization
In the export settings, you can customize the filename suffix for different scales. Figma automatically appends
@2x, @3x etc. Click the gear icon next to each export format to access advanced settings like background color, compression quality, and naming conventions.Tip
Use consistent naming conventions that match your development team's asset organization structure.
5
Export individual assets
Click the Export [asset name] button at the bottom of the Export panel to download your assets. Choose the destination folder on your computer. The files will be exported with your specified formats and naming conventions.
6
Use bulk export for multiple assets
Select multiple frames or components, then use
Cmd/Ctrl + Shift + E to open the bulk export dialog. You can also go to File > Export from the menu. This allows you to export many assets at once with consistent settings.Tip
Create a master frame containing all your exportable assets to streamline the bulk export process.
7
Utilize Dev Mode for developer handoff
Toggle Dev Mode in the top-right corner of Figma. This provides developers with asset export capabilities, CSS code snippets, and measurements. Developers can directly export assets they need without designer intervention, and access implementation details like spacing, colors, and typography.
Tip
Share your Figma file with developers and enable Dev Mode access to create a self-service asset export workflow.
8
Verify exported assets
Open the exported files to verify quality, dimensions, and formatting. Check that transparent backgrounds are preserved in PNG files and that SVG files maintain vector scalability. Test the assets in your development environment to ensure they display correctly across different devices and screen densities.
Tip
Create a checklist of export quality standards to maintain consistency across all your project assets.
Troubleshooting
Exported assets appear blurry or pixelated
Ensure you're exporting at appropriate scales (2x, 3x) for high-DPI screens. Check that your original design elements are vector-based or high resolution. Use SVG format for icons and simple graphics to maintain crisp edges at all sizes.
Export button is grayed out or missing
Make sure you have selected at least one layer, component, or frame. The Export panel only appears when elements are selected. If still missing, try refreshing your browser or updating the Figma desktop app.
Wrong file format or settings exported
Double-check your export settings before clicking export. Remove unwanted formats by clicking the X next to them in the Export panel. Verify scale multipliers and file naming conventions match your development requirements.
Assets missing transparent backgrounds
Ensure you're using PNG format for assets requiring transparency. Check that your design doesn't have unwanted background fills. In export settings, verify the background is set to transparent rather than white or another color.
Ready to get started with Figma?
Put this tutorial into practice. Visit Figma and follow the steps above.
Visit Figma →