UX Collective

We believe designers are thinkers as much as they are makers. https://linktr.ee/uxc

Follow publication

Things I wish I knew before switching to Figma (from Sketch)

Raffaele Gesulfo
UX Collective
Published in
5 min readAug 9, 2021

Sketch and Figma desktop icons
From Sketch to Figma

When working on a daily basis with tools, you tend to create a bond with them. Not only because you know how things work, what shortcuts to use. But also because their mere presence feels reassuring in this hectic world. Having to change tools while working, is like changing your tires while driving. You can’t slow down, and you can’t feel slowing down.

Having to change tools while working, is like changing your tires while driving. You can’t slow down, and you can’t feel slowing down.

Sketch to the core 🙌

Sketch and Figma are some of the Design tools that truly have led the design industry to what it is today. Sketch being a bit earlier in the party, I discovered with joy this simple, yet powerful app.

From the start, I was a huge fan. I’d spend days exploring ways to improve my workflow by discovering new shortcuts, trying new things, and testing new features as they arrived. What an incredible journey it’s been.

So it’s been a bit challenging to adapt to the reality that maybe there is something even better out there. We hear almost daily about new design tools. And it’s hard to truly know what’s really relevant in this crowded field. But so far, I have convinced myself that nothing really beats Sketch. Or is it?

Figma arrived in my life a few years back, but I was quick to dismiss it for several reasons:

  • A browser-based tool? Seems slow.
  • Real-time collaboration? Seems too distracting and chaotic.
  • Doesn’t have my favorite plugins? Dealbreaker…

I can’t say I didn’t try. I picked up over the years a few projects using Figma, but it never resonated with me.

Why the change then? 🤔

I had to wait to join Strapi, an open-source headless CMS startup (we’re hiring), to take the time to appreciate the power of Figma. They recently made the switch from Sketch and loved it. As you guessed by the title, I’m now myself convinced Figma is definitely headed in the right direction and full speed ahead.

Things to know to make the switch smoother ⚡️

To help you cross the chasm and make the most of it when landing on the other side, here are a few things I wish I know before getting started:

1. Terminology

Word cloud with arrows

Things are a little different in Figma, but luckily not that much in the end. Here are a few nuances to be aware of:

  • Artboards are called Frames. The shortcut is A (like Sketch) and F.
  • Symbols are called Components. It’s silly, but I believe it makes a ton of sense to use the wording the whole team understands (hint: engineers). However, this is also where the steepest learning curve is. More about the topic below.
  • Layer and text styles are defined by fills (like Sketch), strokes (instead of borders for Sketch), and effects (including border and inner shadows, and various blurs).

2. Components

Colored squares

As mentioned earlier, the way to create and update components (aka Symbols in Sketch) is the biggest difference.

To be honest, I’m still not 100% sure what’s the best flow to use them.

In Sketch, I was used to organizing all my components in the Symbols page.

In Figma, components created on the spot stay there, which is confusing when you need to find the master version afterwards. Or if you want similar components next to each other.

I was also used to shortcuts to go to the master component and get back to the instance. Figma doesn’t provide these by default. I had to create them through my MacBook settings. Here is a post that help me.

Another big difference is how you customize your components instances:

In Sketch, you have a control panel in the right sidebar where you can toggle, select, and override the content of a component.

In Figma, you do it directly in the instance by override texts, and deleting or swapping nested elements. It works, but I’m not sure that it’s the best workflow overall.

3. Many clever advanced features

Colored dots connected by blurry lines

The other big thing that made me realize how powerful Figma is, was all the subtle but clever advanced features. They really make a difference on a daily basis. Some of my favorites are:

  • Auto-layout: allows you to add automatic paddings and spacing between elements in a component or even a group. At first, I was a bit confused by elements moving around on their own in my designs. But once you get, it becomes a powerful ally.
  • Constraints: closely related to that last point, constraints like in Sketch helps you make your designs more responsive to its content (e.g.: text length) and its context (e.g.: frame width). Although, the concept is the same in both tools, I have to admit to still be a bit confused by it.
  • Variants: allow you to group similar components. A great example is for the different states of a button: default, hover, etc. It packed them nicely, so you can more easily find them and use them accordingly in your designs. Pretty cool stuff!

Things I’m missing 😢

Obviously, nothing is perfect and as much as I enjoy working in Figma, I still miss some things from my time with Sketch:

  • Plugins. Symbols Organizer to name one.
  • The integration with a collaboration tool like Abstract.
  • A shortcut to open the components panel and pick any existing component quickly.
  • Some attributes like colors are not as part of text styles. Somehow annoying and against the design system approach, I feel like.

What’s your experience? 🎤

Thank you for reading. I hope this post will help you feel more at ease making the switch if you have or want to. I shared in this post my anecdotal opinion, I’m sure we all have a different story. Feel free to share your journey so that we can all benefit and get back faster and better to designing meaningful experiences.

Raffaele Gesulfo is a Senior Product Designer at Strapi, an open-source headless CMS 100% JavaScript. Say hi on Twitter or check it out on Github. By the way — We’re hiring.

The UX Collective donates US$1 for each article we publish. This story contributed to World-Class Designer School: a college-level, tuition-free design school focused on preparing young and talented African designers for the local and international digital product market. Build the design community you believe in.

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Responses (13)

Write a response

Plugins: There's a ton for figma, just search the community for something akin to symbols organizer (although it'd be more likely under components organizer).
Shortcut to open the components panel (try the assets tab next to "Layers" in the top left…

--

I find that Sketch is a superior design tool and Figma is a superior prototyping and collaboration tool. I agree about Sketch's plug-ins as well. They seemed more useful and intuitive. Also, exporting elements for mobile sizes is way easier.

--

Figma actually just released (as in, today) a shortcut to shortcut to open a search modal to quickly find components: Shift + I (as in igloo).

--