Getting Started with Exports
When it comes to sharing your Figma designs with the world, you can define exactly what you want to export and how you want it exported.
Figma supports Exports in PNG, JPG, SVG and PDF format. Learn more about Export formats and settings in our Export Settings article.
Quick Start: If you already have Export settings applied to selections in your file, you can use the Keyboard Shortcuts ⇧ + ⌘ + E(Mac) or [Shift] + [Ctrl] + [E](Windows) to Export the currently selected Layer, Group or Frame(s). Not sure what we’re talking about? Keep reading to find out more!
In this article, we’ll take you through the process of Exporting assets from Figma:
- Make a selection in the Canvas. This can be an individual Layer, Object, Group or Frame, or multiple elements on the Canvas.
- Apply Export Settings to the selection. Once applied, the selection and its export settings will be added to the Export list. You can apply different export settings to different selections; repeat the process for any other selections you’d like to export.
- Export everything in your Export list .
Tip! If you're working across multiple design tools, then you may wish to export or copy across objects, groups or entire Files into another system. Check out our Exporting to Other Tools article for more information.
1 | Make your Selection
You can choose which elements of your design you’d like to export.
You can export:
- A single Layer or Object.
- A selection of Layers or Objects.
- An individual Group, nested Frame, or top-level Frame.
- A selection of Groups, nested Frames or top-level Frames.
- A specific region of your design by using the Slice Tool. Learn more in our Using the Slice Tool article.
- The entire Canvas within a single Page.
- Multiple Frames as a single PDF document, with a Frame to each page.
Tip! If you want to export everything on the canvas as a single element, then you can apply Export settings in the Properties Panel with no layers selected. You will be able to view a Preview of the exported file, before adding it to the Export list or using the Export <File name> button to export it immediately.
2 | Apply your Export Settings
You can define exactly how you would like your objects, layers or frames to be exported, using the Export settings.
You can locate these settings in the Export section, in the Properties Panel.
You can apply different Export settings to different Selections within a given File. This gives you the flexibility to tailor your settings to a particular selection, without having to individually export elements.
The Export Settings will define everything from the Export Size, Suffix, Format and Content, as well as some other SVG Specific settings. Learn more about using, adding and removing export settings in our Export Settings article.
Tip! If you have multiple pages within a File, you can make selections and apply settings across all pages within the file. They will all be added to the same Export list and can be exported together in bulk.
3 | Exporting your Selection
Once Export settings have been applied to a selection, that selection will be recorded in the Export list. You can then Export your File’s Export selections in one go.
To view the Export list and export your selections:
- Go to the Menu(three horizontal lines in the top-left corner).
- Use the Search field to find the Export setting.
- Or, select File and then Export from the options:
Alternatively, you can use the Keyboard Shortcuts ⇧ + ⌘ + E(Mac) or [Shift] + [Ctrl] + [E] (Windows) to open the Export list.
The Export list will then show you all the selections that will be exported:
- Hover over the thumbnail or layer name to view the exported file name:
- Click on the thumbnail to jump to that Selection in the Canvas:
- Check or uncheck any Selections you want to Export:
Click the Export button to export any checked selections:
If you’d prefer to export a single selection from the canvas, you can do this directly from the Properties Panel.
- Make the selection in the canvas.
- Apply the export settings in the Export section in the Properties Panel.
- Click the Export Layer button:
- This ensures only that specific selection will be exported.
Exporting Frames to PDF
You can also choose to export all of the Frames within a File to a single PDF document. This is perfect for exporting presentation slides, or other documents that are comprised of multiple Frames.
- Head to the Menu.
- Use the Search field to find the Export setting:
- Or, go to File > Export Frames to PDF:
Tip! If you haven’t applied any export settings to Layers, Groups or Frames in your file, then you will not see any options available for export:
Troubleshooting Export Errors
When you export assets via the File > Export menu, you may see an alert next to some of your layers.
Note: Export Errors won't be shown if you are export assets via the Export settings in the Properties Panel.
We've put together some tips for some common errors and how to address them:
- Unaligned Origin: If you see this message when exporting layers, or have noticed that an exported image has dimensions that are off by 1 pixel(e.g.1001 x 1000 vs*.* 1000 x 1000) then this means that the layer isn't correctly aligned to the pixel grid i.e. it uses partial pixels. When this happens the layer(s) will be exported with an extra pixel. We recommend aligning the affect Object or Layer to the pixel grid:
- Use the Round to Pixel option (Menu > Arrange > Round to Pixel) with any affected layers selected.
- Enable Snap to Pixel Grid, and manually moving the Layer's position to align with the Pixel Grid.
- Maximum image size exceeded: This message means that the exported File size is too large and has exceeded one of the maximum size limits: either 32768 x 32768 or 2GB. Browsers have a hard limit of 4K for file dimensions. If you're exporting elements from a large file, you can try exporting each Frame individually to make the file size more manageable or reduce the multiplier to ensure the dimensions are under the limits.
- Duplicate name: This error will be shown when an exported file will share the same name as another file within the export. File names will be based on the Layer, Group or Frame name, so you can amend these to ensure all files are exported with a unique file name.
- Blurry or low-resolution images: If your exported PNGs are blurry, or you need higher resolution assets, you can export your design assets at a larger multiplier i.e. 2x or 4x versus 1x, or export via SVG*.* This will result in a larger file size and higher resolution.