How to Export Assets from Figma: Step-by-Step Guide

To export assets from Figma, select the layers or frames you want to export, then open the Export panel on the right sidebar. Choose the desired format and resolution, and click Export to save your assets as files.

Syntax

In Figma, exporting assets follows this pattern:

• Select the layers, groups, or frames you want to export.
• Open the Export section in the right sidebar.
• Add export settings like format (PNG, JPG, SVG, PDF) and scale (1x, 2x, etc.).
• Click the Export button to save the files.

This process lets you export exactly what you need in the format and size you want.

text

1. Select layers or frames
2. Go to right sidebar > Export section
3. Click '+' to add export settings
4. Choose format and scale
5. Click 'Export [number] layers'
6. Save files to your computer

Example

This example shows how to export a button frame as a PNG at 2x resolution:

text

1. Click the button frame in your Figma file.
2. In the right sidebar, scroll to the Export section.
3. Click the '+' button to add an export setting.
4. Select 'PNG' as the format.
5. Set the scale to '2x'.
6. Click 'Export Button'.
7. Choose a folder and save the PNG file.

Output

A PNG file named 'Button.png' saved at double the original size.

Common Pitfalls

Some common mistakes when exporting assets from Figma include:

• Not selecting the correct layers or frames, resulting in exporting empty or wrong content.
• Forgetting to add export settings, so nothing is exported.
• Choosing the wrong format or scale, causing poor image quality or incorrect file types.
• Exporting hidden layers unintentionally.

Always double-check your selection and export settings before exporting.

text

Wrong way:
- Select nothing
- Click export (button disabled)

Right way:
- Select layers
- Add export settings
- Click export

Quick Reference

Step	Action	Notes
1	Select layers or frames	Choose what you want to export
2	Open Export panel	Right sidebar in Figma UI
3	Add export settings	Format, scale, suffixes
4	Click Export button	Saves files to your computer
5	Check exported files	Verify quality and content

Key Takeaways

Always select the correct layers or frames before exporting.

Use the Export panel to set format and scale for your assets.

Click the Export button only after adding export settings.

Double-check exported files to ensure quality and correctness.

Avoid exporting hidden or unwanted layers by mistake.