Skip to main content
Solved

A quick question about auto layout for responsive web design

  • September 24, 2023
  • 2 replies
  • 862 views
J

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 😦

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

Best answer by Celine_D

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!

View original

2 replies

Celine_D
Figmate
  • Celine_D
  • Community Support
  • 3384 replies
  • Answer
  • September 28, 2023

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!

J
1 person likes this
  • J
    JJ17
J

It sounds like you’re having trouble with responsive behavior in Figma, particularly with Fill, Hug, and Fixed settings in groups and cards. Here are some common issues and solutions:

Common Issues and Solutions

  1. Check Constraints:
  • Ensure that constraints are set correctly for each element within the group. For mobile design, usually setting constraints to “Left” and “Right” for horizontal responsiveness and “Top” and “Bottom” for vertical responsiveness helps maintain layout consistency.
  1. Group Layout:
  • Verify the layout settings for the group. Ensure that the group is set to behave responsively by adjusting its resizing constraints and ensuring that its child elements are set with the appropriate Fill, Hug, or Fixed settings.
  1. Parent Container Resizing:
  • When shrinking the parent container, make sure that the child elements within the container are set to resize appropriately. For example, if a card is set to “Fixed,” it won’t resize with the container. You might need to switch to “Hug” or “Fill” depending on how you want the card to behave.
  1. Auto Layout:
  • Use Auto Layout for more dynamic and responsive designs. Auto Layout helps in managing spacing and alignment automatically as you resize the parent container. Make sure that Auto Layout settings are correctly applied to the groups and cards.
  1. Debugging Layout Issues:
  • Test different combinations of Fill, Hug, and Fixed settings to see how they affect your design. Sometimes, adjusting a single element’s setting can have a significant impact on the overall layout.

Resources for Further Learning

Video Guides:

check out my recent design (https://pearllemonweb.com/)

Reply


Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings