Responsive Design in Figma: Auto-Layout and Width Breakpoints

🔍 This tutorial will teach you how to utilize the Auto-Layout feature and establish breakpoints with width constraints in Figma in just a few minutes.
📌 Subscribe for more in-depth, weekly tutorials and tips on Figma and design.
Instagram: / uxdan.io
TikTok: / uxdan
Download FREE Resources from the video:
uxdan.gumroad....
💬 Excited about responsive design in Figma? Share your experiences and any questions you have in the comments section below.

[@uxdanio]

As I said in the video - a bit delayed but I really wanted to make sure you get the best refined version of the article that I recently published on AI & Design Systems: medium.com/@uxdanio/ai-design-systems-guide-challenges-and-opportunities-uncovered-1218aab3eff5

[@mr-plus]

Thanks for the video !
In the new Figma UI, the "Fill container" option is hidden inside the Layout>Width field.
I searched for it for 15 minutes, and your video unlocked it for me :)

[@benpurcell591]

Do you have a similar video on cards? I.e. On desktop you get rows of 3, on tablet maybe rows of 2, on mobile they stack 1 on top of the other. Is this possible in figma?

[@adhdmed]

Thanks for the great tutorial. Could you perhaps make a video Figma to Wordpress ?

[@SisiBisi-zh1cj]

Thank you so much

[@rawi2416]

What do you think about the Breakpoints plugin? Isn't that a better way?

[@uxdanio]

I find the breakpoints plugin to add unnecessary dependencies and frustration. I prefer to use the built-in Figma functionality as much as possible, rather than relying on 3rd-party solutions. You can use Figma variables for more advanced prototyping techniques like breakpoints (although that might be only available for pro plans). I'd say what Figma offers is enough for majority of situations, plus it makes it easier for developers to inspect in dev mode.

[@ИринаИгумнова-е7ж]

Thanks for the helpful lesson

[@nkdevdive]

great. Thank for the tutorial

[@brunofigueiro.]

Great video! I'm just having a problem with the image that goes inside the rectangle, as the rectangle changes and size the image deforms

[@uxdanio]

The image that you see is actually an "Auto-Layout" frame, the image is added as "Fill" image. I mentioned this at 2:30 . If you still get stuck, you can use the project files, as that might help you understand the setup better. :)

[@ajay4813]

BUT THE IMAGE IS NOT SHRIKING WHAT AM I GONNA DO?

[@opeyemiajagbe]

Probably need to set the image constraint to ‘Fill’