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

Pin text to another text layer

July 27, 2018 at 12:12pm

Pin text to another text layer

July 27, 2018 at 12:12pm

I'm trying to pin one text layer to the other, so when the first one's width change, second element would move. Is it possible to achieve this in Figma?


July 27, 2018 at 7:27pm

What would work is to make the left text element align to left and the right element align to right. Then just increase the width of your component until it fits.

Another way would be to have one text element and apply these as text styles.

However all these seem like hacks, I agree there should be a better solution. Would be great to have relative positioning for components.

  • reply
  • like

I tried experimenting this morning and I think the best way is what @six7 about using two text styles to achieve what you're looking for.

  • reply
  • like

I couldn't use constraints to achieve the same effect

  • reply
  • like

Proposed UI Enhancement: Right click on the X, Y, W or H boxes. And click "Connect to other object" (menu option) and it would slide out a little menu to the left (like font options). On the slide menu, it has a little drag target which you can drop onto a tree node or onto an object you are looking at. Then it shows X, Y, W and H, each with a little "LINK" icon next to them. If I click X and/or Y, it makes it so that the height and width of object 1 is now going to be the same as object 2. If I click W and/or H it means that the X of object 2 is the same as the right edge of object 1 and the Y of object 2 is the same as the bottom edge of object 1.

like-fill
3
  • reply
  • like

I think this would make sense. It would mean I could resize 1 and it would move the other. I could type in one (with auto-height and it would heighten the other.

  • reply
  • like

There's a secret unreleased feature called 'Stack' I found when exploring the Figma source code. Stacked objects seem to retain their paddings upon resizing, and act differently upon dragging.

If you want to try it out for yourself, select the objects you want to 'stack', and going into your browser console and type

App.triggerAction("stack-selection")

then hit enter, this will group your objects into a stack which makes it behave the way you described in your post.

Disclaimer: This seems to be an unreleased feature so use it at your own risk.

like-fill
26
  • reply
  • like
like-fill
1
  • reply
  • like

There's a secret unreleased feature called 'Stack' I found when exploring the Figma source code. Stacked objects seem to retain their paddings upon resizing, and act differently upon dragging.

If you want to try it out for yourself, select the objects you want to 'stack', and going into your browser console and type

App.triggerAction("stack-selection")

then hit enter, this will group your objects into a stack which makes it behave the way you described in your post.

Disclaimer: This seems to be an unreleased feature so use it at your own risk.

Just tried it now, that is slick! Part of me was wondering how to make that stacking order work vertically instead of horizontally, because then it becomes super useful for auto layout. Thanks for sharing ā€¦ your secret is safe with me. =)

like-fill
2
  • reply
  • like

Just tried it now, that is slick! Part of me was wondering how to make that stacking order work vertically instead of horizontally, because then it becomes super useful for auto layout. Thanks for sharing ā€¦ your secret is safe with me. =)

It works vertically as well. Just layout your objects vertically before grouping them into a stack, and they should behave as a vertical stack.

like-fill
3
  • reply
  • like

July 28, 2018 at 11:07am

I was trying to get this working with the constrains, stack vertically and then make the elements adapt to the screen size, but I don't think is working well at this point, but I'm sure this will be great

  • reply
  • like

I tried to apply this to one of my components, that is made of 2 components. Since you can't auto-resize the instance of a component you can't make it work properly. It would work great if we could turn on the "resize to fit" to automatically adjust to frames/components/instances content.

  • reply
  • like

in this example, the assistive text only appears correctly stacked after the manual "resize to fit" of the master component.

like-fill
3
  • reply
  • like
  • reply
  • like

July 29, 2018 at 5:54am

Is this the effect you're looking for? I don't seem to have much problem with it, except that resizing no longer works with constraints because the stack group will not follow its constraints and will snap to the total size of its children.

  • reply
  • like
  • reply
  • like

Feature request

  • reply
  • like

Is this the effect you're looking for? I don't seem to have much problem with it, except that resizing no longer works with constraints because the stack group will not follow its constraints and will snap to the total size of its children.

oh you did it! But yes, as you said the constrains don't work anymore, so you can't use it. the future seems promising though!

  • reply
  • like

Instance auto-resize would be a very good feature to have because that is how HTML/CSS divs work. The parents dimensions change according to its children. I'm trying to have the card with a border auto-resize according to the description text inside.

like-fill
1
  • reply
  • like
  • reply
  • like

@jackie-chui this is rad! Great catch! Hope to this this ready for production asap.

like-fill
5
  • reply
  • like

This is unrelated to the original post but I thought it would be cool to share what we could achieve with the Stack trick.

I made an auto resize button using two invisible left padding and right padding rectangles, and a text in the middle.

  • reply
  • like
like-fill
18
  • reply
  • like

Genius :D I would love this feature.

I'm trying to figure out what potential ways stacking could mistakenly complicate a designer's workflow.

Like what do you reckon the risks are for Figma to release this properly?

  • reply
  • like
Show more messages
private
This channel has been archived