To export from Figma, select the design file and click on the “Export” button on the right side of the toolbar. Choose your desired file size and format and then press the “Export” file button.
Hi! My name is Yana, and I have exported assets from Figma multiple times. But before exporting files for printing or uploading to social media platforms, I like to make sure they are in the right size and format.
In this guide, I will show you how to export files from Figma and answer some of the most frequently asked questions about exporting.
Let’s dive into the tutorial!
Key Takeaways
- To see a preview of your design file before exporting, click on the Preview button in the Export section.
- Figma offers different file formats for export, including JPG, PDF, SVG, and PNG.
- You can save a design asset with a transparent background by unchecking the Show in the exports check box in the Fill section.
Step by Step Guide on Exporting from Figma
Exporting from Figma is easy and intuitive. Follow the steps below to learn about the Figma exporting options.
How to Export a Design File from Figma
Step 1. Select the design file you want to export and click on the Export button from the menu from the right side to open the export settings.
Step 2. Next, choose from design file formats available in the dropdown menu:
- JPG when you want the file to be saved as a standard image.
- PNG format will keep the file in its original quality and must also be selected when saving a file with a transparent background.
- PDF is preferable when you create a presentation or want to make sure that your file can be opened from any device.
- SVG is often used for vector graphics, such as icons or illustrations.
Step 3. Once you’ve selected a file format, press the Export button to save the design to your computer.
How to Change the Size of the Export File
You might have noticed that you can also modify the file size in the Export section. Leave the multiplier at 1 to export the design in its original dimensions. However, if you want to change the file size, increase or decrease the number.
How to Export Files with Transparent Background
Follow the steps below to save the design asset that has no background.
Step 1. Select the frame with design assets you want to export and find the background color in the Fill section in the right side toolbar. Uncheck the “Show in the exports” checkbox to remove the background from the file.
Step 2. Next, go to the Export section and you will see that your design has no background. Select the PNG file format and press the Export button to download the design.
How to Export Multiple Assets from Figma
To export multiple design files at once, hover the cursor over the layers or select each design file while holding the Shift key. Once you have selected all the files, go to the Export section and you will see the total number of files ready to export. Press the Export button and it will save the group of files to your computer.
FAQs
Find some of the frequently asked questions about exporting in Figma below.
How Do I Export Figma Prototype to HTML?
Figma does not support direct exporting prototypes to HTML. However, you can do it by using plugins such as TeleportHQ and Anima.
Can You Export Figma to Print?
Yes, Figma provides options to upload designs for printing. When it comes to exporting designs for printing purposes, it’s recommended to choose high-resolution formats like PDF or SVG.
To share a Figma file, click the Share button on the top right corner. From there, you can send personalized invites via email or share the file with anyone by giving them the access link.
Final Thoughts
Figma offers different options to prepare and save your design files depending on your needs. By following this guide, you can adjust the size, remove a background or export a few design files at the same time. You can even export files with overlapping elements. To do that, just uncheck the “Ignore overlapping layer” in the Export settings.
I hope this article helped you learn more about exporting files from Figma. Feel free to leave a question in the comments section below.
