How to make an element align within an auto layout frame

Ask the community
, ,
1

I have created a modal component with various elements that is working great - apart from the alignment of a ‘close’ button. I have used auto-layout for most of the elements to control the resizing of the modal when different lengths of text are used. I would like the ‘close’ button to always be pinned top left and move with the height of the modal frame.

See video linked below:

I have also tried grouping this ‘close’ button in a number of combinations, all with the same result.

I have not been able to do this. Please help!

2

Hi there,

Unfortunately, I’m unable to access the Google Drive link you’ve shared. However, I believe using absolute positioning could help you. Absolute position excludes an object from an auto layout flow while keeping it in the auto layout frame. The object and its surrounding siblings ignore each other, even as they resize and move.

You might find this helpful: https://help.figma.com/hc/en-us/articles/360040451373-Explore-auto-layout-properties#h_01G2RPRBBKVKXK0JV59NCSKEE0.

Please let us know if this information is useful or if there’s something I’m overlooking.

Thanks,
Toku

3

THAT IS EXACTLY WHAT I NEEDED. Thank you so much. Had no idea this existed.

2 Likes
4

Thanks for your warm reply :slight_smile: Glad to know it was helpful! Please feel free to let us know if you have any questions. We’ll try our best!

Thanks,
Toku