A Designer’s Guide: Migrating Sketch to Figma — Components Rebuild
By: Vivian Ngiam
Tags: UI Design, Design Systems, UX Design, Sketch, Figma

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.

Our normal sized button that consists of 28 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:

ViSenze variants for normal sized button

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.

I applied a drop shadow on the base component, and all the variants now have a drop shadow!

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.

Notice everything stays in place with the respective padding…

…Responsiveness is achieved!

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.