Switching from Sketch to Figma

Onboarding for Sketch-users that covers all the major features

Vladislav Orlov
May 14, 2018 · 10 min read

by Elena Galitsky and Vladislav Orlov

For a long time Sketch has been the most popular and beloved design tool. It shows good performance and usability. After all, it was created specifically for interface and web designers, unlike Photoshop, which has lots of atavisms from the photo editing era.

When Figma came out, it was widely considered as a free alternative to Sketch. It also supported both Windows and MacOS and allowed for real-time collaboration due to its web-based nature.

Since then Figma has evolved a lot, and many of its great features reveal only after in-depth exploration.

At Bachoo Design Studio love new things. I’ve tried to use Figma as the main tool for one of our projects and implement it in our workflow 8 months ago. All other designers in our studio were using Sketch at that time. Now, around half of our designers use Figma as their main design tool.

In this article, I would like to give a helpful on-boarding for those who are new to Figma, but familiar with Sketch, as well as show some handy tips and tricks.

By the way, this article is about 9 minutes read, so get comfy and grab yourself your favorite beverage.

Introduction

Grids and layouts

In Figma, it’s easy to control layout settings without struggling with a calculator all the time.

Frames and Constraints

As per Constraints. In Sketch, an object can be pinned to the sides of its container. In Figma Constraints work similar to Sketch. But Frames stick to the edges of the columns and are scaled together with them, keeping the grid and indents. By using Frames and Constraints you can establish very fine-tuned layouts with complex responsive behavior.

Components are the new Symbols

In Sketch when you create a Symbol its “master” is automatically pushed to the specific page called “Symbols”. In order to edit symbols, you have to navigate to this page where are all symbols are stored by double-clicking symbol or just opening this page. In Figma when you create a new component, it stays in its current place. Such component goes by the name of Master Component. When you duplicate it, you create a single instance of it. Changing the Master Component will change all its instances. It’s a familiar mechanic, but it comes with several unique features.

How to override instances

Example of nested components.

You also can replace components and even nested components by selecting one of them and choosing a substitute from the Instances menu at the right panel.

Important note: saving override text

How to manage and organize all components

In order to keep all them in peace and order, we are following these recommendations:

№1. Name components properly

Figma also will try to guess related components by their size even if they are nested differently.

№2. Organize in frames

Inside the components tab, all the components have their own preview.

№3. Place on specific pages

Text styles and typography

UPD. Yesterday Figma has announced Figma 3.0 — a big updated that comes with many new crucial features and one of them is Styles. That means that this part of the article is not one hundred percent accurate. But this flow is still useful and can be a lifesaver in certain situations. So I would recommend you to combine both Styles and method that is described below. So let’s go on.

Using hierarchy, you will be able to establish a system of styles even for a very complex project.

Create text components using a hierarchy.

This method comes with several tricks so let’s go through it step by step.

Important note: line-height value

First, create regular text layers with all your basic text styles. Turn each of them into a component. Now the tricky part.

As was mentioned earlier, in order for components to keep their override values, they need to have the same name. So you need to rename all your text layers inside of your components so that they share the same name. It can be “Label” or “Text” or whatever name you prefer.

Now you need to specify text resizing and constraints. Select a text layer inside a master component and then open the Advanced Type window by clicking on the three dots at the right of the text settings panel. Lastly, set Auto Resize settings to Height.

Example of the text styles sheet created using components.

Now let me explain why you should do all of this. When Auto Resize is set to Height, all the text that does not fit in your component box will be moved on the next line. So when you use instances of your component and you will override the text, maximum width of your text will be the same as the width of your component. This thing will work as a normal text container or as a Fixed text option in Sketch.

The first component Auto Resize setting is set to Height, the second — Width.

So now we know how to adjust text width according to its component width. But how do you manage a component’s height? It doesn’t matter if you have a single-line text, like a button label. But when you have a multiline text, you will need to multiply the number of lines by the line height, which is frankly not convenient at all.

Here is a simple trick that will help you set your text component instance height as a multiple of the text line height.

Add a layout grid in our text component, set it to Rows, Count to Auto, and Type to Top. Both height and gutter should be equal to the text line-height.

Then in any instance, you can turn on this layout grid and it will help you define the height of the component. This will also help you manage the vertical rhythm.

Using rows for your text will not only help you to scale text components properly but will also help you with managing your vertical rhythm.

These manipulations seem to be quite inconvenient compared to simple text styles in Sketch, right? But, with them comes some extra freedom.

You see, you cannot change the style of a text inside an instance of a Symbol in Sketch. In Figma, you can.

How about plugins

Extras

Design tools become more sophisticated each day, refining their prototyping, collaborative and handoff features. Integration between different services and tools gives designers more possibilities to enhance their workflow. Figma has several solutions that cover each of these topics.

Sketch Cloud doesn’t seem to be widely adopted for prototyping or handoff. Most designers use Invision, Zepplin or Marvel to prototype, showcase and share the work with clients and colleagues. With Figma you don’t need those services, everything comes in one package. You can present your design, create an interactive prototype, give read-only access to other team members, let them add comments, and everything will be always up to date with no need to sync every time.

Conclusion

In some points, it will be more difficult, especially for beginners, but in the course of time, you get used to working in it even more than in the Sketch. You just need to sort it out a little.

Got a question?

Báchoo Design Studio creates engaging and functional websites, applications and digital brands. We are open for new ambitious projects. Follow us on Dribbble or Behance.

Bachoo Design Studio

We build websites, applications and digital brands.