You have finished your design in Figma, It looks great and now it's time to either show it to someone or send it to another department, That means you need to export it which is a very easy and strong feature in Figma.
In this tutorial, I will show how you can export your designs, wireframes, and layers from Figma in a very easy-to-follow way.
Check out this list of the Best Figma Courses!
Export Formats in Figma
As a graphic designer myself the format you export in determines a lot of the actual purpose you will use that export for, and Figma offers a wide variety of export formats to cater to all needs I will list them below:
- PNG: This is an image format that has also transparency within, It's a bit larger in size than normal images but the quality is better.
- JPG: standard image compression, this type of image doesn't have any transparency within, and usually the file size is quite small.
- SVG: This is used for Vector files, With this file you can import it to Illustrator and continue working on it, or you can import it in Photoshop and scale it as big as you want without affecting its quality as it is vector and not raster.
- PDF: This format is used for presentations or print shops it offers better good quality for printing purposes.
Exporting from Figma
Now that we have gone through the various formats we can export from Figma, let's show you how we can actually export.
From Figma, we can choose to export the following:
- Layers
- Frames
- Groups
- Design Canva
To export first select what you want to export in our example I will export the following Group.
Then head over to the bottom right section of the "Design" window and scroll down until you see the "Export".
Click on the "+" icon to expand the Export section.
Click on the Word "PNG" to expand a dropdown menu of all the formats available to choose from.
Choose and and click "Export" You will be prompted with a window to choose where to save the file and what to name it.
and that's it, You just exported a PNG file of the group you selected!
Conclusion
Exporting is essential to learn in any graphic software as you will need to get your designs out and either print them, show them to someone, or simply transfer them to another software.
In Figma, it's very easy and simple to export, just scroll down the design tab on the right until you find the export section, expand that and you can select a file type from PNG, JPG, SVG, or PDF, and then just hit export and you're done!
Check out this article where I compare Figma to Adobe XD!