A Designer’s Guide: Migrating Sketch to Figma — Finishing Touches
I see the light at the end of the tunnel and I hope you do too! Having set up the design system styles (link-part1) and re-built components (link-part2), it is finally time to tie everything up together with a pretty little bow — the finishing touches.
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.
Publish your masterpiece
In Figma, you can publish styles and components from any file. Here’s how you can publish your design library file so that any file can access the design library components:
In all sense of the word, this design library file is the “Master”. If you change anything in the master file, a notification will pop up on your other files to ask if you would like to implement this update. You can choose to not update the new changes as well. It will be crucial to safeguard this file and only allow appointed people to change the master file.
Onboarding… Everyone
Designers
To onboard my fellow designers, I first did a quick tutorial on how to connect and use the design library file:
- To connect the design library, click the book icon and turn on the toggle for the design library file:
2. To use components, click on “Assets” in the left panel and under the design library file, drag in any of the components and start using:
Additionally, I included some documentation on how to use certain components:
3. Checkbox and radio button
During the onboarding meeting I held for the design team, I also went through the instructions included within the components themselves. Here’s an example:
Developers
To onboard developers — here are some tips and tricks that can ensure a smooth handover of design in Figma:
- Developer handoff video by Figma
- Guide to developer handoff by Figma
- Everything developers need to know about Figma by Smashingmagazine
Product Managers
Since a Figma paid team plan charges by the number of seats, product managers will likely not have paid accounts. Two main things I think should be communicated to onboard PMs onto Figma (which are accessible on free accounts) are the comment feature and pressing the play button (top right corner) to start a prototype.
Did you know: You can actually share a link to a specific frame within a file in Figma. Very useful when you want to get feedback on that particular frame!
Although this guide focuses on the migrating of the design system, migrating from Sketch to Figma also entails other administrative aspects such as housekeeping of folders and version control.
Here are some helpful resources that I found:
- One year with Figma by Paul Hanaoka from Liferay
- How to keep your Figma files organized for your design team by Rich
- Marie Kondoing for UX Designers: Figma files by Raquel Piqueras
In a nutshell
- Get your plan of attack ready (part1) and set up your color and font styles after importing the Sketch file.
- Rebuilding components (part 2) is not an easy feat and the best practice is to review your design library and do a stock take before starting on the rebuilding process.
- Understanding how to use “Variants”, “Frames”, “Constraints”, and “Auto-layout” in Figma is crucial to making responsive and scalable components (part 2).
- Once it’s ready for publishing, remember to onboard the different stakeholders. Document as much as possible on how to use the different components in the library and include instructions within components whenever you can. Hold regular meetings with the design team to facilitate an effective feedback look system. The “Comment” feature in Figma is also very helpful for feedback.
With that, this brings my 3-part guide to a close. Hope this has been useful for your migration journey. Cue my closing remarks —
Take it slow, one step at a time, one component at a time, it’s totally worth the climb, yay design? Thanks for reading my random rhyme.
