A quick question about auto layout for responsive web design

I’ve been watching a lot of tutorials to fully grasp Fill / Hug / Fixed for cards and multiple elements in one group.

When I’m building the elements separately, they seem to behave find and responsive as I’ve intended, however they start breaking down as the group gets bigger, and I’m sure I’m setting something wrong… just don’t know exactly what

For example, in this Figma file there’s a card design I’m struggling with.

I want to achieve what’s on the “mobile design” frame without adjusting anything but simply shrinking the container down, but I can never seem to be able to achieve it :frowning:

Please help me and let me know what I’m doing wrong!

1 Like

Hi @JJ17!
I checked your Figma file, and I recommend you to use Variable and Mode features to make your frames responsive (desktop, mobile format…).
Here’s a quick video tutorial on how to use Variables and Mode features: https://www.youtube.com/watch?v=xNk3QnuowKE&t=251s

If this helps you, and you’d like to have more details, we have our Guide to Variables in Figma in our Help Center (article + video) here: https://help.figma.com/hc/en-us/articles/15339657135383-Guide-to-variables-in-Figma

Hope it helps!

1 Like