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