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.
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.
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.
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:
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:
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.
Let's discuss how Valor Software can help with your development needs!