Export Settings

You can define  what you want to export and how you want it exported.

In this article we will cover:

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

Supported Export Formats

You can choose the Export format when applying the Export settings:

You have four different export options available:

Export to PNG

(Portable Network Graphics)

PNG is a bitmap image; we define each pixel or"bit" by a single color.

These bits arranged on a"map" with fixed dimensions to make up the complete image.

  • It has lossless compression. This ensures we maintain the quality of the original image.
  • Only supports the RGB(A) color space. This makes PNG a common format for web-based images.

Export to JPG

(Joint Photographic Group)

JPG is also a pixel-based image format, which has fixed dimensions. You will see JPG used in print design and photography.

This format applies lossy compression to an image. This results in smaller file sizes but reduced image quality.

Export to SVG

(Scalable Vector Graphics)

SVG is an XML-based vector graphic. These are shapes that you can render on any screen, based on numeric values and coordinates.

SVG doesn't rely on pixels, which makes it a scalable format. You can also use SVGs in scripts (code). These attributes make 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. We export these as Radial gradients.
  • We do not export Background Blurs.
  • Strokes. We convert them to fills when exported.
  • By default, we export text as glyphs. You can preserve text for editing by disabling the Outline Text setting.

Note: To ensure consistency and optimal performance, we only support export for SVGs at 1x. You will still be able to scale the SVG during implementation. You can do this in a variety of ways e.g. by adding a width="Xpx" or height="Xpx" variable to the img tag: <img src="image.svg" width="50px">.

Export to PDF

(Portable Document Format)

PDFs allow you to share complex and interactive layouts. These can include text, fonts, vector graphics and images in a fixed-layout.

PDFs allow you to render and manipulate individual elements of a design, in any system. This makes it a versatile format as it's independent of software, hardware or operating system.

Xcode, Apple's mobile development language, supports PDF. This makes it a valuable tool in building iOS applications. You can also use PDFs in Figma to export slide decks or share assets for iOS development. You can also use them for print design mock-ups.

  • PDF export supports selecting text. You can select and copy any text from the page, when viewing the PDF in the browser or other compatible software.
  • We do not currently support exporting editable text.

For a behind the scenes look at developing Figma's PDF export function, check out Our path to creating a precise PDF Exporter.

Extra Export Settings

There are some extra settings available for Exports. These vary depending on the Format you have selected.

You can access these settings by clicking the three dots next to the Export settings.

Contents Only

This option is available via PDF, PNG, JPG and SVG formats.

When checked, we will only include the child layers of the selected Layer, Group or Frame.

When unchecked, we will include any layers that intersect with the selected layer or group.

Include "id" Attribute

This option is only available when you have selected  SVG as the Format.

When checked, we will add an  "id" tag to the SVG's metadata. We base the "id" on the object's name in the Layers Panel.

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

Outline Text

This option is only available when you have selected  SVG as the Format. We check this setting by default.

When checked, we will convert any text layers to glyphs.

You will need to uncheck this setting if you would like to preserve text. This will allow you to convert text back to editable text in other systems.

Simplify Stroke

This option is only available when you have selected  SVG as the Format. We check this setting by default.

We will only display this setting under specific circumstances:

  • You have selected SVG as the Format
  • You are exporting a vector network (not a simple shape)
  • You have Inside or Outside Stroke applied to the vector network

In Figma, you can apply  InsideCenter or Outside Stroke. But, SVG as a format only supports Center stroke.

We apply Simplify Stroke to SVGs that use Inside or Outside stroke. This ensures other systems interpret any Inside and Outside stroke settings.

If you choose not to Simplify Stroke, Figma will attempt to reproduce the desired outcome. We do this by increasing the stroke weight and applying a mask. This will still achieve the same visual results, but requires us to add extra lines to the SVG's code.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.