Is it possible to hug elements vertically with auto-layout while applying horizontal constraints that adhere to column layout?

Ask the community
1

Hi there,

I tried searching online for this problem but to be honest, I wouldn’t know where to start but I have been having trouble designing a responsive component and having it behave the way I’d like it to. I’m designing a text container component which includes an overline text, title, description, and button - all of which except the title are optional so I can turn them on or off using layer properties. I plan on having 3 variations of this text container (See example below):

  1. Without background fill
  2. Full width background fill
  3. Background fill with margins

Screen Shot 2023-05-03 at 10.38.31 AM
Screen Shot 2023-05-03 at 10.38.31 AM2880×1718 197 KB

The problem I am having stems from the second and third variation. I want those variations to hug the elements using the same vertical padding based on whatever layers I want on or off (i.e. I turn off ‘overline text’ and the padding above and below still maintain 64px padding) WHILE being able to constrain the text container within a certain number of columns within the background fill based on whether it takes up full width or extend only up to the margins.

I apologize if this is difficult to make sense of (trust me…I’m having difficulty trying to explain this as easily as possible), but I will provide examples using the full width variation.

Here’s what I’ve tried:

  1. Auto-layout was the obvious first approach and it solves the vertical padding but horizontal padding is the main issue. It’s set on having fixed values on either side when I’m mostly interested in having the text container constrain itself within the columns I’ve set it to when I scale the breakpoint (See example 1)

Screen Shot 2023-05-03 at 3.54.39 PM
Screen Shot 2023-05-03 at 3.54.39 PM2880×1722 406 KB

  1. Instead of auto-layout, I also tried having the text container inside a frame which acted as the background fill. What it does resolve is the horizontal responsiveness but the vertical padding doesn’t hug the elements based on what layers I turn on or off - essentially the opposite of what I tried with auto-layout (See example 2)

Screen Shot 2023-05-03 at 3.55.43 PM
Screen Shot 2023-05-03 at 3.55.43 PM2880×1726 412 KB

  1. The closest I can get to resolving both issues was applying auto-layout and using absolute positioning for a rectangle that acted as the background fill; vertical and horizontal padding work responsively, however, the absolute positioned rectangle doesn’t constrain itself within the breakpoint’s column layout (See example 3)

Screen Shot 2023-05-03 at 4.19.53 PM
Screen Shot 2023-05-03 at 4.19.53 PM2880×1722 323 KB

Maybe I’m overthinking this and the solution is much simpler than I thought but if anyone has any idea on how to fix this, I’d greatly appreciate it! Thanks!

1 Like
2

Hi!

[EDIT] Oops! I see now that I misunderstood what you were going for. Ignore the below, but I think I have a solution. Sec…

[Another EDIT]

Ah! Now I get your problem.

The closest I got was having everything work EXCEPT for the gray box sizing vertically when you remove a button or what-not, which I think is as far as you got, too. Sorry.

Annoying that you can’t tell a frame in an auto-layout to “fill-to-layout-grid” or something like that. If you find a solution, please post it here.

–-

3

First off, thank you for taking the time to help me with this! :pray: Finger crossed Figma will provide an update to account for this.

[EDIT] For anyone else out there, if you have a solution or a workaround, please let me know. Thanks!

1 Like