Skip to main content

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!

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!

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