How to export assets for development on Figma

intermediate 8 min read Updated 2026-03-18

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.

Try Figma Full Figma Review

Prerequisites

Figma account with design access
Understanding of web/mobile development formats
Knowledge of design handoff workflows
Basic familiarity with Figma interface

Step-by-Step Instructions

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.

Group related assets into frames before exporting to maintain organization and consistent export settings.

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.

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.

Use SVG format for icons and simple graphics to ensure scalability across different screen sizes.

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.

Use consistent naming conventions that match your development team's asset organization structure.

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.

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.

Create a master frame containing all your exportable assets to streamline the bulk export process.

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.

Share your Figma file with developers and enable Dev Mode access to create a self-service asset export workflow.

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.

Create a checklist of export quality standards to maintain consistency across all your project assets.

Common Issues & 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.

Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official Figma website before purchasing.

Visit Figma View Figma Pricing