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

To export from Figma, select the layers or frames you want, then click the Export section in the right sidebar. Choose the file format and resolution, then click Export to save your design as an image, PDF, or SVG.

Syntax

Exporting in Figma involves selecting the design elements and using the export options in the right sidebar.

• Select Layers/Frames: Click on the design elements you want to export.
• Export Section: Found in the right sidebar, where you set file format and size.
• File Formats: PNG, JPG, SVG, PDF, and more.
• Export Button: Click to save the file to your computer.

text

1. Select layers or frames
2. Go to right sidebar > Export section
3. Click '+' to add export settings
4. Choose format (PNG, JPG, SVG, PDF)
5. Set scale or size if needed
6. Click 'Export [number] layers'
7. Save file to your computer

Example

This example shows how to export a selected frame as a PNG image at 2x resolution.

text

1. Click on the frame you want to export.
2. In the right sidebar, scroll to the Export section.
3. Click the '+' button to add an export setting.
4. Select 'PNG' from the format dropdown.
5. Set the scale to '2x' for higher resolution.
6. Click 'Export Frame.png'.
7. Choose the folder and save the file.

Output

A PNG file named 'Frame.png' saved at 2x resolution in your chosen folder.

Common Pitfalls

• Not selecting layers or frames: Export will not work if nothing is selected.
• Wrong export format: Choosing a format that doesn't support transparency when needed (e.g., JPG instead of PNG).
• Ignoring scale settings: Exporting at 1x when you need higher resolution.
• Overlooking hidden layers: Hidden layers won't appear in the export.

text

Wrong way:
1. Click Export without selecting any layer.
2. Nothing happens or error.

Right way:
1. Select the layer or frame.
2. Set export format and scale.
3. Click Export.

Quick Reference

Step	Action	Notes
1	Select layers or frames	Click on the design elements to export
2	Open Export section	Right sidebar at the bottom
3	Add export setting	Click '+' to add format and size
4	Choose format	PNG, JPG, SVG, PDF, etc.
5	Set scale	1x, 2x, 3x for resolution
6	Click Export	Save file to your computer

Key Takeaways

Always select the layers or frames before exporting in Figma.

Use the Export section in the right sidebar to set format and resolution.

Choose the correct file format based on your needs (PNG for transparency, JPG for photos).

Adjust scale for higher resolution exports when needed.

Hidden layers will not be included in the export.