How to migrate designs and mockups from Sketch to Figma?

Migrating your web mockups, wireframes, and other Sketch visuals to Figma can be quite simple.

Firstly, you can import an entire Sketch file (.sketch) into Figma, which will automatically create a new Figma file, incorporating all graphical elements. This conversion of a Sketch graphic model to Figma takes place at 4 levels:  

• Page Conversion
• Symbol Conversion
• Font Conversion
• Style Conversion

Sketch Page Conversion

Figma allows you to create multiple pages within a single file. Each of the pages from your Sketch file will be recreated identically during the import process. You can find your new Figma pages in the Layer panel on the left side of the editor mode.

Symbol to Component Conversion

Figma features a "Components" functionality, similar to Sketch's "Symbols". When exporting from 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 from the file.

Font Conversion in Figma

The fonts used in your Sketch file will also be included in Figma upon import, provided they already exist in Figma. Figma utilizes fonts from the Google Web Fonts catalog.

It's possible that the font import may not process correctly, resulting in a "Missing fonts" error message. To resolve this issue, you must import your new fonts into Figma, and then use the "Replace fonts" functionality to update all text at once.

Style Conversion

Unfortunately, the styles you created in Sketch cannot be copied over to Figma. To facilitate design work, you will need to create new styles within Figma.

Importing a Sketch File into Figma

There are several methods for migrating Sketch elements or files to Figma.

• Drag and drop a .sketch file from your desktop to the Figma dashboard.
• Upload a .sketch file from a new Figma file
• Copy and paste graphical elements from a Sketch project into a Figma page

Here’s how to import a new Sketch file from a Figma file:

1. Click on the menu in the top left
2. Go to the "File" tab
3. Click on “New from Sketch File”
4. Select the .sketch file to import