8px Magazine
Published in

8px Magazine

Hero image showing Sketch and Figma logos and that migration takes 5 minutes

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).

Image of Figma UI showing import button

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.

Image of Figma UI showing importing process

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.

Image of Figma UI showing successful import

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.

Image of Figma UI showing Regex renaming

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.

Image of Figma UI showing highlighted layers

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).

Image of Figma UI showing Figma menu and Batch››styler plugin

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.

Image of Figma UI showing collapsed text styles

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.

Image of Figma UI showing expanded text styles

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.

Image of Figma UI showing library publishing process

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!

--

--

--

Life, by designers.

Recommended from Medium

Editorial Design: Climax Magazine for Generation Z

Design the next billion-dollar idea in 10 minutes, for $10.

You Already Have One Valuable Resource for Learning Game Design

Happy Plate — The Kitchen Series

A Game of CRM

Women in Craft: Beatrice Larkin

Making a case for creative briefs — Tenth Crow Creative

7 Free and Easy Game-based Activity Creation Tools for Teachers

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Karl Emil James Koch

Karl Emil James Koch

Product Designer at Moneybox in London, UK. Design Lead at Cosmic. Creator of www.plugins.run. Read more from me at: www.kejk.tech

More from Medium

Is DesignOps for every company or reality? with Dave Malouf | Good Morning UX

Negative Space in Design

2022 is the year of Design Systems

Key UI & UX Trends That Should Be On Your Radar