Learn the essential steps to export assets like icons, images, and logos from your Figma designs into various formats for development, marketing, or other uses.
Click on the layer, frame, group, or component you want to export. You can select multiple items by holding Shift and clicking on each one.
With your asset(s) selected, navigate to the right-hand sidebar and find the Export section at the bottom. Click the plus (+) icon to add an export setting.
Choose your desired format (PNG, JPG, SVG, or PDF), scale (e.g., 1x, 2x, 3x), and add a suffix if needed. You can add multiple export settings for the same asset to export it in different sizes or formats simultaneously.
Figma provides a small preview thumbnail next to your export settings. This is a great way to quickly verify that you've selected the correct asset and that it looks as expected.
Once you're satisfied with your settings, click the Export button. If you have multiple assets selected, Figma will prompt you to save them as a single .zip file.
Pro Tips for Efficient Exporting
Quickly open the Export dialog for all exportable assets on the page by pressing Shift + Cmd + E (Mac) or Shift + Ctrl + E (Windows).
Organize your exports by naming your layers with a forward slash. For example, a layer named icons/menu will be exported into a folder named 'icons'.
For exporting a specific region of your canvas that isn't a single layer, use the Slice tool (S). Draw a rectangle over the area, and then apply export settings to the slice.
When exporting as SVG, click the three-dot menu in the export settings to access options like 'Include id attribute' or 'Simplify stroke' to optimize the code for web use.
Explore other Figma guides and shortcuts