Related Videos

• Guide to exports in Figma

  Before you start

  Who can use this feature

  Supported on any team or plan.

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

  Export your designs from Figma when you're ready to share them with the world. Export settings let you to customize how Figma exports your assets. This allows you to define what you want to export and how you want to export it.

  Set the format and any relevant settings when you add an export setting to your selection.

  Tip! You can also copy layers, objects, groups or Frames between design tools. We recommend copying and pasting these assets between tools. Learn how to copy assets between tools →.

  Export formats

  Export to PNG

  (Portable Network Graphics)

  PNG is a raster graphic or bitmap image format, commonly used for transferring images on the internet. In a bitmap image, each pixel or "bit" represents a single color. These bits are rendered on a" map" to make up the complete image.

  PNG is a lossless bitmap format, which means the image quality isn't reduced as the asset is compressed. This allows you to keep the original quality of the image when you export it.

  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.

  Want to share without exporting?

  Right click on an object and choose Copy/Paste > Copy as PNG. Figma will add a PNG to your clipboard (2x size by default – but if the object has export settings, Figma will use the largest export setting instead). You can also use these shortcuts:

  • Mac: Command Shift C
  • Windows: Control + Shift + c

  Supported export settings: Contents Only

  Export to JPG

  (Joint Photographic Group)

  JPG is also a pixel-based image forma. Unlike PNG, each JG has fixed dimensions. Exporting a JPG is a lossy compression to an image. This results in smaller file sizes, but also a reduced image quality.

  For this reason, you'll see JPG used in print design and photography as opposed to on the web.

  Supported export settings: Contents Only

  Export to 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.

  SVG is a scalable format as it doesn't rely on pixels. As you can represent SVGs in scripts or code, SVG is a popular choice for digital design.

  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">.

  There are some features Figma supports, which aren't supported in the SVG format.

  • Angular or diamond gradients. Figma will export these as radial gradients.
  • Figma does not export any background blurs to SVG. You will need to blur those layers directly.
  • Figma exports any text as glyphs, by default. This means you can't edit the text itself. Disable the Outline text setting to preserve text editing.
  • Figma exports strokes to SVG as fills.

  Supported export settings:

  • Contents Only
  • Include "id" Attribute
  • Outline Text
  • Simplify Stroke

  Export to 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 mock-ups.

  • Figma only supports PDF exports at 1x. Choose another format to export assets at a different scale.
  • Figma does not currently support exporting editable text. You will not be able to edit any text in a PDF exported from Figma. You can still select and copy text when viewing the PDF in the browser, or other compatible software.

  Check out our Path to creating a precise PDF Exporter blog post for a behind-the-scenes look at building PDF exports.

  Extra export settings

  Access any of these extra settings when you add export settings to your selection.

  Click in the in the Export section of the properties panel to view and adjust any export settings.

  Ignore overlapping layers

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

  • Checked: Figma only includes the selected layers in the export. Any other objects that intersect or overlap the selected object will not affect the export.
  • Unchecked: Figma includes any layers that intersect with the selected layer or group.

  Include bounding box

  This option is only available when expecting text layers via PNG, JPG, and SVG formats.

  • Checked: 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.
  • Unchecked: 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.

  Include "id" attribute

  This option is only available for SVG exports.

  When checked, Figma will add an "id" tag to the SVG's metadata. Figma bases the "id" on the object's name in the Layers panel.

  Outline text

  This option is only available for SVG exports, Figma checks this setting by default.

  When checked, Figma will convert any text layers to glyphs. You will need to uncheck this setting if you would like to preserve text editing. This will allow you to adjust any text strings in other systems.

  Simplify stroke

  In Figma, you can apply inside, center or outside stroke to layers. SVG as a format only supports center stroke.

  Simplify stroke makes sure other systems render inside and outside strokes correctly. This setting is only available for SVG export and is checked by default. Simplify stroke is available under the following conditions:

  • Export format is SVG
  • The layer is a vector network and not a basic shape
  • The layer uses inside or outside stroke applied to the vector network

  Note: If you choose not to simplify stroke, 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 SVGs code.

  Export assets from Figma

  It's possible to restrict Viewers from being able to copy or export assets from Figma files. This feature is supported on Professional and Education teams, or Figma Organizations.

  If you don't see an Export section in the right sidebar, this setting is active and you can't export assets from this file.

  Access the export options in the right sidebar:

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

  Make your selection

  Select which objects and layers you'd like to export.This could be a single layer or object, a selection of objects, or everything on the canvas.

  You can also use the slice tool to export a portion of your canvas.

  Add export settings

  Export settings control how Figma exports your assets, including the scale, format, and other format-specific settings. View, add, and remove export settings in the Export section of the right-sidebar.

  Tip! If you've already applied export settings, you can use the keyboard shortcut to export your selection.

  • Mac: Shift Command E
  • Windows: Shift + Ctrl + E

  You can then use the Export Settings to determine how you'd like us to export them.

  You can add as many export settings for your selection as you want. These can be a combination of different formats or scales.

  1. Click the in the Export section of the right sidebar.
  2. Select an export format using the Suffix field. Choose from PNG, SVG, JPG, or PDF.
  3. Select a scale from the defaults in the list, or use the field provided to enter a custom size or scale. Enter a number along with the following letter:
     • 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.
  4. Click the to open the Export options menu and adjust any extra export settings.
  5. Click the next to the Preview to see a preview of how your assets will look.

  Tip! Export your design assets at a larger multiplier to create higher resolution exports and reduce blurry exports. This will result in a larger file size and higher resolution.

  Note: Figma interprets any /'s in layer names as a hierarchy and export your selection within folders. You can rename layers to remove the hierarchy and prevent Figma from exporting assets to hierarchical folders. Learn how to rename layers →

  Edit or remove an export setting

  You can remove or edit export settings at any time.

  1. Click into one of the setting's fields
  2. Click the icon at the top of the Export section.
  3. We will remove this setting from the current selection.

  Export assets

  Figma will make a record of any export settings you apply to a selection in the file's Export list. This allows you to export every asset recorded in your export list with a single action

  You can choose to export a specific selection of layers or objects, or export all your assets in bulk.

  Export a specific selection

  Export any selection with export settings. You can do this when you first apply export settings to a selection, or by making a selection which already has export settings.

  1. Select the layers you want to export.
  2. Add or adjust any export settings.
  3. Click the Export button in the right sidebar.
  4. Figma will export your current selection.

  Export in bulk

  Export assets in bulk using the export list. This includes every selection you have added export settings to.

  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 will show you all the selections you have Export settings for. 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. Check the box next to any selection(s) you want to export.
  4. Click the Export button to export any selected assets.

  Tip! Save your designs as a .fig file to export the entire Figma file. This won't include any comments, version history, or permissions from the original file. You can only open .fig files using Figma.

  1. Click
     to open the menu.
  2. Select File > Save local copy.
  3. Figma will download a copy of the file to your downloads folder.
• Import files into Figma

  Before you Start

  Who can use this feature

  Users on Any plan

  Users with Anyone can import files into their Drafts

  Users with 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)
  ✅ Image Files (PNG, JPG or GIF)

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

  1. Click on the Import File icon next to the New File button in the toolbar. You can find this in the top-right corner 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)
  ✅ 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

  

• Import files from Sketch

  Before you Start

  Who can use this feature

  Users on any plan can import Sketch files

  All users can import Sketch to their Drafts

  Users will need to have Edit access to import a Sketch file 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 on the left-hand side of the Editor. Learn more about viewing Pages in our Layers Panel article.

  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 Figma Professional plan, these Components can then be published to your Team Library. This allows you to reuse those elements across multiple designs.

  Note:cSketch Symbol Libraries will be imported as a Figma File, and not as a Team Library. You may need to publish the main Components to your Team 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 objects are imported correctly from Sketch, you need to ensure those Fonts have been made available to you in Figma.

  • If you are using the Figma Desktop app, you will be able to access any local fonts by default. You won't need to do anything further.
  • If you're using Figma in the browser, then you will need to download the Figma Font Helper to use any locally available fonts.

  You will still be able to import Sketch files, but text objects may not be imported correctly. If this occurs, you will receive a "Missing Fonts" message in Figma. This will give you the opportunity to update any affected Text objects to another Font.

  Learn more about using Local Fonts and managing Missing Fonts.

  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 Figma Organization.

  Styles

  Styles will not be added via the import process. Any Styles you have been using in Sketch will need to be created as Styles in Figma. Check out our Creating Styles article for more information on creating and adding 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 your designs from Sketch:

  • Use the File Importer in the File Browser
  • Drag and drop .sketch files into the File Browser
  • Create a new File from a Sketch File
  • Copy and paste Artboards or layers from Sketch.

  New from Sketch File

  When you are in the Editor, you can create a new File from a Sketch file.

  1. Click on the menu icon in the top-left corner of Figma.
  2. Go to 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.
• 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 or download an entire file from Figma? Head to File > Save a local copy from the menu.