Before you start
Who can use this feature
Anyone with at least can view access to the file can add export settings and export assets.
Export your designs from Figma when you're ready to share them with the world. Export settings let you to customize how Figma exports your assets. This allows you to define what you want to export and how you want to export it.
Set the format and any relevant settings when you add an export setting to your selection.
Export to PNG
(Portable Network Graphics)
PNG is a raster graphic or bitmap image format, commonly used for transferring images on the internet. In a bitmap image, each pixel or "bit" represents a single color. These bits are rendered on a" map" to make up the complete image.
PNG is a lossless bitmap format, which means the image quality isn't reduced as the asset is compressed. This allows you to keep the original quality of the image when you export it.
Figma supports 32-bit PNGs using the RGBA color model. The A in RGBA refers to the alpha channel, which controls the opacity of a pixel. It's not possible to export PNGs without an alpha value.
Want to share without exporting?
Right click on an object and choose Copy/Paste > Copy as PNG. Figma will add a PNG to your clipboard (2x size by default – but if the object has export settings, Figma will use the largest export setting instead). You can also use these shortcuts:
- Mac: Command Shift C
- Windows: Control + Shift + c
Supported export settings: Ignore overlapping layers
Export to JPG
(Joint Photographic Group)
JPG is also a pixel-based image forma. Unlike PNG, each JG has fixed dimensions. Exporting a JPG is a lossy compression to an image. This results in smaller file sizes, but also a reduced image quality.
For this reason, you'll see JPG used in print design and photography as opposed to on the web.
Supported export settings: Ignore overlapping layers
Export to SVG
(Scalable Vector Graphics)
SVG is an XML-based vector graphic. These are shapes based on numeric values and coordinates that you can render on any screen.
SVG is a scalable format as it doesn't rely on pixels. As you can represent SVGs in scripts or code, SVG is a popular choice for digital design.
Figma only supports exports for SVGs at 1x. You can still scale an SVG by adjusting the values in the code, or by using width and height variables. For example: <img
src="image.svg" width="50px">
.
There are some features Figma supports, which aren't supported in the SVG format.
- Angular or diamond gradients. Figma will export these as radial gradients.
- Figma does not export any background blurs to SVG. You will need to blur those layers directly.
- Figma exports any text as glyphs, by default. This means you can't edit the text layer once exported as a SVG. To preserve text editing, click and uncheck the Outline text setting in the menu.
- Figma exports strokes to SVG as fills.
Supported export settings:
Export to PDF
(Portable Document Format)
PDFs allow you to share complex and interactive layouts. PDFs include text, fonts, vector graphics and images in a fixed-layout.
PDFs allow you to render and manipulate individual elements of a design, in any system. This makes it a versatile format as it's independent of software, hardware, or operating system.
Xcode, Apple's mobile development language, supports PDF. This makes it a valuable tool in building iOS applications. Use PDFs in Figma to export slide decks or share assets for iOS development. You can also use them for print design mock-ups.
- Figma only supports PDF exports at 1x. Choose another format to export assets at a different scale.
- Figma does not currently support exporting editable text. You will not be able to edit any text in a PDF exported from Figma. You can still select and copy text when viewing the PDF in the browser, or other compatible software.
Access any of these extra settings when you add export settings to your selection.
Click in the in the Export section of the properties panel to view and adjust any export settings.
Ignore overlapping layers
This option is available via PNG, JPG, and SVG formats.
- Checked: Figma only includes the selected layers in the export. Any other objects that intersect or overlap the selected object will not affect the export.
- Unchecked: Figma includes any layers that intersect with the selected layer or group.
Include bounding box
This option is only available when exporting text layers via PNG, JPG, and SVG formats.
- Checked: Figma determines the size of the export based upon the dimensions of the text itself. Figma will trim and discard any space between the characters and the bounding box.
- Unchecked: Figma determines the size of the export by the text layer's bounding box. If the bounding box is larger than the text, Figma will include the empty space in the export. If it is smaller, Figma will trim and discard the portions of text that fall outside of the bounding box.
Include "id" attribute
This option is only available for SVG exports.
When checked, Figma will add an "id" tag to the SVG's metadata. Figma bases the "id" on the object's name in the Layers panel.
Outline text
This option is only available for SVG exports, Figma checks this setting by default.
When checked, Figma will convert any text layers to glyphs. You will need to uncheck this setting if you would like to preserve text editing. This will allow you to adjust any text strings in other systems.
Simplify stroke
In Figma, you can apply inside, center or outside stroke to layers. SVG as a format only supports center stroke.
Simplify stroke makes sure other systems render inside and outside strokes correctly. This setting is only available for SVG export and is checked by default. Simplify stroke is available under the following conditions:
- Export format is SVG
- The layer is a vector network and not a basic shape
- The layer uses inside or outside stroke applied to the vector network
Note: If you choose not to simplify stroke, Figma will increase the weight of any strokes and apply a mask. This achieves the same visual result, but requires Figma to add extra lines to the SVGs code.
Export assets from Figma
Access the export options in the right sidebar:
- Collaborators with
can view
access can access export settings from the Export tab of the right sidebar.
- Collaborators with
can edit
access can can find the Export section in the Design tab.
Make your selection
Select which objects and layers you'd like to export.This could be a single layer or object, a selection of objects, or everything on the canvas.
You can also use the slice tool to export a portion of your canvas.
Add export settings
Export settings control how Figma exports your assets, including the scale, format, and other format-specific settings. View, add, and remove export settings in the Export section of the right-sidebar.
Tip! If you've already applied export settings, you can use the keyboard shortcut to export your selection.
- Mac: Shift Command E
- Windows: Shift + Ctrl + E
You can then use the Export Settings to determine how you'd like us to export them.
You can add as many export settings for your selection as you want. These can be a combination of different formats or scales.
- Click the in the Export section of the right sidebar.
- Select an export format using the Suffix field. Choose from PNG, SVG, JPG, or PDF.
- Select a scale from the defaults in the list, or use the field provided to enter a custom size or scale. Enter a number along with the following letter:
- Add an
x
after the value to use it as a multiplier.
- Add a
w
after the value to set a fixed width.
- Add an
h
after the value to set a fixed height.
- Click the to open the Export options menu and adjust any extra export settings.
- Click the next to the Preview to see a preview of how your assets will look.
Tip! Export your design assets at a larger multiplier to create higher resolution exports and reduce blurry exports. This will result in a larger file size and higher resolution.
Note: Figma interprets any /'s in layer names as a hierarchy and export your selection within folders. You can rename layers to remove the hierarchy and prevent Figma from exporting assets to hierarchical folders. Learn how to rename layers →
Edit or remove an export setting
You can remove or edit export settings at any time.
- Click into one of the setting's fields
- Click the icon at the top of the Export section.
- We will remove this setting from the current selection.
Export assets
Figma will make a record of any export settings you apply to a selection in the file's Export list. This allows you to export every asset recorded in your export list with a single action
You can choose to export a specific selection of layers or objects, or export all your assets in bulk.
Export a specific selection
Export any selection with export settings. You can do this when you first apply export settings to a selection, or by making a selection which already has export settings.
- Select the layers you want to export.
- Add or adjust any export settings.
- Click the Export button in the right sidebar.
- Figma will export your current selection.
Export in bulk
Export assets in bulk using the export list. This includes every selection you have added export settings to.
- Click the menu and select File and then Export from the options. You can also use the keyboard shortcut:
- macOS: Shift Command E
- Windows: Shift + Ctrl + E
- The Export modal will show you all the selections you have Export settings for. For each selection you can:
- View the scale, format and dimension of the asset
- Hover over the thumbnail or layer name to view the exported file name.
- Click on the thumbnail to view that selection in the canvas.
- Check the box next to any selection(s) you want to export.
- Click the Export button to export any selected assets.
Tip! Save your designs as a .fig file to export the entire Figma file. This won't include any comments, version history, or permissions from the original file. You can only open .fig files using Figma.
- Click
to open the menu.
- Select File > Save local copy.
- Figma will download a copy of the file to your downloads folder.