Before you Start
Who can use this feature
Users on Any Plan
Users with Edit and View access to a File can add Export settings and Export assets with Export settings.
Ready to share your Figma designs with the world? You can define exactly what you want to export and how you want it exported.
To export your assets from Figma you need to:
- Make your Selection
- Apply Export Settings
- Export a Selection from the Properties Panel
- Export Assets from your Export List
Tip! Already applied Export settings? Use our Keyboard Shortcuts to Export the currently selected Layer, Group or Frame(s):
- Mac: Shift-Command-E
- Windows: Shift + Ctrl + E
Make your Selection
You can select which objects and layers you'd like to export. This could be:
- A single object
- A selection of objects
- Everything on the canvas (when you have nothing selected)
- A portion of the canvas via the Slice Tool
You can then use the Export Settings to determine how you'd like us to export them.
Note: You can also move layers, objects, groups or Frames between design tools. For the best results, we recommend copying and pasting between tools. Learn more in our Copy Assets between Design Tools article.
Apply Export Settings
You can view, add and remove Export settings in the Export section of the Properties Panel.
You can apply more than one Export setting to your selection. We will export a version of your selection for each export setting you apply.
- Make your selection in the canvas.
- Click the + icon next to the Export heading:
- Adjust the Size. You can select from our defaults in the list, or use the field provided to enter a custom Size. You can enter a number along with the following letter:
- x for Multiplier
- w for Width
- h for Height
Note: Are your exported PNGs blurry, or do you need higher resolution exports? Export your design assets at a larger multiplier e.g. 2x or 4x versus 1x. This will result in a larger file size and higher resolution.
- We base the exported file's name on the object's name in the Layers Panel. You can choose to add a Suffix to the end of the file name.
Tip If you've used a "/"'s in your Layer names, Figma will interpret this as a group. We place any exported files in folders according to their hierarchy. Learn more about updating layer names in our Rename Layers in Bulk article.
- Select a Format for that setting. You have four different export options available:
- Depending on the format selected, you will have access to extra settings. Click the three dots menu to open the Export options menu.
- Adjust any of the settings as desired:
- Contents Only (All)
- Include "id" Attribute (SVG only)
- Outline Text (SVG only)
- Simplify Stroke (SVG only)
- Click the down arrow next to the Preview to see how your exported assets will look.
- You can then:
Remove an Export Setting
You can remove any export settings you've applied.
- Click into one of the setting's fields.
- Click the minus icon [-] at the top of the Export section.
- We will remove this setting from the current selection.
You can also adjust the existing settings to create a new setting.
Export a Selection from the Properties Panel
You can also export a selection of objects or layers.
You can do this when you first apply Export Settings to a selection. Or, you can use this approach to export any selection which has already has export settings applied to it.
You can do this from the Properties Panel.
- Make the selection in the canvas.
- If you haven't already, apply your desired Export settings. You can do this in the Export section in the Properties Panel.
- Click the Export Layer(s) button in the Properties Panel.
- We'll only export the currently selected layers.
Export Assets from your Export List
We record every selection, and Export settings you apply, in the Export list. This allows you to export every asset recorded in your Export list with a single action.
View your Export List
You can access your Export list from a few places:
- Go to the Menu (☰) and Search for the Export setting.
- Go to the Menu (☰), select File and then Export from the options.
- Use the Keyboard shortcuts to open the Export list
- macOS: Shift-Command-E
- Windows: Shift + Ctrl + E
Export Assets from the Export List
The Export list will then show you all the selections you have Export settings for. You can then:
- View the Size, Format and dimension of the asset
- 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 selected assets.