When Sketch hits Figma. Text alignment comparison

January 28, 2019

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

I’m a Team lead UX/UI designer at Valor Software 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. But there are some issues that make me struggle as a designer who also codes. And it makes me hold off on making the final decision.
In this particular article, I would like 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 important when you work with text styles.

Let’s see what will happen with the text-frame when you set a 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 and it seems you are done...

But 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.

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, and it might be a bit confusing because the first one looks like an active button but none of them affect the text-frame behaviour. So, to do this 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.

Conclusion

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 for me and I’m sure for other experts why a Figma’s text-frame works in a different way. It would be great if it worked the same way as Web and Sketch. Hope the Figma team will fix it soon. It shouldn’t be a big deal.

Text-frame issue #2

The second thing that is not so crucial but makes me annoyed a little. 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 do a small selection inside the frame but anyway to move the text-frame you have to pull the typeface.

Figma has many cool features like:

  • Commenting mode right in the editor
  • Handoff process is so simple
  • 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 obviously 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 any 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/layer search in the Layers panel
  • Figma has Zeplin integration but it doesn’t export symbols yet which is crucial when you are building a design system

I’m really excited to see what Figma will come up with in 2019 and I hope Figma will continue to succeed as a professional design tool.

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!