Responsive Design and Breakpoints in Figma – Advanced Tutorial

Learn how to nail down responsive design and breakpoints in Figma with this advanced tutorial where I’ll be walking you step-by-step through some tips to recreate and animate a real, responsive sign in form.

✨ Duplicate my design to follow along: https://www.figma.com/file/cWuIe1XzqLAKnBcLu9WmDy/Chakra-UI

To speed up our design workflow and work with production-ready design assets and breakpoints off the bat, we’re using Chakra UI, a simple, modular and accessible components library. I’m currently working on a file that bridges the gap between Chakra and Figma that makes the full library natively available for your Figma projects. More news on that soon!

How to use the Chakra UI Kit to seamlessly design this page: https://youtu.be/Gm7qHn9Y_Ro
New to Figma? Start here! https://youtu.be/uoknvWgwe3Q
More examples of breakpoint design: https://youtu.be/l47WcSwK1M0

Let me know in the comments if you enjoyed watching this video, and if there’s anything related to Figma or responsiveness I haven’t covered yet that you’d like to see in the near future! 💬

If you are new to my channel, welcome! Don’t forget to hit subscribe if you’d like to keep up with my weekly dose of product design videos and tutorials to help you build great products and bring your ideas to life.

Don’t be a stranger and connect with me here 👋
Twitter: https://twitter.com/javalaves
Figma: https://www.figma.com/@javi
LinkedIn: https://www.linkedin.com/in/javieralaves/

Chapters:
0:00 – Intro
1:12 – Breakpoints intro
3:12 – Responsive layer structure
4:34 – Breakpoint frames
10:23 – Prototype
11:01 – Conclusion

source