Web Design » Figma » How Do I Export Transparent in Figma?

How Do I Export Transparent in Figma?

Last updated on May 17, 2023 @ 8:57 am

There are a few ways to export a transparent file in Figma. One way is to export the element itself. This will allow you to save your file as a PNG or GIF with transparency.

Another way is to disable the color fill of the element’s background before exporting. This will also allow you to save your file as a PNG with transparency.

To export the element itself, follow these steps:

1. Open the file you want to export in Figma.

2. Select the element that you want to export as a transparent file.

3. Open the Design tab on the right panel then go to the Export section. In the “Export” menu, select “PNG” from the “Format” drop-down menu.

NOTE: PNG is the recommended file format for exporting transparent images. It supports alpha channels, allowing for transparent backgrounds.

4. Open the “Preview” window by clicking on the drop-down arrow to see a preview of the transparent element to export.

NOTE: A checkered background in the preview indicates a transparent background.

5. Click on the “Export” button and select a location to save your file.

To export your file as a PNG with transparency by disabling the color fill of the element’s background, follow these steps:

1. Open the file you want to export in Figma and select the frame that you want to export as a transparent file.

2. Open the Design tab on the right panel then go to the Export section and click on the plus (+) icon. In the “Export” menu, select “PNG” from the “Format” drop-down menu.

3. Go to the Fill section and uncheck the checkbox beside the “Show in exports” option. This will disable the color fill of the background of your design, making it transparent.

4. Go back to the Export section and you will see in the preview that the file is now transparent. Once done, click on the “Export” button and select a location to save your file.

Now, you can simply open the file you saved and there you will have your transparent image. If you notice any issues, revisit your design in Figma and adjust accordingly.

PRO TIP: When exporting a file as a transparent PNG from Figma, it is important to note that any background color will be exported as part of the file. For this reason, it is recommended that the background be set to transparent before exporting. Otherwise, the background color will be exported as part of the file and will not be transparent.
Kathy McFarland

Kathy McFarland

Devops woman in trade, tech explorer and problem navigator.