Switching from Sketch to Figma
Onboarding for Sketch-users that covers all the major features
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
First of all, it’s quite obvious that Figma is a lot like Sketch in many ways. Layer and properties panels are in the same places, many shortcuts are the same as well. Sketch set a uniquely high bar for the entire market, and it would be foolish for Figma to come up with something radically new, given how quickly users get used to everything good.
Grids and layouts
One of the first things you do is set up a baseline grid and a layout. In Sketch, you can only set those up for Artboards. Figma lets you set up a specific grid and a layout for each of your Artboards and Symbols (In Figma, Artboards are called Frames, and Symbols are Components). These settings are accessible directly from the right sidebar. Moreover, multiple grids or layouts can be set for the same Frame or Component. You can turn them on or off anytime. You can also copy one or all of them from one Frame and paste to another. Same works for Components. Sounds cool, right?
Frames and Constraints
Speaking of Frames. Unlike Artboards in Sketch, Frames in Figma are more like a special kind of group. Grids, layouts, and constraints can be applied to Frames. And what is really awesome, Frames can be nested as deeply as you want, with their own 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
Symbols are one of the core features that was introduced by Sketch. They give an ability to quickly change stances of different objects like buttons for e.g. using overrides panel. Figma came up with a similar solution called Components. We find it more intuitive and customizable. It’s a complex feature, so let’s take a close look at it.
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
One of the greatest things that Figma lets you do with it is the ability to customize your components inline without using Overrides panel. Actually, there is no such panel at all. You can override instances right on the canvas, just like you edit any other grouped object. Text, font formatting, colors, appearance, etc. — anything except for the size and position of elements.
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
In order to save override text after swapping instances, layer names must match in master components. E.g. you have two button types, “Blue” and “Red” for instance. Each of them has a label text, and its layer is named “Label”. Then you create an instance of button “Blue”, override the text “Label” to “Submit”. And when you replace button “Blue” with “Red” the text will remain “Submit”.
How to manage and organize all components
You can do it by accessing the Components Tab at the layer panel. You’ll see the list of all components in your file from which you can drag-and-drop a desirable component into your project. This works fine if you don’t have too many components. For big projects, it may start getting out of hand.
In order to keep all them in peace and order, we are following these recommendations:
№1. Name components properly
Just like in Sketch, you can establish a hierarchy by simply using slashes. It’s a simple trick, but it’s crucial for proper project organization.
№2. Organize in frames
If you place one or more components on a specific frame, they will be grouped by its name on the component tab as well. Imagine you’ve created several button components. Just place them onto a frame called “Buttons” and you are good to go: inside the Components tab, they will appear under “Buttons” group.
№3. Place on specific pages
If you are used to the way Sketch stores its symbols on a separate page, you can do the same in Figma. In order to do that do not cut your components from their current place rather move them to the desirable page by right-clicking on them and selecting “Move to Page” from the menu. If you simply cut and paste a master component, its “children” will lose the link to it and will no longer be affected by the changes of master component. You can add one more layer of hierarchy in your project by creating different pages with their own components. E.g. you can create pages “Dark background” and “Light background”, and place specific components inside of each page. You’ll see that inside the component tab all the components are now separated not only by the frames but also by the pages as well.
Text styles and typography
You are probably familiar with Shared text styles in Sketch. Well, Figma doesn’t have such a feature. Yet there’s an effective workaround — just create components from text layers.
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.
This method comes with several tricks so let’s go through it step by step.
Important note: line-height value
By default, line height is set in percentages in Figma, not in pixels or points. If you want to use pixels, just type “px” after the number. Figma will remember your preference and will switch to pixels.
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.
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.
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.
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
The biggest disadvantage of Figma is lack of plugins. Well, it used to be. Recently Figma announced their Figma Platform which in a short time will not only solve this problem but also do more. Since it is a web application, all information is in the cloud and always accessible, which gives certain opportunities to the developers and designers. Already, there are solutions that allow updating a web application based on changes made to the linked Figma file. You can read more about the Platform in the official Figma blog.
Extras
There are a few other Figma features that are worth stopping by.
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 my opinion, Figma is a more holistic and profound solution than Sketch. Its logic and patterns give me great opportunities to make my workflow more fluid and natural. Everything comes in one package, saving us money and effort, and also helps maintain communication inside the team and with clients.
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?
Feel free to write a message to us to discuss the topics mentioned in this article or any other related subject.
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.
