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.

Colors Before Prep
Colors after Prep

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:

Typography Artboard Before Prep

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

Typography Artboard After Prep

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.

Color Circle Layers named properly
Text layers named properly

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.

Step 2: Import Sketch file to Figma

Step 2.5: Say Goodbye Sketch File.
This should help

Step 3: Install Plugins

You need to install these plugins:

i) Chroma Colors

ii) Text Styles Generator

iii) Roller: Design Linter

iv) Find and Replace (Optional)

Step 4: Use Plugins

Do verify that all the colors and text layers are named properly before doing this.

Chroma Colors: Select the color layers and select chroma colors from plugins list to generate your color styles.

Selecting Color Layers

Text Styles Generator: Select all text layers and click on Text Styles Generator

Selecting Text Layers

Roller: Design Linter : Use Roller to apply color and text styles to existing components. It will also help find inconsistencies within the design.

View of Roller Showing No Color or Text Inconsistencies

Step 5: Cleaning Up

You can use Find and Replace to bulk rename layers if you want to reorganize layers.

Bonus Step 6: Auto Layout

Figma has auto layout which might make a lot of components redundant. E.g Buttons with icon and without icon can be created using a single component.

Moreover, you might need to rebuild some of the basic components in Figma to use power of dynamic sizes and overrides in Figma.

Before Auto Layout
After Auto Layout

View Resulting KFH Design System Figma File

Tutorials:
Button Tutorial using Auto Layout

Figma Auto Layout Tutorial
Comprehensive Auto Layout Tutorial

Audio utilized while doing this
Instrumental Music:
Nature of Daylight by Max Ritcher
NADAYANA — Pantam
Hang Massive — The Secret Kissing of the Sun and Moon
Yatao | Phoenix | Handpan&Didge
Explosion in the Sky — Remember Me as a Time of Day

Lectures:
25 — Walking With God — Noah And The Flood
26 — The Phenomenology Of The Divine

Ahmed is a product designer who is practicing designing digital products to be useable, profitable and technically feasible. Linkedin

--

--

--

Crafting fruitful experiences of brands and interfaces for the world.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Teacher to UX designer: A roadmap

A road weaving through open land.

Facing a design sprint for the first time

UX Case Study: NSW Department of Education

No Longer Just For The Gamers — A Case Study On Discord

BA Thesis Concept Seminar 2021

UI/UX Case Study: Integration of Jago Bank and Bibit as Mutual Fund Application

How to Find Device Metrics for Any Screen

Friends of Antenna: A conversation with JP Holecka

JP with a celebratory drink at a launch party

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
Ahmed Hassan (Simaar)

Ahmed Hassan (Simaar)

Crafting fruitful experiences of brands and interfaces for the world.

More from Medium

Mobile Design -Wireframes & Mockups

Figma | Made with Gatsby JS

Figma | Made with Gatsby JS

Building Trustworthiness in App Design

UI Renovations Part 5: Closet Core Patterns