How to migrate designs and mockups from Sketch to Figma?

Tutorial
3 min
Published on Mar 20, 2023
Updated on
Sketch logo on blue background and Figma logo on black background with an arrow pointing from Sketch to Figma.
Use AI to summarize this article
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.

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:

Figma editor interface with Sketch file import panel open
  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
Thomas Labonne
Thomas Labonne
Co-founder

Suggested articles

Promotional graphic for Webflow Conf 2026 featuring Lucas Clairet as a finalist for the Developer of the Year award. His black-and-white portrait is set against a vibrant abstract background with blue, orange, green, and pink textures, creating a bold, modern visual identity. The vertical Webflow Conf ’26 branding appears on the left, while his name and the title “Finalist – Developer of the Year” are displayed in a black panel.
News
Webflow

Lucas Clairet named Finalist for Webflow Awards 2026 – Developer of the Year

Lucas Clairet named Finalist for Webflow Awards 2026 – Developer of the Year
Overview of Webflow AEO combining AI recommendations, analytics, prompt tracking, and SEO optimizations within a single interface.
Documentation
Webflow

Webflow AEO: Answer Engine Optimization built directly into Webflow

Webflow AEO: Answer Engine Optimization built directly into Webflow
Website redesign brief document titled "Brief" on a dark blue background
Documentation

Brief, specifications and RFP: scoping your website redesign and choosing the right agency

Brief, specifications and RFP: scoping your website redesign and choosing the right agency

Every great websites
starts with a conversation

Abstract composition of black and gold metallic ribbons with elegant light reflections and smooth gradients. A premium background conveying luxury, modernity, and innovation.