May 11, 2020
10 min

Switching from Sketch to Figma

Sketch has been our go to designing software for years. We use it for everything, from websites to logos and even to plan the layout of our office. We used it in combination with Abstract to make sure the team always has the most up to date designs, add versioning and keep track of the changes and feedback. A few weeks ago it was time to renew our licence for Sketch so we decided to give Figma a try after hearing some raving reviews from our friends at Supernotes.

A few weeks later, we put together some thoughts, findings and comparisons between Sketch and Figma. And in the end, let's see which one we ended up sticking to.

The basics

NB the article is reviewing Sketch version 56.3, more features might have come out since then.

Artboards vs Frames

Like anything else, when starting to use a new tool, it take a little while to get used to a different way of doing things, even if ever so similar. One of the first main differences I found between the two, is the way in which you construct and arrange items on the page.

Sketch uses artboards which define the area you are using. These are purely used as your 'piece of paper' and although you can customise the size or use a preset, there is not much to it. Frames on the other hand, used by Figma, are much more versatile. You can use a frame as a simple artboard, or you can have frames within frames. A symbol is a frame in itself and they can be content restrictive or items can be visible even outside the frame 🤯.

As a Sketch user, the concept of a frame having multiple forms and purposes was confusing at first, but once you get your head around it, it can be a very versatile tool. How many times did you create a webpage design and wish you could drag it into another artboard to annotate it? Now you can 🤩 +1 for Figma

Symbols vs Components

For the avid users of Sketch, you know that you will find all your symbols in the symbol page, obviously. But where do they go in Figma 🤔? Turns out that the master component is exactly there where you created it. Which, even if every component has a 'Go to master component' link, it can be tricky to remember where all the master components live, especially on a big project using a design system.

What I end up doing is creating a separate page called 'Symbols' and copy what I want to convert to a symbol in there before converting. This might be a typical example of old habits die hard and if you found a different way of doing it let me know. +1 for Sketch

Text styles

We all know how text styles work, however there is one major difference between Sketch and Figma. In Figma, the colour and alignment are NOT attached to the text style, leaving yet again a lot more flexibility and avoiding those style duplication of 'paragraph centre' and 'paragraph left'. On the other hand, it might mean less consistency in the design as not all titles have to be purple.  I guess this is where the style description I'll mention later becomes handy. + 🤷🏼

Collaboration

Sketch doesn't currently have a versioning or collaboration tool. In order to keep everyone on the same page we used Abstract, a versioning control tool. For the devs out there, it's similar to Github but for design. However, it does add another subscription to the list of tools needed.

Figma on the other hand, is a browser based software which allows collaboration in real time. You can see what your co-designer is changing, adding or even viewing 👀. Either you love it or you hate it, probably loved by PMs and hated by designers. Nevertheless, this means that collaboration is super simple. Just like (or even better) than a google doc, you can work on the same design file at the same time. You can even see what people are viewing or pointing which makes it handy in calls without screen sharing. +1 for Figma

Into the details

What Sketch does better

Here are a few small details that I noticed are missing from Figma that I always found so useful in Sketch.

Colour picking

Have you ever colour picked a colour from website? Or maybe a document? Just me? In Sketch I used to be able to pick a colour from anything visible on the screen. If you are moving to Figma, say goodbye to that privilege. From now on you can only pick colours within the project you are on. +1 for Sketch

Filling a png

1. Import black png logo 2. add white fill and you have the logo in white. Anyone can relate? Simple. Figma however treats all images as fills to a shape. Therefore if you add an additional fill it will cover the whole shape (usually a rectangle). This is obviously not a problem if you are working with svgs or vector format. +1 for Sketch

Pasting into Keynote

We use Keynote for our presentations and proposals, therefore I often find myself copying items or artboards from Sketch and pasting them into the keynote file. Unfortunately, for some reason this doesn't seem to work with Figma and I have to save every single image I want to import. This is probably not a dealbreaker for anyone, but since I'm listing things I thought I'll add it in. +1 for Sketch

What Figma does better

Auto layout

I've heard this feature might also exists with the newest version of Sketch, which is awesome. With auto layout the component will scale and adapt to its content. Take a tab menu for example, each tab will now scale according to the title and avoid those awkward spacing when using symbols. +1 Figma

Style description

This is a neat little detail that Figma has. For each text and colour style you can add a description to remind everyone (especially myself) what each font and colour variation is used for. +1 Figma

Plugins

Figma has a large variety of plugins that you can add. The one I use the most is possibly Iconify which allows you to search and paste icons from various sources. This saves me a lot of time searching and downloading icons, especially for wireframes and placeholders. +1 Figma

Platform Compatibility

At C&W we all work on Macs, so not much of an issue, however compatibility should probably be addressed. To my knowledge, Sketch is only compatible with Macs (Apple), leaving all those Windows users in the dust. Therefore Figma wins this one by default being compatible with all devices, both as a web app and in browser. +1 Figma

Cost

Here is the big one. They are both good tools, with each their pros and cons. So when it comes to value for money what is the verdict? Sketch has a more traditional model which is based on a licence key. This lasts for a year in which you can upgrade to the newest version of Sketch, once the licence key has expired you are still able to use the software, but not able to upgrade to the latest features, you will have to renew the licence key for that.

On the other hand, Figma has a freemium model. This allows you to create 3 projects for free with the option to upgrade and pay a monthly subscription per user. In my opinion, the free version gives you enough flexibility and features for everyday work and teamwork. I believe Figma is definitely better value for money - can't argue with free. +1 Figma

Conclusion

We are moving to Figma! 🙌🏻 I guess the clue was in the title. The main reasons are the collaboration feature and the overall value for money.

Stay Updated