With Figma pretty much dominating the UI design tool space, it’s understandable that you’d want to import your Sketch designs into Figma. However, you might not know how to do that, especially if you’re a part of an enterprise organization that needs to import multiple Sketch designs into Figma.
So in this tutorial, I’ll show you how to import Sketch designs into Figma and also explain what happens to your Color Variables, styles, Symbols, Artboards, Pages, Smart Layouts, constraints, Grids, interactions and so on during the Sketch-to-Figma conversion process.
There are three ways to import Sketch designs into Figma:
Before you begin, though, make sure that you update Sketch and Figma to their latest versions before saving your Sketch file one last time. I also recommend downloading and installing the relevant Figma font installer for your operating system (I’ll explain why later). Doing these things should ensure that you don’t run into any incompatibility problems.
If you have a Figma file open already, navigate to Main menu > File > New from Sketch file… from the horizontal toolbar, select the .sketch file that you’d like to import, and then click on the Open button:
Easy!
From the Figma File Browser, which is basically the UI that appears whenever you open Figma, click on the Import button in the top-right corner, then click on From your computer from the dialog window that appears:
After that, select the .sketch file(s) that you’d like to import from the dialog window that appears (yes, a different dialog window), and then click on the Open button:
Alternatively, you can drag .sketch files straight into the file browser:
Also easy!
N.B., if you’re in a Project folder when you open the .sketch file(s), then that’s where the converted Figma file(s) will be saved to (otherwise it’ll go into the Drafts folder, like all new files).
You can also copy and paste layers from Sketch to Figma. This process is obviously quite inefficient for large Sketch designs, but not if there are only a few things that you’d like to keep/copy over. That being said, it’s probably still quicker to import your Sketch file using either of the previously mentioned methods and then delete what you don’t want.
So although this method is also easy, it’s probably not the one that you want to use.
Converting Sketch files into Figma files isn’t as simple as just getting the design to look the same. As well as the layers, properties, artboards, and pages, we also want the Color Variables, styles, Symbols, Smart Layouts, constraints, Grids, interactions and so on to carry over, so what remains intact and what doesn’t? Let’s take a look.
Sketch Pages will become Figma pages, so you won’t lose any of your page-based organization during the conversion. No problem there.
Sketch Artboards will become Figma frames. The only real difference between Sketch Artboards and Figma frames is that Frames can be nested because they’re functionally more generic than Artboards (they’re more like groups, really), although what you’d call an Artboard in Sketch is specifically referred to as a “top-level” frame in Figma.
Sketch Symbols will become Figma components. You’ll find them on a Page called “Components” (or “Symbols” for older versions of Sketch):
From there, you can optionally move them to a separate Figma library that can be accessed from as many Figma files as needed (this is how product teams leverage design systems across multiple designs). You’ll need to be on the Professional Plan to use Figma libraries, though.
To set this up, click on the down arrow icon next to the file’s name in the horizontal toolbar, and then click on Publish library… (or option + 3 / Alt + 3 > Publish):
Next, click on the Publish button to publish the components to your team’s Figma library:
After that, go into the Figma folder that contains your imported design (from the file browser), and then click on the + Design file button to create a new file:
Now cut the components from your imported file before pasting them into this new design file. Once you’ve done this, a dialog will appear in the bottom-right corner saying, “To move pasted components to this file, publish a library update” — do what it says by clicking on the Publish… button:
One more time, click on the Publish button (this time from the dialog window that appears):
A dialog will now appear in the bottom-right corner of your imported file saying “Some components were moved. Updates are available.” — get the updates by clicking on the Review button:
Finally, click on the Update all button from the dialog window that appears:
Congratulations, you now have a separate file (or “library”) for your components, which you can utilize as a design system.
By the way, you can now delete the “Symbols/Components” page from your imported file (right-click > Delete page), since it’s no longer needed:
Unfortunately, Sketch styles won’t become Figma styles, so you’ll need to recreate and reapply them. Don’t worry, though, because this is easier than it sounds.
Start by selecting a layer that has the property-value you’d like to turn into a style (if you didn’t know already, there are four different types of Figma styles — color styles, text styles, effect styles, and grid styles). Next, click on the Style icon (the one with the four dots) in the Design panel (in the right sidebar), and then click on the New variable icon (the plus icon):
After that, give the style a name before clicking on the Create style button:
Now navigate to Main menu > Edit > Select all with from the horizontal toolbar, and then choose the relevant option to select all identical layers:
Finally, click on the four-dot Style icon again before selecting the style you just created:
Now, every layer that uses that property value will have that style applied to it.
Rinse and repeat this process for any other property values that you’d like to turn into styles.
Unfortunately, Sketch Color Variables won’t become Figma variables, either. This is mostly because Sketch only supports Color Variables whereas Figma allows designers to store all kinds of property values as variables, which makes Figma variables better equipped to be used as design system tokens.
The workaround is simple though (similar to that of Figma styles) — create a variable, use the Select all with trick mentioned above to select all layers that require that variable, then apply the variable to all of those layers. Rinse and repeat as needed.
Unfortunately, Sketch Grids won’t become Figma grids. However, Figma supports saving grids as grid styles so that you can reuse them over and over again, so it’s worth setting up grids in Figma from scratch anyway and utilizing them in the same way that you’d use other styles.
Also, it’s worth noting that Figma grids can be applied to both top-level frames and nested frames, whereas in Sketch they can only be applied to top-level frames (Artboards).
If you prefer to use Figma web rather than Figma desktop and your design is using locally installed fonts, then you’ll run into the missing fonts issue. This is because Figma web doesn’t support local fonts out of the box like Figma desktop does. To fix this, download and install the relevant Figma font installer for your operating system.
Do this before opening your Sketch file in Figma.
If you’re using Figma desktop or your design is only using Google Web Fonts, then you have nothing to worry about. However, it doesn’t hurt to download and install the Figma font installer anyway (for future projects).
Unfortunately, you’ll lose your Sketch constraints (they won’t become Figma constraints) and Sketch Smart Layouts (they won’t become Figma auto layouts). This means that you won’t be able to resize certain things without breaking the design until you’ve implemented constraints and auto layouts. That being said, you can probably get away with implementing them over time.
You’ll also lose your Sketch interactions, but again, you can probably recreate these in Figma over time.
Yes, importing Sketch designs into Figma is pretty easy once you know how to do it, and it works well enough, too. In a world with endless amounts of digital tools that rarely work well together, the Sketch-to-Figma workflow isn’t bad, actually.
And Figma — if you’re listening — let us import our Color Variables, Smart Layouts, constraints, Grids, and interactions!
Thanks for reading, and as usual if you have any questions drop them into the comment section below!
LogRocket lets you replay users' product experiences to visualize struggle, see issues affecting adoption, and combine qualitative and quantitative data so you can create amazing digital experiences.
See how design choices, interactions, and issues affect your users — get a demo of LogRocket today.
Subscription pages are meant for users and businesses, and they should work well for both parties. This blog is a thorough discussion of what’s best and what’s not when it comes to designing subscription pages.
Call it what it is. Product designers and UX designers have unique roles, even if their titles often get swapped. In this blog, know the difference and own your expertise.
Search bars are more than icons and inputs — they can be a retention magnet or a churn trigger. Sharing my tried-and-tested search bar design principles in this blog!
Are your colors clashing or cohesive? In this blog, I talk about clashing colors, their impact, and how you strike the perfect balance with colors in your designs.
Learn more →
