“Hi everyone! 👋 I’ve recently learned how to use auto layout to create responsive components and grid/constraint layouts to make a page responsive. I tried to combine these techniques to create a responsive page, but it didn’t seem to work. My responsive components didn’t respond and stretch along with the layout. Can anyone tell me if it’s possible and how to achieve it?”
Thanks a lot!
Best answer by djv
Thanks for sharing the link to your file!
It looks like you need to apply Auto Layout or Scale constraints to Frames 15 & 16. Then, nest the slides into a new frame inside of Frame 16 and apply Auto Layout there. And by “responsive” components you can then wrap or stretch your components, as needed.
If you need more specific guidance, please reach out to the support team directly via this form for help: https://help.figma.com/hc/en-us/requests/new
Be sure to use your Figma account email, include a link to the file, and share it with support-share@figma.com, so our team can help from there.
Hey @sunshahuan, thanks for reaching out!
It’s hard to be sure without seeing what you’ve done with your file. Are you able to provide a link to your file, so we here in the community can take a closer look?
Thanks for sharing the link to your file!
It looks like you need to apply Auto Layout or Scale constraints to Frames 15 & 16. Then, nest the slides into a new frame inside of Frame 16 and apply Auto Layout there. And by “responsive” components you can then wrap or stretch your components, as needed.
If you need more specific guidance, please reach out to the support team directly via this form for help: https://help.figma.com/hc/en-us/requests/new
Be sure to use your Figma account email, include a link to the file, and share it with support-share@figma.com, so our team can help from there.
You really can’t do responsive, atomic design in Figma and be DRY (Don’t Repeat Yourself). It’s crazy how popular it is and how much we pay for it, and it can’t do basic stuff like allow a component to be responsive in all its instances, for all nested components or parent components. There should be like a component “Stack” for which you can reset all constraints within nested components.
There’s some crazy set of things you can do to make it Almost responsive – go in everywhere and set things to Scale, or attach to the Right on the constraint or attach to the bottom left. But then figuring out should it be a frame or an autolayout in that instance, I never know. I spend all day in this tool and it still confuses me, and I bump up against it’s limitations every day.
Thank you, Michael! You truly understand my question here. The Auto Layout is useful, but it’s frustrating as well. I spent hours trying to figure out how to fix it and ended up quitting. I couldn’t agree with you more that it’s a very powerful tool, but somehow, it always doesn’t have the simple function I needed.
Thank you with agreeing with my frustration.
@Sha_Huan_Sun , it sometimes makes me wonder if I should just design in HTML and CSS. I mean, you can usually debug it. And once it’s written well, it actually works the way it’s supposed to.
I know part of the magic of Figma is it is supposed to help you not have to remember 1 million decision rules for CSS. But honestly I probably would have learned from instant recall every detail of CSS in the amount of time I have had to mess with some janky Figma object that is built using the features it sells: Autolayout, and Components. Argh. I think I need to take a break.
I’m learning HTML, CSS, and JavaScript right now since the UI/UX job field is terribly brutal. I hope with these skills I can land a full-time job.
Thank you Michael 🙂
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.