Responsive Design in Figma: Auto-Layout and Width Breakpoints
Vložit
- čas přidán 28. 08. 2024
- 🔍 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.
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
Thank you so much
Thanks for the great tutorial. Could you perhaps make a video Figma to Wordpress ?
great. Thank for the tutorial
Thanks for the helpful lesson
What do you think about the Breakpoints plugin? Isn't that a better way?
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.
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
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. :)
BUT THE IMAGE IS NOT SHRIKING WHAT AM I GONNA DO?
Probably need to set the image constraint to ‘Fill’