Related Videos

• Imports in Figma design

  Before you Start

  Who can use this feature

  Supported on any team or plan.

  Anyone with can edit access can import Files to a team. Anyone can import Files to their Drafts.

  Users with Edit access can import image or vector files into a File

  Moving files between tools doesn't need to be painful. You can import a range of different file types into Figma.

  This includes entire design files from Sketch or Figma, as well as individual Image and Vector files.

  There are many different ways to import Files into Figma. The best method will depend on what type of File you are wanting to import.

  I want to import:

  • Images
  • Vectors from other design tools
  • Entire design files from Sketch
  • Design files from Figma

  The table below details which methods are supported for each File type.

  

  Import images

  There are many ways you can add images to Figma.

  • Drag and drop images onto the Canvas
  • Import files via the File Browser
  • Upload an Image as a fill
  • Paste images from your clipboard
  • Copy and paste images between objects
  • Add images to objects in bulk with place image
  • Add animated GIFs to prototypes

  Learn more about importing images in our Add images to your designs article.

  Import vectors

  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.

  You can import vectors via a couple of different methods:

  • Importing entire Sketch or Figma Files that contain vectors.
  • Copying layers in other design tools and pasting them in Figma.
  • Exporting vectors as SVGs and importing them into Figma.

  Learn more about importing and exporting vectors in our Copy assets between design tools article.

  Note: If you are working with large file sizes, especially files with multiple pages and lots of images, then you may encounter issues importing these into Figma.

  Files still loading or images can't be viewed? We recommend breaking up the original file into smaller files before you try to import again.

  Import entire design files

  There are a couple of ways you can import entire design files into Figma. Import them using the file importer or drag and drop files into the file browser. Learn how to import files →

  Missing fonts? If you're using Figma in the browser then you will need to download the Figma Font Helper to access any locally available fonts.

  The Figma Desktop app will already have access to local fonts by default. Learn more about managing missing fonts in our Manage missing fonts article.

• 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: Ignore overlapping layers

  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: Ignore overlapping layers

  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 layer once exported as a SVG. To preserve text editing, click and uncheck the Outline text setting in the menu.
  • Figma exports strokes to SVG as fills.

  Supported export settings:

  • Ignore overlapping layers
  • 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 exporting 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

  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)
  ✅ 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)
  ✅ 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 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.
• Using the Slice Tool

  Before you Start

  Who can use this feature

  Users on Any Plan

  Only users with Edit access to a File can create and export slices

  The Slice Tool is also found under the Region Tool dropdown in the toolbar. 

  

  Slices allow you to specify a specific region of the screen for export, even if they're not organized into a single group. Just drag a slice around the region you want to export, and add an export setting to the slice object.

  With "Contents Only" enabled, the Slice will export its parent layer and the children of that parent. With "Contents Only" disabled, anything that overlaps the slice will be exported.

  These are useful, because you can quickly show/hide them all, and they can be grouped outside of other content or placed at the top of the layer stack.

  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.

  Frames are similar to slices, but Frames typically contain and clip the child layers, have a background, effects, etc. Slices are just a lighter weight rectangular bound that exists outside of the hierarchy for exporting.