Related Videos

• Export from Figma

  Before you start

  Who can use this feature

  Supported on any team or plan.

  Anyone with can view access to the file can add export settings and export assets

  Anyone with can edit access to the file can use the Slice tool

  You can export your designs from Figma in a variety of file formats and scales. Exporting helps you share content with others, move content between tools, and save copies of your designs outside of Figma.

  To export content from Figma:

  1. Select the content you want to export
  2. Apply export settings. Learn more about Figma's export formats and settings →
  3. Export a specific selection or export content in bulk

  Tip: Some objects can be copied and pasted between design tools to save time when working between tools. Learn how to copy assets between tools →

  Select content to export

  Select the content you want to export. This could be a single layer, multiple objects, or everything on the canvas. If your file has multiple pages, you’ll need to select and export content on each page separately. Learn more about selecting objects in Figma →

  Note: You can also export your entire file as a .fig (Figma design) or .jam (FigJam). Learn more about saving a local copy of a file →

  Use the Slice tool

  If you have edit access to a file, the Slice tool is another way to select content for export. The Slice tool is located under the Region tools dropdown in the toolbar.

  

  To create a slice, drag the Slice tool around the region you want to export. You can move and resize the slice if needed. Keep in mind that only content that is visually within the slice boundaries will be exported. This is useful for creating an image from a portion of your design.

  Slices also let you control padding. Otherwise the padding is computed from the overall shape bounds. The latter adjusts when the shape changes size, whereas the slice is absolute.

  Once the slice is positioned where you want it, you can apply export settings to it like any other object.

  Apply export settings

  Use the export settings to control how Figma exports your designs.

  The location of the export settings varies depending on your level of access to the file:

  • Users with can edit access can find the export settings in the Design tab of the right sidebar
  • Users with can view access can find the export settings from the Export tab of the right sidebar

  

  Note: If you don’t see the export settings, try refreshing the page. If that doesn’t work, the file owner may have restricted viewers from being able to copy or export assets from the file. Learn more about restricting copying and sharing on files →

  You can add as many export settings for your selection as you want. These can be a combination of different formats or scales. Learn more about Figma's export formats and settings →

  To add an export setting, click at the top of the Export section.

  To remove an export setting, click at the top of the Export section. Figma will remove the most recently added export setting for the selected object.

  Export content

  Export a selection

  You can export selections when you first apply the export settings, or by selecting an object that already has export settings applied.

  1. Select the layers you want to export.
  2. Add or adjust any export settings.
  3. Click next to Preview to see how your asset will look.

  Note: If you have multiple objects selected, the Preview setting does not display.

  4. Click Export.

  Export in bulk

  Export assets in bulk using the export list. This includes every selection on your current page that has an export setting applied.

  1. Click the menu and select File and then Export from the options. You can also use the keyboard shortcut:
     • macOS: Shift + Command + E
     • Windows: Shift + Ctrl + E
  2. The Export modal displays all the selections with export settings applied. For each selection you can:
     • View the scale, format, and dimension of the asset
     • Hover over the thumbnail or layer name to view the exported file name
     • Click on the thumbnail to view that selection in the canvas
  3. Uncheck the box next to any selections you don’t want to export.
  4. Click Export to export the selected assets.
• Export formats and settings

  Figma design supports a variety of export formats and settings. Use this article to determine which format best suits your needs. When you’re ready to export your designs, check out Export from Figma for instructions on applying these settings.

  Export formats

  PNG (Portable Network Graphics)

  PNG is a raster graphics format that supports lossless compression, transparency, and color contrast. Lossless compression maintains the original image quality and text readability when exporting. Keep in mind that exporting as a PNG will result in a much larger file than exporting as a JPG.

  PNGs are best used for images that involve transparency, and graphics that contain both images and text such as logos, charts, or illustrations.

  Note: Figma supports 32-bit PNGs using the RGBA color model. The A in RGBA refers to the alpha channel, which controls the opacity of a pixel. It's not possible to export PNGs without an alpha value.

  The following export settings are available for PNG:

  • Ignore overlapping layers
  • Include bounding box (text layers only)

  JPG (Joint Photographic Group)

  JPG (or JPEG) is a raster image file format with lossy compression. Lossy compression reduces file size by permanently removing file data. This results in smaller files, but also a reduced image quality.

  In most cases, JPG quality is fine for web use and will shorten loading time due to their reduced size. JPGs may also be used for print design and photography.

  Keep in mind that JPGs don’t support transparency and compression can impact the readability of any text. If your image has text or transparency, export as a PNG or SVG instead.

  Tip: You can use the Pixel preview option to preview how your designs will appear in a rasterized format. Learn more about pixel preview →

  The following export settings are available for JPG:

  • Ignore overlapping layers
  • Include bounding box (text layers only)

  SVG (Scalable Vector Graphics)

  SVG is an XML-based vector graphic. These are shapes based on numeric values and coordinates that you can render on any screen. As SVGs don’t rely on pixels, they can scale to any size without impacting image quality. They also support transparency.

  You can represent SVGs in scripts or code, making them a popular choice for digital design. Use SVGs for logos, icons, or illustrations you plan to include in responsive designs.

  Note: Keep in mind the following when exporting to SVG:

  • Angular or diamond gradients: Figma exports these as radial gradients
  • Background blurs: You will need to blur the layer directly
  • Text: Text is exported as glyphs by default. This means that you won’t be able to edit the text layer once exported. To preserve text editing, click and uncheck Outline text
  • Strokes: Figma exports strokes as fills

  The following export settings are available for SVG:

  • Ignore overlapping layers
  • Include bounding box (text layers only)
  • Include “id” attribute
  • Outline text
  • Simplify stroke

  PDF (Portable Document Format)

  PDFs allow you to share complex and interactive layouts. PDFs 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. Use PDFs in Figma to export slide decks or share assets for iOS development. You can also use them for print design mockups.

  Note: Figma exports text as glyphs, which means you won’t be able to edit any text in the final PDF. You can still select and copy text when viewing the PDF in the browser or other compatible software.

  Export settings

  Export settings let you further control how Figma exports your designs.

  Scale

  Choose from the default scale options or enter a custom size in the field. To customize the size, enter a number along with one of the following:

  • Add an x after the value to use it as a multiplier
  • Add a w after the value to set a fixed width
  • Add an h after the value to set a fixed height

  If you’re exporting content for high-density screens (like retina displays), consider exporting at a larger scale to increase the asset’s resolution.

  By default, assets exported as images from Figma have a DPI of 72. To calculate the DPI of an image exported at scale, multiple 72 by the chosen scale. For example, images exported at 2x have a DPI of 144. Images exported at 3x have a DPI of 216.

  Note: You may notice that the visual size of an image exported at 2x is not increased if you import it back into Figma. This is because Figma assumes that images with a DPI of 144 will be used in designs for high-density screens and automatically scales them in half to accommodate. Learn more about importing content into Figma →

  There are some format restrictions around scaling:

  • Figma only supports exports for SVGs at 1x. You can still scale an SVG by adjusting the values in the code, or by using width and height variables. For example: <img src="image.svg" width="50px">.
  • Figma only supports PDF exports at 1x. To export assets at a different scale, you’ll need to choose another format.

  Suffix

  This is an optional setting. Anything you type in the Suffix field will be added to the file name once exported. Use this to help organize exported assets without having to modify the layer name. For example, if you’re exporting a frame labeled “HomePage” as a PNG and enter “draft” in this field, the exported file name will be “HomePagedraft.png”.

  Format-specific export settings

  Some formats support additional export settings. Click in the Export section of the properties panel to view and adjust these settings.

  

  This table shows which settings are available for each format:

  Format	Ignore overlapping layers	Include bounding box	Include “id” attribute	Outline text	Simplify stroke
  PNG	✓	✓	✕	✕	✕
  JPG	✓	✓	✕	✕	✕
  SVG	✓	✓	✓	✓	✓
  PDF	✕	✕	✕	✕	✕

  Ignore overlapping layers

  This setting is enabled by default. When enabled, Figma only includes the selected layers in the export. Any other objects that intersect or overlap the selected object will not affect the export. When disabled, Figma includes any layers that intersect with the selected layer or group.

  Exporting a slice? The Ignore overlapping layers setting works differently for slices than it does other objects. If Ignore overlapping layers is enabled and the slice is contained inside frame or group, Figma will only export the content that is in the same container as the slice and is visually within the slice boundaries.

  If Ignore overlapping layers is disabled, all content that is visually within the slice boundaries will be exported. If the slice is not contained within a frame or group, enabling or disabling the Ignore overlapping layers setting has no effect. All content that is visually within the slice boundaries will be exported.

  Include bounding box

  Available for text layers only. When enabled, Figma determines the size of the export by the text layer's bounding box. If the bounding box is larger than the text, Figma will include the empty space in the export. If it is smaller, Figma will trim and discard the portions of text that fall outside of the bounding box.

  When disabled, Figma determines the size of the export based upon the dimensions of the text itself. Figma will trim and discard any space between the characters and the bounding box.

  Include "id" attribute

  When enabled, Figma adds an "id" tag to the SVG's metadata. This allows JavaScript to easily access the <svg> element and can also be used to point to a specific id selector in a style sheet. Figma bases the "id" on the object's name in the Layers panel.

  Outline text

  This setting is enabled by default if at least one text layer is selected. Figma converts any text layers into glyphs to maintain appearance. Text will not be editable after export if this setting is enabled. If you need to maintain editability, disable this setting.

  Simplify stroke

  This setting is enabled by default if the selected object is a vector network (not a basic shape) and includes an inside or outside stroke. In Figma, you can apply inside, center or outside strokes to an object. SVG only supports center stroke. This setting ensures that other systems render inside and outside strokes correctly.

  Note: If you disable this setting, Figma will increase the weight of any strokes and apply a mask. This achieves the same visual result, but requires Figma to add extra lines to the SVG’s code.

• Import files into Figma

  Before you Start

  Who can use this feature

  Supported on any team or plan.

  Anyone can import files into their Drafts

  Anyone with can edit access to a team can import files to a team

  New to importing? Check out our Getting Started with Imports guide.

  There are a few different ways to import files into Figma.

  File importer

  The file importer allows you to select local files from your computer and import them to your file browser.

  You can use this to method to import:

  ✅ Sketch files (.sketch)
  ✅ Figma files (.fig)
  ✅ FigJam files (.jam)
  ✅ Image files (PNG, JPG, HEIC, or GIF)

  Tip! Learn more about supported Sketch features in our Import Sketch files article.

  1. Click the Import file tile in the file browser. You can find this in the top section of any file page in the file browser.

  2. Select the file(s) from the dialog window and click Open to start the import process.

  3. Depending on the file size this can take a couple of seconds to import. Click Done to return to the file browser.

  Drag and Drop Files

  You can drag a file from a folder on your computer, or from your Desktop, right into Figma. This is available on both the Figma Desktop app and the Figma web app (browser-based).

  You can drag and drop Files into the file browser or the Editor. Figma supports different file formats for each approach.

  File browser

  ✅ Figma files (.fig)
  ✅ FigJam files (.jam)
  ✅ Sketch files (.sketch)
  ✅ Image files (PNG, JPG or GIF)

  Editor

  ✅ Vector files (SVG)
  ✅ Image files (PNG, JPG or GIF)

  Add files to Figma

  1. Open the page in Figma you want to add the file to. This could be the file browser, or a specific Figma file.
  2. Locate and select the file(s) you want to import. These could be on the desktop or in a folder.
  3. Drag the file(s) over to Figma. A blue box will appear in Figma to show that your files are ready to import.
  4. Release your mouse to start the import process. Depending on the file size, this can take a couple of seconds.
  5. Once completed, click Done to return to the file browser

  

• Copy assets between design tools

  Before you Start

  Who can use this feature

  Supported on any team or plan.

  Anyone with can view access to a file can copy assets. On the Professional and Organization plan, editors can disable the setting to allow sharing. Learn how to restrict copying and sharing → 

  If you're working across multiple design tools, then you may wish to export or copy across objects, groups or entire Frames into another system.

  Exporting and importing Vectors often requires conversion. Depending on the quality of the exporter/importer, this can often be a lossy process.

  As SVG is a lossless format, we recommend exporting SVG files when moving between design tools.

  Import to Figma

  You can import SVG elements from other design tools by copying them and pasting them in Figma. This allows you to bring across icons and graphics, as well as layers, groups or entire artboards.

  1. Open the tool you want to select your layers from.
  2. Select the elements you want to copy.
  3. Copy the elements to your clipboard:
     • In Illustrator, select "Copy"
     • In Sketch, select "Copy as SVG"
     • In Figma, select "Copy"
     • In Adobe XD, go to "File > Export > Export to SVG"
  4. Open the Figma File in the Editor.
  5. Paste the layers or SVGs into the Canvas.

  Note: SVG Symbol, marker and clipPath elements are not currently imported.

  Export from Figma

  You can drag SVG files exported from Figma directly into both Sketch and Illustrator.

  For Adobe XD and Affinity Design users, use the Copy as SVG option in Figma to copy the layer or group, then Paste the SVG directly in the other tool.

  You can also export your Files from Figma to other tools in your workflow via our purpose-built integrations:

  • Zeplin and Figma
  • Principle and Figma
  • Dribbble and Figma

  Tip! Want to export an entire file from Figma? Head to File > Save a local copy from the menu.

• Import Sketch files

  Who can use this feature

  Supported on any team or plan

  Anyone can import Sketch files to their Drafts

  People will need to have Can edit access to the team to import Sketch files to a team.

  You can import entire design files from Sketch (.sketch) into Figma. This will create a new Figma file from your Sketch import.

  Any further changes you make to the original file in Sketch will not be reflected in Figma if you re-import the file, and vice versa.

  Want to import individual assets from Sketch? Check out our Copy assets between design tools article.

  Supported Sketch features

  Figma supports and converts the following Sketch features:

  • Pages
  • Symbols
  • Fonts
  • Styles

  Pages

  Like Sketch, you can store multiple pages within a single Figma file. Any pages that exist in your Sketch files will be imported as separate pages within the Figma file.

  You can switch between pages from the Layers panel in the left sider in design files. Learn more about the Layers panel →

  Symbols

  When you import your Sketch files into Figma, any "Symbols" included in the Sketch file will be converted to Figma Components. The Symbols page in the Sketch file will be imported into Figma as a page named Symbols that contains your main components.

  If you're on the Professional plan, these components can then be published to your team library. This allows you to reuse those elements across multiple designs.

  Note: Sketch Symbol libraries are imported as Figma files, and not as a team library. You may need to publish the main components to your library after importing.

  Fonts

  If you have been using custom or locally stored fonts in Sketch, these can also be supported in Figma. To make sure text layers are imported correctly from Sketch, you need to make those fonts have been made available to you in Figma.

  • If you are using the desktop app, you can access any local fonts by default.
  • If you're using Figma in the browser, then you will need to download the Figma Font Helper to use any locally available fonts. Access local fonts →

  You will still be able to import Sketch files, but text layers may be imported incorrectly. If this happens, you will see a "Missing fonts" message in Figma. This will give you the opportunity to update any affected Text layers. Manage missing fonts →

  Note: Using local fonts is not currently supported for Professional teams using Linux or ChromeOS.

  Linux and ChromeOS users can leverage Figma Organization, our enterprise tier, to access Shared Fonts within an Organization.Learn more about the Organization plan →

  Styles

  Styles won't be added via the import process. Any styles you've been using in Sketch will need to be created as styles in Figma. Create styles →

  Features not supported: If you are seeing error in the console log regarding unsupported features or properties, then it may mean you are using an outdated version of Sketch. We recommend updating to the latest version of Sketch before saving the file and re-importing into Figma.

  Import a Sketch file

  There are a few ways you can import files, including your designs from Sketch:

  • Upload files in the file browser →
  • Drag and drop files into the file browser →
  • Copy Artboards or layers from Sketch and paste them in Figma → 

  You can also create a new file from a Sketch file, with a file already open.

  1. Click in the toolbar
  2. Select File > New from Sketch file:
     
     
  3. Select a .sketch file and click Open to import.

  Sketch beta: If you are using a beta version of Sketch, particularly a version that has been updated recently, there may be discrepancies with how we handle things behind the scenes. We aim to respond to changes as soon as possible, but let us know if you're having any trouble importing files from a Sketch beta version.

  If you are still having issues importing files, we'd love to help! Contact the Support team by clicking the "?" icon in the bottom-right corner of the Figma app and selecting "Get Help". Or, send an email to support@figma.com.

  To allow us to troubleshoot any issues faster, please include:

  • Screenshots of any error messages
  • The output of any errors in the Console log.
  • We may also need access to the original file to troubleshoot further.