Badge Webflow Award Winner 2023

How do I migrate Sketch designs and mock-ups to Figma?

From Sketch to Figma, will your file be preserved? In this article we look at the conversion of several elements from Sketch to Figma. We also explain how to migrate your Sketch models and designs to Figma.

Published on 
24/4/2022
-
Amended on 
27/3/2023
-
5 min
sketch logo on blue background and figma logo on black background with arrow from sketch to figma

Migrating your web mockups, wireframes, and other Sketch visuals to Figma can be done very easily.

You can first import an entire Sketch file (.sketch) into Figma, which will automatically create a new Figma file with all the graphic elements. This conversion of a Sketch graphic model to Figma is done at 4 levels:  

  • Page conversion
  • Symbol conversion
  • Font conversion
  • Style conversion

Converting Sketch pages

Figma allows you to create multiple pages within a single file. Each of the pages in your Sketch file will be recreated iden tically when imported. You can find your new Figma pages in the Layer panel on the left of the editor mode.

Conversion of symbols to components

Figma has a "Components" feature, similar to the "Symbols" feature in Sketch. When exporting Sketch to Figma, each of your symbols will be transformed into components, and a "Symbols" page will be created to group all the new components in the file.

Font conversion in Figma

Fonts used on your Sketch File will also be carried over to Figma when imported, provided they already exist in Figma. Figma uses fonts from the Google Web Font catalogue.

It is possible that the fonts are not imported correctly, and you will get a "Missing fonts" error message. To solve this problem, you will need to import your new fonts into Figma, then use the "Replace fonts" feature to update all the text at once.

Style conversion

Styles created in Sketch cannot be copied into Figma. To facilitate the design you will have to create new styles in Figma.

Importing a Sketch file into Figma

There are several methods to migrate Skecth elements or files to Figma.

  • Drag and drop a .sketch file from a desktop to the Figma dashboard.
  • Download a .sketch file from a new Figma file
  • Copy / Paste graphic elements from a Sketch project to a Figma page

Here is how to import a new Sketch file from a Figma file:

figma editor interface with open sketch file import panel
  1. Click on the menu at the top left
  2. Go to the"File" tab
  3. Click on "New from Sketch File".
  4. Select the .sketch file to import it

Discover the detailed Figma vs Sketch comparison

Ready to take your website to the next level?

Improve your online visibility thanks to Digidop's experience, excellence and reactivity!

Stay in touch with Digidop news!