When it comes to sharing your Figma designs with the world, you can define exactly what you want to export and how you want it exported.

Once you have made your selection you can add, customise and remove multiple Export Settings to suit your workflow.

In this article we'll cover:

  1. Understanding Export Settings:
  2. Size.
  3. Suffix.
  4. Format.
  5. Export Contents.
  6. SVG Specific Settings.
  7. Viewing an Export Preview.
  8. Adding Export Settings.
  9. Removing Export Settings.

Tip! Check out our Getting Started with Exports article for detailed instructions on how to export Layers, Groups and Frames from Figma.

1 | Understanding Export Settings

You can define exactly how you would like your objects, layers or frames to be exported, using the Export settings.

Once you've made your selection, you can find and update these settings in the Export section in the Properties Panel.

We've put together some more information on how you can use these settings to your advantage, below.

Size

The size of the exported selection can be determined in a couple of different ways.

  • You can define the size of the exported object using a multiplier, which will export the selection at X times the current dimensions (in the canvas). You can choose any value between 0.25x and 1024x. 
  • You can define a particular width or height for the selection. You will only be able to define either the width or the height via the Export settings, so the other dimension will be automatically calculated based on the selection's current dimensions.

We have added some defaults to the list, but you can use the field provided to manually enter a Size followed by the multiplier (x), width (w) or height (h):

The maximum dimensions that Figma export supports are 32768 x 32768, with an uncompressed file size of 2GB. Browsers won’t support larger images (above 4k) in WebGL, so viewers may encounter issues with opening exports at this size.

Tip! Are your exported PNGs blurry, or do you need higher resolution exports? Export your design assets at a larger multiplier i.e. 2x or 4x versus 1x; this will result in a larger file size and higher resolution.

Suffix

The exported file's name will be based on the name of the object, group or frame in the layer's panel.

However, you can choose to add a Suffix to the end of the file name, to make it more distinguishable e.g. the Project or Client's name.

Tip! If you've used a "/"'s in your Layer name, Figma will interpret this as a group and any exported files will be placed in folders according to their hierarchy. Learn more about updating layer names in our Renaming your Layers in Bulk article.

Format

You have four different export options available; PNG, JPG, SVG and PDF.

We've put together a brief explanation for each option, along with some tips for when to use them below.

PNG (Portable Network Graphics)

PNG is a bitmap image where each pixel or "bit" is defined by a single color. These bits arranged on a "map" with fixed dimensions to make up the complete image. It has lossless compression, which ensures the quality of the original image is maintained, but only supports the RGB(A) color space. This makes PNG a common format for web-based images.

JPG (Joint Photographic Group)

JPG is also a pixel-based image format with fixed dimensions, which is commonly used in print design and photography. It applies lossy compression, which results in smaller file sizes but reduced image quality.

SVG (Scalable Vector Graphics)

SVG is an XML-based vector graphic which is made up of shapes that can be rendered on any screen based on numerical values and specific coordinates. SVG doesn't rely on pixels, which makes it an easily scalable format - combined with its scriptable nature, this makes it a popular choice in interactive web-design.

There are some Figma features and functions that aren't supported via SVG:

  • Angular and Diamond gradients are exported as Radial gradients.
  • Background Blur will no be exported.
  • Strokes are converted to fills when exported.
  • By default, text will be exported as glyphs versus editable text objects. You can preserve the text by disabling the Outline Text option (see below).

PDF (Portable Document Format)

PDF allows you to share complex and interactive arrangements of text, fonts, vector graphics and images, in a fixed-layout. It is incredibly versatile as it allows you to render and manipulate individual elements of a design, while being entirely independent of software, hardware or operating system.

PDF is supported by Xcode, Apple's mobile development language, which makes it a valuable tool in building iOS applications. You can also use PDFs in Figma to export a slide deck, share high fidelity assets for iOS development, or print design mock-up.

For a behind the scenes look at developing Figma's PDF export function, check out our technical blog post.

Export Contents Only

All file formats give you the option to export Contents Only.

When this setting is checked, then only the child layers of the currently selected Layer, Group or Frame will be included in the export file.

When this is unchecked, any layers or objects that intersect with the selected layer or group boundary will be included in the export file.

SVG Specific Settings

When you select SVG as the file format, you will have additional export options available:

  • Include "id" attribute will add an "id" tag to the metadata included in the SVG file. This will allow it to be used directly within a website or other digital design.
  • Outline Text will be checked by default and will convert any text into glyphs. If you would like to preserve text, so that it can be converted back to editable text in other systems, ensure this is unchecked.
  • The SVG format only supports Center stroke. The Simplify Stroke setting is automatically applied to SVGs that use either Inside or Outside stroke.

    This optimises the SVG code to ensure any Inside and Outside stroke settings are interpreted correctly by other systems.

    If you choose not to Simplify Stroke on shapes using Inside or Outside strokes, Figma will reproduce the desired outcome by increasing the stroke weight and applying a mask to display only the Inside or Outside stroke. This will still achieve the same results, but will add additional lines to the SVG's code.

2 | Viewing an Export Preview

Below the Export settings you will be able to see a preview of how the current selection will look in its exported format. 

This is especially handy when you are working with the Slice Tool, Simplifying Strokes, or choosing to disable the Export Contents Only setting.

3 | Adding Export Settings

You can add multiple Export settings to your selection, which will export a copy of the selected elements at each setting.

To add a new export setting:

1. Click the + icon next to the Export setting:


2. Adjust the Size, Suffix and Format for that setting.

3. Click the three dots menu to open the Export options menu.

4. Depending on the format selected, you will see some additional options. Adjust any settings as desired.

5. Add as many additional export settings as you require. Each setting will export its own file.

4 | Removing Export Settings

You can remove any export settings you've applied too:

1. Click into one of the fields of the setting you'd like to remove.

2. Click the - icon next to the Export setting: 

3. The setting will be removed from the Export settings.

Tip! Check out our Getting Started with Exports article for detailed instructions on how to export Layers, Groups and Frames from Figma.

Did this answer your question?