Figma Vs Sketch: Text alignment comparison

January 28, 2019

Too many articles were written about Figma, and most of them have positive feedback about it. I mostly agree with that, but here is my bump.

I'm a Team lead UX/UI designer at Valor Software, a software development company, and our team is thinking about switching from Sketch to Figma or at least use Figma for small projects that don't have too many complicated components. However, some issues make me struggle as a designer who also codes. Also, it makes me hold off on making the final decision.

In this article, I want to go through text frame issues that make me upset.

Text frame issue #1

Here is the problem: both Sketch and Figma tools have vertical alignment settings for a text frame. If you have a text frame with a default line height, you won't notice the issue. You will bump into it when you set a line height, which is essential when you work with text styles.

The problem #1: both Sketch and Figma tools have vertical alignment settings for a text frame.

Let's see what happens with the text frame when you set a line height.

What happens to the text frame when you set the line height

As you can notice, the Figma text frame behaves differently from Sketch and Web. The typeface is stuck to the top of the text frame. Meanwhile, the Sketch typeface is aligned by the middle of the text frame, which seems to be correct because the way it behaves on the Web is the same.

As a solution, you can manually align the typeface in the middle. It may seem you are done.

The Figma text frame behaves differently from Sketch and Webflow

However, let's have a look at the following example and see how it affects you while you’re working on a component. Just a reminder, you can't change element positioning inside an instance in Figma.

The following example how it affects you while you are working with a component.

In the example, we have the master component on the left side where we applied the solution. So it looks like it works correctly, but when you start working with an instance, and you have more than one line of text, you will face this issue.

At the same time Sketch doesn't allow you to change the vertical alignment of a text frame for both auto-resize options—auto and fixed. All three vertical alignment buttons are disabled by default. It might be a bit confusing because the first one looks like an active button, but none of them affect the text frame behavior.

So, to change the alignment you have to manually change the height first, and only then you will be able to play around with the alignment. It makes sense because you know that you've changed the height of the text frame so now you can customize the alignment inside your text frame with fixed dimensions.

Sketch text-frame

So, if we look at how a Sketch text frame behaves and how it perfectly maps to the Web after markup, it's not clear to me, and I'm sure for other experts, why a Figma's text frame works differently. It would be great if it worked the same way as Web and Sketch. I hope the Figma team fixes it soon. It shouldn't be a big deal.

Text frame issue #2

The second thing that is not so crucial but makes me a little annoyed. To select a text frame you can't just click on the entire text-frame area, you have to target the typeface inside. As a workaround, you can make a small selection inside the frame but, anyway, to move the text frame you have to pull the typeface.

You can't just click on the entire text-frame area, you have to target the typeface inside.

Conclusion: Sketch or Figma

Figma has many cool features like:

  • Commenting mode right in the editor;
  • Simple handoff process;
  • A pretty good prototyping tool;
  • Nested frames;
  • Version control;
  • Nudge, Rename, Runner, Shared styles, etc., right in the box, while in Sketch you have to install plugins.

I personally love them all, and I think Sketch should think about some of these features. However, there are ones that look unfinished or work strangely:

  • The text frame issues I’m talking about.
  • There is no chance to create a dynamic component with paddings like a button or a card. Most probably I'll write an article about it later.
  • You can't copy an SVG icon from your machine and paste it inside a frame.
  • There is no frame or layer search in the Layers panel.
  • Figma has Zeplin integration, but it doesn't export symbols yet which is crucial when you build a design system.

I’m excited to see what Figma will present in 2019, and I hope Figma will continue to succeed as a professional design too—such a great software vendor.

Related topics on Spectrum

Line height text align middle

Any hints on baselines and line heights

Text alignment could be improved

Subscribe to find out more

Thank you!

Your submission has been received!
Oops! Something went wrong while submitting the form.

More articles

Want to work with us?

Let's discuss how Valor Software can help with your development needs!