: Sketch: Object moves relative to another object/text in symbol How do I make an object automatically move when I change the text preceeding/"attached to" it? I'm trying to figure out how this

@Gretchen549

With a bit of trial and error I've narrowed down the requirements.


The alignment of the text needs to be set to Auto
The horizontal space between the text and the other layer needs to be >= 0px and <=19px
The distance between the top of the text frame and the top of the other layer and the bottom of the text frame and the bottom of the other layer needs to be <= 8px


BTW the text can be on the left or right of the displaced layer.

Vote Up Vote Down

@Bryan765

Just stumbled on this question in search of answers with no luck, but I figured out a workflow to make this happen:

Steps:


Create a text field that you would like your object to anchor to.
Align object to text field (I have only tried object on right).
Group text field and object.
Set the "resizing" option of the text field to stretch and of
the object to pin-to-corner.
Create symbol with the group you just created.
Important: In the symbols page, extend your new symbol's art-board to a width that will accommodate all of your overrides you
will input into your text field.


You now should be able to override your text and your object will anchor to your new text.

Cheers!

Vote Up Vote Down

@Smith574

Many thanks to twitter user @kieranpblack !

You must have at least 1px between the text layer and the second layer for it to work.
Works on any resizing option, including default stretch!

(Can't even remember if I trialled this before the Sketch 41 update or not? Seems so simple looking at it now.)

Vote Up Vote Down

@Vandalay110

I can't find any documentation about this, but I have figured out how to reproduce the behaviour, if you're still interested.


Create a background rectangle, a piece of auto-width text on top of
that rectangle, and a smaller rectangle up to 20px from the right edge of the text.
Select the text and the smaller rectangle and create a group. Let's call it 'group1'
Make sure the small rectangle comes after the auto-width text in the layer list.
Select the background rectangle and group1, and create a symbol.
On the symbol edit page, select group1 and specify 'pin to corner' as the resize method. Check that all of your other elements (the two rectangles and the text) have 'stretch' as their resize methods.
Create some instances and override the text, it should work.


It's tricky to deduce the full ruleset from experimentation. I wish there was a manual or something.

Vote Up Vote Down