Importing Files to Figma
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 Image and Vector files.
In this article we will cover:
- Importing Sketch Files
- Importing Images
- Importing Vectors
- Importing Methods
Importing Sketch Files
We have a dedicated process that allows you to 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.
There are three methods for doing so:
- Dragging and dropping the Files into the File Browser.
- Via the Import File button in the File Browser
- By heading to Menu > New > From Sketch File while in the Editor
We have detailed instructions for all methods in our Importing Files section below.
Supported Sketch Features
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.
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 Master Components.
If you're on the Figma Professional plan, these Components can then be published to your Team Library. This allows you to reuse any of those UI elements across multiple designs.
Learn more about Components in our Using Components and Instances article.
Note: Sketch Symbol Libraries will be imported as a Figma File, and not as a Team Library. You will need to publish the Master Components to your Team Library after importing.
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.
Learn more about downloading and using local fonts in our Working with Fonts article.
Note: Using local fonts is not currently supported for Professional Teams using Linux or ChromeOS.
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 managing Missing Fonts in our Working with Fonts article.
Linux and ChromeOS users can leverage Figma Organization, our enterprise tier, to access Shared Fonts within an Organization. Learn more about Figma Organization in our Getting Started article.
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.
Each browser will support a unique set of image formats. You can import the following formats into Figma on any browser: PNG, JPEG, GIF, TIFF and WEBP.
We will downsize any Images with a width or height larger than 4096 pixels. This will scale the image's original dimensions proportionally, so the longest edge is less than 4096 pixels.
Sometimes, we need to decode and convert the original file before importing. This means that metadata isn't always preserved.
You can import Images in a few different ways:
- From the Import button in the File Browser.
- By dragging and dropping files into the File Browser.
- By dragging Image files onto the canvas.
- By copying Images and pasting them on the canvas.
- By using the Place Image feature to add Images directly to your designs.
Learn more about using the Place Image feature in our Working with Images article.
You can import Vectors into Figma via a design file (.fig or .sketch) for via an SVG (.svg) file. These File formats are complex and usually contain a mixture of Vector Shapes and Images.
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 to ensure the best results. Figma can import SVGs from a variety of design tools. The Sketch import process is a great way to transfer Vector data.
You can import Vectors in few different ways.
If the Vectors are in a .fig or .sketch file, you can:
- Use the Import button to import the .fig or.sketch file.
- Drag and drop a .fig or .sketch files into the File Browser.
If you are wanting to import individual Vector objects, like individual .svg or .png files, you can:
- Drag and drop .svg or .png files onto the Canvas. It's not possible to drag and drop SVGs or PNGs into the File Browser.
- Copy and Paste SVG elements from Sketch, Illustrator or Figma.
- Copy SVG source code and paste this in the canvas in Figma. We will interpret the code and display this as a vector instead.
Note: SVG Symbol, marker and clipPath elements are not currently imported.
There are a few different ways to import Images, Vectors or design files into Figma.
1 | File Importer
You can use the Import File icon to select files to import into Figma.
- Click on the Import File icon, next to the "+" in the toolbar:
- Select the file(s) from the dialog window:
- Click Open to start the import process. Depending on the file size this can take a couple of seconds to import.
- Click Done to return to the File Browser.
2 | Drag and Drop
You can drag a file from a folder on your computer, or from your Desktop, right into Figma. You can do this in the browser or in the Figma Desktop app.
- You can import files to File Browser in .fig, .sketch, PNG, JPG or GIF format.
- You can add files to the Editor or canvas in SVG, PNG, JPG or GIF format.
- Select the file(s) you wish to import.
- Drag the file(s) over to Figma. A blue box will appear within Figma to show your files are ready to import.
- Release your mouse to start the import process. Depending on the file size, this can take a couple of seconds.
- Once completed, click Done to return to the File Browser.
3 | Copy and Paste
The best way to import high-fidelity designs into Figma is via SVG. You can import SVG elements from other design tools by copying them and pasting them in Figma.
- Select the elements you want to copy.
- In Illustrator, choose "Copy".
- In Sketch, choose "Copy as SVG".
- In Figma, choose "Copy"
- Paste the SVG(s) into the canvas in Figma.
We've put together some tips for troubleshooting the most common importing errors.
- File Size: If you are working with large file sizes in Sketch, especially files with multiple pages and lots of images, then you may encounter issues importing these into Figma.
If files look to be loading for extended period of time, or images can't be viewed in the imported file, we recommend breaking up the original Sketch file into smaller files before re-importing.
- 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 Working with Fonts article.
- Features or properties 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.
- 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 by sending an email to firstname.lastname@example.org.
To allow us to troubleshoot any issues faster, please include screenshots of any error messages, as well as the output of any errors in the Console log. We may also need access to the original file to troubleshoot further.