menu

Figma

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

Channels
Team

Bugin constraints?

January 21, 2019 at 2:09pm

Bugin constraints?

January 21, 2019 at 2:09pm

This is my component:

Image

This is my original component resized:

Image

This is an instance of my component resized:

Image

what's causing this? It appears to behave differently every time I resize it too.


January 21, 2019 at 5:46pm

First thought is that your typography is set to center or bottom alignment instead of top alignment.

  • reply
  • like

January 22, 2019 at 9:34am

It is but why does that change the positioning of my text box? The text box is pinned top and left yet it is shifting upwards. I had to set the text to align at the centre because otherwise Figma is rendering my text incorrectly, shifting its baseline upwards for no apparent reason.

  • reply
  • like

The text bounding box will make itself narrower with those constraints, but if the text is set to align center, it will spread out from the center if the bounding box is too small for the string it contains. Change the text to top, and that should fix it. If you share your file, I can take a look at it.

  • reply
  • like

Thanks but it's ok.I still think that that behaviour is wrong. If I pin a text box to the top of its container, independently from where the text is set to be aligned, the top of the text box should remain where it was. Besides this, the behaviour is inconsistent, sometimes it scales as expected and sometimes it scales as I've shown above. The fact that the behaviour differs from time to time is very strange. Also, as I said, due to Figma's inconsistent render of text, I need to align to center!

Edited
  • reply
  • like

You can always make the text bounding box taller, so that when the card is resized it doesn't do this... There's about 5 different ways to avoid the "bug" you're describing, so I'm not really sure why this is an issue. Even though it doesn't work for this one use case in the way you expect, I have a few dozen components where this exact behavior helps me greatly. All that being said, this isn't a bug, but if you share your file, or the card in a separate file, we could validate it for you.

Also, I'd suggest going into outlines mode (cmd+y) to see what's happening under the hood. That might help.

  • reply
  • like

January 23, 2019 at 11:56am

Ok, this must be a bug! I have EXACTLY the same component (cut and pasted from one to the other) behaving differently in 2 different documents. Sadly the document that I need is the one where it's not working properly with the text box not resizing itself. I've been trying to resolve this for a while but no luck.

Edited
  • reply
  • like
  • reply
  • like

Duplicate this frame to a new document and share the link. Hard to say if this is a bug from just screenshots.

  • reply
  • like

January 23, 2019 at 10:07pm

I seem to recall weird behavior differences between master and instance when Auto Resize was enabled for a text box. (I've been avoiding it ever since.) If I recall, the master resized appropriately and honored constraints, but the instance would never resize, so the text would be overset unexpected ways.

Looking at the second and third screenshot in the thread, though, it almost looks as if the text frame is set to Scale in the vertical dimension, and maybe there are one or two differently-sized groups that it's in, such that it scales exponentially compared to the overall component size. Or maybe it's a combination of the two...e.g. if your text is auto-sizing (so when it's two lines it's larger vertically) but it's in a frame that is set to be the size of one line of text, and one or both are set to Scale.

  • reply
  • like

January 24, 2019 at 9:12am

I seem to recall weird behavior differences between master and instance when Auto Resize was enabled for a text box. (I've been avoiding it ever since.) If I recall, the master resized appropriately and honored constraints, but the instance would never resize, so the text would be overset unexpected ways.

Looking at the second and third screenshot in the thread, though, it almost looks as if the text frame is set to Scale in the vertical dimension, and maybe there are one or two differently-sized groups that it's in, such that it scales exponentially compared to the overall component size. Or maybe it's a combination of the two...e.g. if your text is auto-sizing (so when it's two lines it's larger vertically) but it's in a frame that is set to be the size of one line of text, and one or both are set to Scale.

I think that's what's happening. My master works as expected but my instances work randomly. Sometimes they do, sometimes they don't.

  • reply
  • like

January 29, 2019 at 5:18pm

Sometimes instances do not carry over the constraints settings from the master when the instance is inside of another frame (component or not). When this has happened to me, it usually means that deep down in the component cascades, something is not set properly or it might be conflicting with another constraint setup I did and that is what it is messing it up.

Edited
  • reply
  • like
private
This channel has been archived