A Designer’s Guide: Migrating Sketch to Figma — Components Rebuild
Welcome back to the guide where I walk through tips and tricks of migrating a design system from Sketch to Figma. Now that the styles are set up (link-part 1), we will be going through the nitty gritty of re-building components.
Quick links to the 3-part guide
Why do we need to re-build components? Simple components like icons are able to import just fine from Sketch to Figma. However, for complex components with nested conditions and properties will often break during the migration. Hence, my advice —it’s tedious but re-building components would be necessary, whether from scratch or going in for edits. Trust me, it’ll be worth it.
Before diving in, this is a great opportunity to review your design library. Some components could be outdated, rarely used, or need revision. I would recommend doing a stock take on all the components in your design library. Prioritize frequently used components and split them into groups (e.g. “must-haves”, “should-haves”, “good-to-haves”). By splitting them up, not only will it be easier to split the workload, it will also feel less daunting and more manageable to tackle.
Reviewing documentation on the existing design library will also be helpful in knowing the specifications of each component. I cross-checked and worked closely with developers to ensure that the design documentation matched the technical documentation. This is crucial to reduce any double work in the future.
What I did when re-building components was to hold regular meetings with the design team to teach and run through how to use the respective components. I also encouraged the team to use re-built components as often as they could for their projects (while I was re-building other components) in order to get feedback on any bugs or additional use cases the team might need for these components. Eventually, this process led to multi-functional components that could be easily used by designers for their respective needs.
Getting the basics down
Now, let’s look at the actual re-building of components, shall we? When building components in Figma, there are 3 fundamentals that I found myself referencing a lot — variants, frames and constraints, auto-layout.
The magic of variants
Have 28 button states and want to make life easier? With the magic of variants, you can. The feature “Variants” in Figma combines different states of a component and allows easy toggling between different states.
Each “Variant” is made up of different properties. Figma currently supports boolean values — true or false (e.g. with icon vs. without icon) which appears in a toggle on/off format. For the property “Hierarchy”, we can see that the value for this particular button is “Primary”. By clicking on the dropdown, you can toggle between other states such as “Secondary”, “Basic”, “Basic with outline”. These can be customized and organized according to how your component is designed and how many different states it has.
Here’s what’s behind the scenes for that single normal sized button component:
Yes, looks can be deceiving. But with a good setup, designers’ lives will be much easier in the long run. Figma has a great guide and video tutorial on how to create variants and I would recommend watching the amazing tutorials by Alberto Orsini, Max McKinney and Angela Delise as well. I recommend following along the tutorials and start building a button as it’s a simple starting point that helps you get familiarized with “Variants” in Figma. Once you’ve got the basic knowledge down and are comfortable, you can start “free-styling” and create components on your own!
Another tip would be to first create a base component with “.base/” at the front of the component name. Then, duplicate the base component and you’ll have an instance of the base component. Make it into a component (shorthand: [command][option][k]) and start creating variants from there. Why all this hassle you may ask? Well, if further down the road the button design changes, you can simply change the specifications of the base component and all the variants will change accordingly.
Note: These base components will not be published as “.” or “_” at the start of the component name essentially hides the component. It’s like an all-powerful component only you can see!
One component fits all rule
Good components all abide by a rule — they are responsive. What this means is when using a component from the design library, you will want to be able to manipulate the width or height or both without having to worry about the padding of the text, icon etc. within the component.
We can do this by using the concepts of frames and constraints in Figma.
An important concept to grasp when building components in Figma is that instead of using shapes like rectangles as backgrounds, use frames. Think of a frame as a container or div (or a house) where your text, icons, etc. live.
Now, here comes the concept of constraints. What you want to do is within a frame, set the constraints on individual elements — kinda like assigning them rooms in a house.
And voilà, you now have responsive components that can fit many use cases — you’re welcome.
What in the auto-layout
Can we just take a moment to appreciate the beauty of the auto-layout feature in Figma? This sounds a little dramatic but trust me, it’s well deserved. Here’s why. The auto layout feature in Figma allows you to create building blocks where you can then easily form unique components that you need. It mimics CSS flexbox which allows you to easily create components like a button. I will recommend watching these 2 fantastic video tutorials on how to use auto-layout by Jesse Showalter and Mizko.
And here’s some things I’ve created for the design system using auto-layout:
As auto-layout fans say — click [Shift A]* and call it a day.
*[Shift A] is the shorthand for auto-layout
Cheatsheet of components
Feeling overwhelmed? Here’s a cheatsheet I created for various components.
- Buttons — Tutorial by Mizko
- Text Field — Tutorial by Roy
- Dropdown, Slider, Side Navigation — Templates by me, Vivian Ngiam
Congrats on making it this far, we are close to the finish line, there’s still that cherry on top of the cake! Look forward to A Designer’s Guide: Migrating Sketch to Figma (Part 3), where I will be covering the finishing touches of publishing the design system and onboarding designers, developers and product managers! *Chef’s Kiss*
