Spectrum is now read-only. Learn more about the decision in our official announcement.


Figma is the first collaborative UI design tool built in the browser. Join our growing community and kick off a conversation!


Text alignment could be improved

May 13, 2018 at 8:57am
The Figma community has a new home. This thread is preserved for historical purposes. The content of this conversation may be innaccurrate or out of date. Go to new community home →

Text alignment could be improved

May 13, 2018 at 8:57am
When you set the alignment of text in Figma. Two things happen, the alignment of text within the leading (top, middle, bottom) changes and the alignment of the object changes. I personally find this extremely frustrating because of two reasons. 1) most of the designs I create are for the web and CSS only allows vertical alignment of a series of inline elements, not individual elements 2) if I have a row text objects and then want to edit the text in one, I then have to reposition the object for it to line up.
It's easier I think to see in the example below:
Do many people find the current text alignment behaviour useful? Perhaps if you do you can share example of how you use it? Otherwise could we improve the way it works?

May 14, 2018 at 9:27pm
I see what your saying here. It looks like this has to do with your line height. If you use the bottom solution but with the line height at 100% and then after the fact change it to 30px that should work.
It is a bit confusing though.
Thanks for taking a look. If you change the line height from 100% to 30px the text object still changes alignment so I don't think that's a workaround unfortunately.
I'll jump in and show you what I mean
Thanks Josh. Fun collaborating with you :)
Thanks for jumping in the file. I'll be sure to pass along this feedback

May 30, 2018 at 10:12pm
Do yo mind to explain ehat you did in the collaboration part? :c
Josh showed me a technique where you set the text to vertical alignment top, then set line height to 100% and center it with the icon using the alignment tool and then set the line height in pixels. This way when you copy the text and change it from several lines to one line the text still remains aligned with the icon.
It's an interesting technique and does make the scenario copying text and changing the content easier to deal with but still has a lot of drawbacks including. Josh has passed this feedback on.
Thank you Gavin. I appreciate it.
I've been doing the line height and size thing for awhile. Then I gave up.
Realistically defining line height and a pixel grid for devs is enough.
Unless it's a text heavy design. And even then we all forget that adaptive screens alter our text layouts in unpredictable ways, and the end user maybe is even looking at our design with the view scaled.
We stress a lot about pixel perfection. When maybe we shouldn't.
All that said! I'd love more predictable text in Figma.

May 31, 2018 at 7:44am
My point is less about pixels and more about the annoyance of having to re-align text layers after editing the text.
Yeah. That could definitely be improved. Some of it is us using the tools to our advantage, but Figma does some odd things. Especially the issues with line-height, and shape height. You don't always want to vertically align the text to get it to position itself correctly.
Yes I agree completely.

June 21, 2018 at 8:01pm
Actually, that's a tragedy for web designers. That behaviour makes it impossible to use text areas with more than one line as parts of components. You can't re-align text layer in the instances of component. For designers that are creating for web it's either text would be displayed wrong (so web developer won't get correct padding & line-height), either alignment of the text layer would go crazy. Example file

June 24, 2018 at 11:21pm
Yes. I think that's the same problem I have. As soon as I create more than one textarea and change the width of the frame the width of the textarea changes but the second area just stays on the same position from the top instead of aligning to the first text area.

August 22, 2018 at 6:54am
This is a really good example. It's the biggest pain I've seen caused by this issue so far.

November 22, 2018 at 7:09am
Show more messages