Move from Sketch to Figma in 5 minutes*

*It may actually take you longer than 5 minutes if you don’t meet the prerequisites.

Prerequisites

1. You have Stakeholder buy in (if not, Luis’ article on this is a fantastic primer on the wider process)
2. You have a Professional or Enterprise Figma account (this makes the process of sharing a library* possible)
3. You have an existing design system or a set of design files you need to migrate

*In Figma, a library is simply a regular Figma file with colours, text styles, effect styles, or components that you want to access inside your other files. It doesn’t have any specific properties that make it a library other than the fact you’re sharing it with your other files.

You can have as many Figma library files as you want, so if you have a preference to split out your design system or component library into many files, you can do this and just share them all. Libraries are crazy powerful, but that’s for another day!

This article speaks about the migration from the perspective of a design system but is applicable to regular sketch files too.

Preparation

Set up and naming

First thing’s first, you’ll want to think carefully about your approach to migration. Not all Sketch files are created equal and not all team’s name their files in the same way, so this article will assume that you have already aligned your Artboard naming to have some form of consistency.

Ideally you’ll want to rename all your Artboards to follow the / naming convention such as Hero/Title/Bold/ etc. This allows Figma to nest your styles into folders, making it much easier to navigate.

You’ll then want to download the Batch››styler plugin on your Figma account. Shamelessly, this is my own plugin, but it’s the reason I built it out. Batch››styler is an interface-less plugin that takes whatever’s in your current selection and parses through it to create local styles. This is exactly what we want to replicate your published Sketch Design System.

Finally, you’ll want to ensure your Sketch Design System file is saved locally (if you’re using Sketch Workspace) so that we can easily import it to Figma in the next step.

Importing

(Est. Time — 1–2 minutes)

In Figma, importing is easy. Generally, I navigate to the File Browser (The section with “Recents” in the title) with CMD + 1 and choose the Import icon (an arrow jumping into a box). Currently this sits in the top right, or, can be accessed from the Plus icon that appears next to any project folder (including Drafts).

You can then navigate to where you saved your Sketch library and either double click or select and choose Open. Once done, this will start the import process.

Alternatively you can simply drag and drop the file and Figma will automatically import it to your Drafts.

On successful import (depending on the file size, the time for this varies but our large library took around a minute) you’ll see a success state for the import dialogue box and have a new Figma file in your Recents list in the top left position. You can import as many files at a time as you like (this is important for later if you want to migrate all your current Sketch project files) by simply highlighting them all and hitting open.

Renaming

(Adds around — 1–3 minutes)

You may need to rename your files if in the earlier setup step, you didn’t utilise the / naming convention. If so, Figma is now your best friend. Highlight all the layers that need renaming, hit CMD (CTRL) + R and then type out a relevant name sequence setup to reflect what works for you. There’s even handy regex shortcuts to insert ascending/descending numbers and the current file’s name where necessary. If you want to get more complex, you can, and Figma’s Anthony DiSpezio has some super handy shortcuts for you.

Creating styles

(Est. Time — 1 minute)

Now that you have a shiny new Figma file that reflects your Sketch Design System, you can work on creating the Figma equivalent. Here’s where it can get super fast.

If all your elements sit on Artboards currently, hit CMD (CTRL) + A and then press Enter/Return on your keyboard. You’ll see all your child layers highlighted and ready to go.

Then, with all of this highlighted, type CMD (CTRL) + / (n.b. on some keyboards, you need to choose CMD (CTRL) + P) to open the menu and open Batch››styler (or right click and find the plugin from there).

Once you do, the plugin will run instantly and parse through all of your selected layers. If any layers follow the default Layer.type prefix, such as Frame 1 or Artboard 1, Batch››styler will ignore the style, slap you on the wrist, tell you to open the default Figma renaming feature and close instantly.

But that’s because you’re a naughty designer and it will now take a little longer than 5 minutes…

Viewing your styles

Once you’ve had a successful application of the styles, you’ll see them instantly in the right hand panel (or in the Text, Fills, Effects menus respectively). If you nested your files well you’ll see a nice set of parent folders.

And on expansion you’ll see all the child folders nicely nested inside like you’d expect. And all that without having to do anything but run a single plugin from the menu. Magic.

If your Design System is split across multiple pages, you’ll need to highlight these elements and run it separately. This is deliberate, because not everything in the file will want to be a style (for example, you may have pages with lots of annotation and descriptions which aren’t intended to be turned into styles).

Publishing

(Est. Time — 2 minutes)

Now all that’s left is to publish your shiny new Design System so you and your team can use it. It’s as simple as selecting the Assets menu item from the left hand Layers/Assets panel, selecting the Library (Book) icon, then pressing the glowing (not glowing) Publish button. Now in any of your other Figma files you can enable this Library (or for every file, over in the account settings) and enjoy your newfound Sketch-free life.

Conclusion

I’ve tested this myself with optimum conditions, from saving through to using and it is genuinely possible to do in around 5 minutes. Your mileage may vary of course, but it’s not as hard as you might think to make the switch.

Take the risk and let me know what you think in the comments below. Maybe even crack out the stop watch and jot your time down there too!