As you may now, Sketch has a big competitor on the market and I’m not talking about Adobe Xd or InVision Studio. That’s right — Figma. It basically came out of nowhere putting Sketch in a precarious situation. Why? Let me tell you.
Introduction
Before I tell you why we’re slowly switching from Sketch to Figma, you must know that Figma and Sketch are very similar.
I would say that they are like brothers. Most of the shortcuts are the same, layout is almost identical, the overall feeling is just like Sketch, so what is so special about Figma?
Performance
After a few years with Sketch, we all noticed a significant decrease in performance. Few gradients, 30+ artboards, or copied artwork from illustrator and you can’t work properly. This problem started to occur some time ago and systematically returns. Let’s add random shutdowns, errors without save, plugins problems to the list. It really started to get annoying.
With Figma, no problem at all. I thought that with a browser-based design and prototyping tool there were bound to be performance issues. Turns out there is no such thing. In fact, in a lot of ways, it is faster. I don’t see any lag. I can work from any hardware I want. Any browser I want. Also, I have availability to download a desktop app, which is for Mac and Windows and thanks to the latest iPadOS update, I can take my iPad, connect keyboard and mouse and work on it. And in my opinion, it still works better than Sketch.
Collaboration
Initially, I was negative for all kinds of real-time collaboration, because I like to work alone and privacy is my number one priority. Then I tried Figma collaboration with a friend of mine from iteo (Cheers, Kasia) and the conclusion was simple. Holy moly. It’s awesome.
They took the approach of Google Docs or Time Viewer. It allows all the designers to work on the same file at the same time. With availability to peek what your mate is doing. It’s so much better than the Branch system when you have to resolve conflicts. Also, you can download the Figma Chat Plugin and chat with others about the awesome project that you’re working on.
Vector Tool
I don’t know how you’re feeling about it but for me, Sketch Vector Tool sometimes is unbearable. Don’t get me wrong, it works great, but I miss some major options and finally, Figma gave us the option to connect more than two strokes to a node. They made drawing complex shapes and symbols easy-peasy.
Design Systems — Symbols vs. Components
Sketch Design System is good, really good, but let me tell you why I moved to Figma.
Text styles. When I wanted to create text in Sketch, I have to define all the cases of the styles I want which can end up to so long list of text styles.
Let me explain how Sketch styles work: when you define any text or layer style, Sketch saves all the properties in this style and if you do any change to any property then you are overriding the text style. For example, if you want to have a different alignment for the text or different colors — with Sketch, you have to make a text/layer style for every case.
With Figma, you have better control of your “Atomic System”. You just define the text basic options, like weight, size, spacing, line height and that’s all. I don’t have colors in text styles and colors in layer styles like Sketch. In Figma, it is one place of truth and if you change it in one place it will change everywhere. You can save colors, fonts, shadows separately and use any combination you want to define your main style. This is how Atomic Design should work. Got it Sketch?
The last one about components in Figma. In Sketch if you have a symbol you can only modify through the overrides, but you cannot remove elements inside the components. For example, if you have a button with an icon, you have to create 2 symbols, one with an icon and the other without the icon. Figma’s components are a bit different, you can change the overrides but you can also modify the component layers and the properties of the layers.
Unfortunately, our master components won’t create on the extra page like in Sketch where we have a “Symbol” page. So you must be aware of that when you’re creating your component, to copy master onto a new page. Too bad.
Smart Grids
Smart Grids in Sketch? Nah. Too complicated. We had a problem with creating a good grid in Sketch. You changed one value, the other one changed. You corrected it and again another value has changed. Probably Rows is the only Grid in Sketch, that is easy to make and you can’t mess it. But when you created a new artboard, you cannot apply the grid you previously made, you have to create it again or just copy the artboard with the correct grid.
Figma made grids like another element of atomic design. You create grids with few clicks (you can define your column/row width, your margins and how many columns or rows you want), you add your grid to your Design System and you’re ready to go.
The client wanted a change with smaller margins? No problem. You just edit your option in Grid System and all your artworks with applied Grid updates, too. Again, a strong point for Figma.
Place Image
In Figma, you can just place the image into the shape and when I resize, it will act as a mask. Don’t think about it as it’s nothing. It is a huge advantage that saves you time. You don’t have to worry again about resizing your mask and image differently. The image will just fill the shape saving original aspect ratio.
Plugins, plugins and plugins
Yes, yes and yes! Initially, when Figma came, the biggest disadvantage was no support of plugins. Thank God, it changed. Now the library is full of great plugins and thanks to reviews, you can be sure that a plugin won’t mess up your project file. Icons, animations, prototypes, flows and even 3Ds. The variety of plugins it’s just amazing.
Zeplin
A few weeks ago Zeplin redesigned their own plugin with Figma and I must say that it’s great, besides one option but I will tell you more about it later.
As you export frames and components, Zeplin now keeps track of them. After a design iteration, you can export all your changes in one-click using the handy button on the right panel.
Zeplin also will automatically generate an asset for developers in different formats and sizes based on your project type and if a master component is exportable in Figma, Zeplin now generates assets for all of its instances automatically. It has pros and cons. Why?
You don’t have to worry about other components. You just take care of your master. Awesome but… when you have a massive file, with a lot of frames and components and you try to export them all — it will generate every asset exportable. So you end up with 10 000, 15 000 elements to export (sic!). I had that situation many times. And unfortunately, every time Zeplin threw me an error in the middle of this process, I was forced to export frames by parts.
Shortcuts
Figma has plenty of shortcuts and they give us a great option to take a look, what kind of shortcuts you used and you didn’t. Just click that question mark in the bottom right corner and select Keyboard shortcuts. You will find a lot of pages with useful shortcuts. The blue one — you used this shortcut at least once and the white border means that you didn’t discover or used this shortcut. When you use it, simple animation will pop up. That’s what is called a microinteraction.
Other smart things that we love about Figma
- Frames vs. Artboards — a frame is a primary object that you design within. You can have frames within frames, enabling you to set constraints and grids in child frames.
- Sketch Support — you can just drag & drop your Sketch File into the Figma dashboard and you’re good to go.
- Pricing — not sure about Figma? No worries. Just create an account and start designing. Figma is completely free. Yes, Free!
- Prototyping — no need to use Sketch and InVision. Just make your design in Figma and prototype in Figma. It works well, not great but still better than Sketch. Also, you have plenty of options for animating elements inside your frame. It’s like a little Principle.
- Figma Mirror — our worst nightmare was Sketch Mirror, sometimes it worked, sometimes not and based on a Network, not an account, you could see someone’s work instead of yours. Figma came up with a solution. You just sign to your account and it will mirror the actual artboard you’re working on.
- Handoff — developers are curious about your design? No problem. Just add them to your project. They can take a look and in case of a problem/question, they will leave you a comment.
- Comments — at iteo, we have a simple board with Designer Name, Jira link, Project Manager, Mail, etc. We also have a board where the client/developer etc. can leave feedback in the form of a comment which Figma allows to. Simply press C and write it down!
- Smart Layout — Hell yes. Finally, we can make components that adjust by themselves, without worrying if anything is the same, or we didn’t mess something up.
Does Figma have any disadvantages?
A few, but major. The main and biggest is that you can’t work without an internet connection. It will simply won’t load your work. We all sometimes have a situation when our ISP failed, or there are technical repairs. In those cases, you won’t be able to load your project.
The second one. We really miss the Symbol page and sending a master component to that page so you will never lose it in your project. Maybe in the future…
It’s been already almost 3 months with Figma. Great months and I’m amazed how they manage to create such a great tool. I didn’t found that much of problems, they may show up in the future. And if they will, I surely come back with another article.
If you want to work with our team at iteo — contact us. We can create extraordinary software with pixel-perfect design just for you.
