Horizontal alignment: Constraints & resizing question

[firesauce-studios]

Is there a way to align text and shapes so that they remain horizontally centered as I resize the artboard? I've set the Constraints to Fixed Left and Right for each of the items on this artboard, but when I drag to increase the canvas width they don't resize as I would expect.

This artboard consists of 3 text fields, 1 shape, and no components. Thanks!

[Spas K.]

You can do two things. Right now the selected element is an auto-width text. This can't change in width.

You can either remove the left and right constraints, or make it an auto-height or a fixed size textbox.

You can't assign both left and right fix to items, that have a fixed width. If you set "fixed width" on a group or another item, you will see that you can't apply both left and right fix. I think right now the auto-width textbox is the only element which can't be transformed along the x axis. The inconsistency is that Xd shouldn't allow you to apply both left and right fix to it, even if "fix width" isn't activated, but it still allows you, as it treats all texts the same way.

[firesauce-studios]

I'm a bit confused. When I set a left or right constraint, does Adobe constrain it by percentage or pixels? I would imagine that if it's fixed width, it would be by percentage, but if it's not then it would be by pixels. I would like to understand how to horizontally center something on an artboard that is fixed width or variable width, for the future.

In my example above, I'd like the textbox to accomodate future text updates which might make the headline shorter or longer, so that's why I set it to Auto-Width. Then I turn off Fix Width, and set the Top, Left, Right constraints but it doesn't stay centered if I enlarge the component.

If I set it to Auto responsive resize, it works, so I switched from Auto to Manual just to see which settings Adobe gave it that worked and it has no constraints set but does have Fix Width and Fix Height enabled. Not sure I understand this. Fix Width and Auto Width contradict and without constraints why is it staying centered? Just because I manually aligned it to the center?

[Spas K.]

When I set a left or right constraint, does Adobe constrain it by percentage or pixels?

- By pixels. If the constraint is set only on one side, it will keep that side's pixel value, and the other side will shrink / expand, until it reaches the edge, and then it will ignore your constraint and center it, to basically not allow clipping to occur.

If the constraint is set on both sides, it will try to resize the element to keep the pixel value for the spacing on both sides. If the element is "fixed width", you disallow Xd to resize it, and it won't let you pick both constraints on that axis, as you don't let it resize the element.

I would like to understand how to horizontally center something on an artboard that is fixed width or variable width

For fixed width elements - allign them manually to the center of the artboard, and don't set left/right constraints.

For variable width - you can set left & right constraints, and the spacing will remain the same pixel value. If you don't set them, it will resize the text block and shrink the spacing, trying to retain the relative size / spacing to the parent element / artboard. It won't allow clipping.

Fix Width and Auto Width contradict and without constraints why is it staying centered?

They are kind of the same thing. The contradiction is that it shouldn't allow you to pick both constraints on an axis for an Auto Width text. No constraints means "retain relative / percentage spacing". So if it's aligned to the center by you, it will retain the spacing on both sides equally, and the element will remain centered. Constraints fix the spacing to an exact amount.

Just because I manually aligned it to the center?

That's the 'starting' point. Xd looks at where each element is and tries to figure out what it should do with it. If you've put it in the center, it will guess that it's supposed to stay there. It gets it wrong sometimes, or you want something else, so that's why you have the manual option too.

You usually want to make the title grow in width, but to a certain point. I would use auto height text, and align the text to the center, so when it becomes too long to fit, it will start a second line. You can set constraints on both sides of x axis if you want, so it doesn't touch the edges when it gets small. With auto-width, it just grows in length, but won't go to second line and becomes smaller as a whole instead.

Attached a video below.