From Sketch to Figma
Last modified on Wed 05 Jan 2022

Sketch or Figma? They are both great designing tools, and each has fantastic functionalities. Last year our team decided to work in Figma because the export is easier and it doesn’t take so much time.

When you need to switch from Sketch to Figma, Figma provides great import options for Sketch files. You still need to edit your imported document later, but it’s not such a big mess, and it's worth the effort.

First things first

Create a new project inside Infinum Team. If you don’t have the access to the team, contact one of the team leaders to add you. Inside the project, you can add multiple files. We advise you to invite your Project Manager, developers and clients with view-only permission.

In the sharing settings turn on access only to people invited to file, so your file isn’t seen by everyone outside the company. Everyone at Infinum Team will still be able to view your project and files, and that's ok for most of the projects which are not strictly under NDA.

Here we go

Save the latest version of your Sketch file locally from Abstract. Then open up Figma and add a new file to the project. Then go to File → New from Sketch File. After you select that, it will take some time for Figma to upload your file. ⏳

Now, that your file has uploaded, it’s time to do some file organizing and cleaning up. The design system library is the first thing you need to create. If this is confusing, a library is just like a Symbols page in Sketch, only stored in another file which you connected to your working file. Figma uses Components over Symbols that you can use across your design files. When you reuse them, they are called Instances. We differentiate them by their symbols. Also, you access Instances in the Assets panel.

So, how a library works with an imported file? It is necessary to create a library and connect it with an imported file which is now actually only one file. But how to separate that file into a library and a working file with screens?

First, open your imported file and go to Assets → Team Library and then click on Publish. Now click on Move to Team Library and choose your team. The next step is to add a short description if you want, then click on Publish, and there is your project library. ✨

Now that you have published your project library, in the project, go to File → New. You need to create a new working file in which you will copy all your screens from the library (Page by Page) and only leave the Symbols page in the original library file. Here you will find all of your project Components.

But if you want this to work, you must connect your New File with the Library. To do it, go to Assets → Team Library in your new working file and activate the library which you published just minutes ago.

Now, it’s time to copy and paste. In the new working file, create a New Page and start copying your screens (Page by Page). When you copy the first batch of screens, click on your one of the instances (ex symbols). Then right-click and choose Go To Master Component. If you automatically switch to another tab in your library file, you have done everything correctly! And don’t forget to delete your screens from the library file. Leave only the Components page.

What to do next?

Cleaning, cleaning and organizing. Probably you’ve realized that some of your Icons or Text / Color Styles are messy. To clean that, open your library file and do this step by step:

  1. Create Color Styles
  2. Create Text Styles
  3. Apply Color and Text Styles to your Components
  4. Please go through all components and organize them by usage or features
  5. And voilà!

The great thing about your library file is that now it is Components and Style Guide are in one place! Rearrange your components by their usage or features, but separate them by using Frames (Artboards).

Figma is handling Text Styles much easier. You don’t have to create additional styles for text colors or alignment. They can be adjusted right inside the instance so no more duplicating and getting lost in the file.

Tips and tricks

If you haven’t organized your Sketch file neatly, please don’t bother organizing it in Sketch if you will transfer it to Figma. Figma handles some situations differently, so the best thing would be to start from scratch in Figma.

Remember to expand all strokes and icons in the Sketch file. That way they maybe don’t mess up during the import.

Make sure you remove duplicate icons that may have been left from the Sketch file since you can override the icon colors in Figma.

P.S. if your file is large and you have a lot of components, maybe you can add color and text styles next time you work on a specific project task. You will save some time by this process if you won’t be using all of your instances for new design tasks. And don’t forget to write down a note for yourself or your team, so no one forgets to do this later.

Useful plugins