How to Export Designs as PNG in Figma Quickly
To export a design as a
PNG in Figma, select the frame or object, then click the Export section in the right sidebar. Choose PNG as the format, set the scale or size, and click Export to save the file.Syntax
In Figma, exporting as PNG follows this pattern:
- Select the frame or object you want to export.
- Go to the
Exportsection in the right sidebar. - Choose
PNGas the file format. - Set the scale (e.g., 1x, 2x) or custom size.
- Click the
Exportbutton to save the PNG file.
figma
Select object -> Right sidebar -> Export section -> Format: PNG -> Scale: 1x/2x/etc -> Export button
Example
This example shows how to export a selected frame as a PNG file at 2x scale for better resolution.
text
1. Click on the frame you want to export. 2. In the right sidebar, scroll down to the Export section. 3. Click the '+' icon to add an export setting. 4. Select 'PNG' from the format dropdown. 5. Set the scale to '2x' for higher resolution. 6. Click the 'Export Frame' button. 7. Choose the save location and filename in the dialog that appears.
Output
A PNG file of the selected frame saved at double the original size.
Common Pitfalls
- Not selecting the object or frame before exporting results in no export option.
- Forgetting to add an export setting in the Export section means nothing will be exported.
- Choosing the wrong scale can cause blurry or very large files.
- Exporting without checking if layers are visible can export unwanted content.
text
Wrong way:
- Select object
- Click Export button without adding PNG format
Right way:
- Select object
- Add export setting with PNG format
- Set scale
- Click ExportQuick Reference
| Step | Action | Details |
|---|---|---|
| 1 | Select | Choose the frame or object to export |
| 2 | Add Export Setting | Click '+' in Export section, pick PNG format |
| 3 | Set Scale | Choose 1x, 2x, or custom size for resolution |
| 4 | Export | Click Export button and save the file |
Key Takeaways
Always select the frame or object before exporting as PNG in Figma.
Add an export setting with PNG format in the Export section before exporting.
Adjust the scale to control the resolution and file size of the PNG.
Check layer visibility to avoid exporting unwanted elements.
Use the Export button in the right sidebar to save your PNG file.