How to migrate designs and mockups from Sketch to Figma?

Tutorial

March 20, 2023

3 min

H2 Example

Key points

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.