menu

Figma

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

Channels
# All channels
view-forward
# General
view-forward
# Start Here
view-forward
# Announcements
view-forward
# Design Systems
view-forward
# Plugins & API
view-forward
# Made with Figma
view-forward
# Prototyping
view-forward
Team

Text alignment could be improved

May 13, 2018 at 8:57am

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.
  • reply
  • like
It is a bit confusing though.
  • reply
  • like
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.
  • reply
  • like
I'll jump in and show you what I mean
like-fill
1
  • reply
  • like
Ok. ill view it now
  • reply
  • like
Cool
  • reply
  • like
Thanks Josh. Fun collaborating with you :)
like-fill
1
  • reply
  • like
Thanks for jumping in the file. I'll be sure to pass along this feedback
  • reply
  • like
Likewise
  • reply
  • like
Thank you
like-fill
1
  • reply
  • like

May 30, 2018 at 10:12pm
Do yo mind to explain ehat you did in the collaboration part? :c
  • reply
  • like
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.
  • reply
  • like
Thank you Gavin. I appreciate it.
  • reply
  • like
I've been doing the line height and size thing for awhile. Then I gave up.
  • reply
  • like
Realistically defining line height and a pixel grid for devs is enough.
  • reply
  • like
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.
  • reply
  • like
We stress a lot about pixel perfection. When maybe we shouldn't.
like-fill
2
  • reply
  • like
All that said! I'd love more predictable text in Figma.
like-fill
1
  • reply
  • like

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.
like-fill
2
  • reply
  • like
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.
  • reply
  • like
Yes I agree completely.
  • reply
  • like

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 https://www.figma.com/file/dB87szNY65H37cJ4scDheQTy/Figma-Text-Alignment
like-fill
4
  • reply
  • like

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.
  • reply
  • like

August 22, 2018 at 6:54am
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 https://www.figma.com/file/dB87szNY65H37cJ4scDheQTy/Figma-Text-Alignment
This is a really good example. It's the biggest pain I've seen caused by this issue so far.
like-fill
1
  • reply
  • like

November 22, 2018 at 7:09am
Show more messages
private
This channel has been archived