Shifting a Design System from Sketch to Figma

Disclaimer: This post is published on 13 Jan 2021 and is based on my recent Figma experience. I have been working with Sketch for over 4 years earlier. Please refer to the latest content as Figma might start supporting some of the things it doesn’t support right now. Feel free to comment any suggestions you have to improve this workflow.

Quick Backstory [Skippable]

Around a year ago, I started building a design system for KFH Bank Bahrain. I worked at IDEATE Innovations as a Senior UI/UX Designer and KFH was our client. Earlier the process was Adobe XD+PDF sharing on email. I introduced a combination of Sketch, Abstract and Invision to the IDEATE team which I learnt and practiced at KeepTruckin.

This worked quite well and we were able to produce ~375+ screens ( ~800+ counting two major round of iterations and other smaller ones) in record time as compared to previous process.

I recently shifted to Figma ~4 months ago and this post is meant to list the process of converting that Design System over to Figma. I searched the internet at the time but couldn’t find a simple tutorial which could list a quick way of doing it.

Preparation

Following is the list of steps you need to do for your sketch file

Step 1: Prepare a list of color and text styles

It doesn’t have to be visually perfect or spectacular. 2,3 Artboards containing a list of colors and type scale you have in your design system should do the trick. You must have an element corresponding to every color and text style you have in your system.

If you aren’t using color variables already and have colors assigned to text styles then only one text style is needed. You also don’t need to create separate justified text styles.

Keep text styles in a one color and in a standard format.

Since Color variables were introduced later, I created every text color and text justification as a separate text style in Sketch:

You still need to have separate text for underlined text if you want to keep it separate.

You must name the layers of colors and as per your style.

This will help in generating color and text variables automatically in Figma. If you prefer, you can do this exercise in Figma as well.

Same goes for Layer Styles as well.

This doesn’t need to be done for symbols if you’re using a proper naming strategy e.g Atomic Design etc. Figma automatically creates the hierarchy based on Symbol names just like Sketch.