A Designer’s Guide: Migrating Sketch to Figma — The Setup
We all know that migrating to another country takes a lot of planning, time and effort. Well, migrating a design system is no different. But not to worry, in this guide, I will be walking through the steps that helped me make this task a little less intimidating.
Quick links to the 3-part guide
- Part 1: The Setup — Reasons for migration, devise your plan of attack and start setting up!
- Part 2: Components Rebuild
- Part 3: Finishing touches — publish and onboard everyone onto Figma.
Before embarking on this journey, ask yourself — is it worth the effort? What are the pros and cons for shifting from Sketch to Figma generally and specific to the organization?
Some benefits to using Figma are:
- Real-time multiuser collaboration — Easy to share within design teams and across development, product and business teams
- Streamlining your design processes — Figma is an all-in-one tool for brainstorming, wireframing, visual design, prototype, developer handoff, managing design systems
Organization specific considerations include:
- How big is your design team? Do you have multiple design teams within the organization? If so, this will take a lot more planning and execution for a smooth transition — do the efforts justify the benefits?
- How big is your design system? A larger and more mature design system will likely take more time and effort to migrate.
- How many seats are you planning to get? Consider doing a cost comparison and have a cost benefit analysis to back up your decision for this switch when persuading higher management and/or finance.
Some resources to read before making a decision:
- Sketch to Figma by Josh Dunsterville
- Moving From Sketch To Figma: A Case Study Of Migrating Design Systems by Buzz Usborne
- Design Tooling at Scale by Adam Noffsinger
- Our first 6 months with Figma by Patricia Pérez
Ready to make that switch or want to know what the migration entails before going to the big bosses?
Let me first share with you my experience.
Just like how migrating overseas will look very different for individuals, a design system migration from Sketch to Figma will look different in organizations. Depending on the size of your existing design system, the number of design systems used across the organization, the experience in building responsive and scalable components in Figma, and the key available resources in the current organizational structure, the timeline for the entire migration will vary.
Why did ViSenze design team make the move from Sketch to Figma?
1. No single source of truth
Our design “stack” (if you will), was Axure for prototyping, Sketch for visual design that will be pushed into Zeplin for handover to developers. Sometimes, not all the tools had been updated to the latest design, causing confusion at times on whether to follow what’s shown in Axure or Zeplin when toggling between the two. This caused some inefficiencies in the development process.
2. Lack of real-time collaboration
Within the design team, the plan we were on for Sketch only allowed one user at a time so we would always have to check with one another if others were using the Sketch file before designing. If someone was using Sketch, other designers had to do other tasks instead.
3. Expiring license
The licenses for our design tools were due, so we decided to take this perfect opportunity to make the switch!
It was the right move for the ViSenze design team to shift from Sketch to Figma as it streamlined the handover process and Figma could support multiple users in real-time and allowed more complex interactions coupled with UI screens on one source of truth. Thus, the decision to migrate to Figma was made.
I was then tasked to lead the design system migration. Having never done this before, I searched the “interwebs” for guides and tried to gather as much information as I could to draft out my plan of attack. Initially, I had gauged that it would take about 1 month to fully migrate our design system from Sketch to Figma. However, factors such as having a very small design team and thus limited resources, having a very extensive existing design system (over 25 component types with up to 48 states each), and having to juggle the migration with other ongoing projects resulted in a total timeframe of 2–3 months.
Drawing from my migration experience and all the research that I’ve consumed, here’s my refined plan of attack that will hopefully save you time from navigating through the many haphazard bits and pieces of information all over the internet when trying to migrate your design system.
Plan of attack
- Import and set up color and font styles (covered in this part)
- Re-building components — yes, unfortunately, Figma does not “inherit” all the functions nicely from Sketch. It will be easier to simply build components (besides icons) from scratch to ensure responsiveness and scalability of usage across designs. (covered in part 2)(link)
- Publish and onboard designers, developers and product managers (covered in part 3)(link)
Now that you’ve an overview of how the migration will look like, let’s get started! Firstly, signup for Figma if you haven’t already. Create a team and select a plan to upgrade.
Import from Sketch
Your first order of business is very simple, import your design library sketch file into Figma.
Note: Figma will treat sketch files as documented here, while Team Libraries (paid plans currently) are similar to Sketch Libraries.
Set up “Styles”
Start creating color styles:
Start creating text styles:
Once done, click on the background and you will be able to view the color and text styles on the right panel.
A quick trick that I do to make things easier for searching (especially because of the many color styles we have in our design system) is to include the #hex color code and other usage information in the description.
Now you can start connecting styles to your components. You can do so manually by using Figma’s selection colors or by using a styles plugin.
And just like that, you’re all set up! In A Designer’s Guide: Migrating Sketch to Figma (Part 2), we will dive into the juicy bits of re-building components, so stay tuned!
