Responsive Design and Breakpoints in Figma – Advanced Tutorial

>> YOUR LINK HERE: ___ http://youtube.com/watch?v=CNqti19VS2A

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/cWuIe1XzqL... • 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: • Design Workflow with Chakra UI and Figma • New to Figma? Start here! • Designing with Figma – A Beginners' H... • More examples of breakpoint design: • Responsive Design with Auto Layout an... • 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: / javalaves • Figma: https://www.figma.com/@javi • LinkedIn: / javieralaves • Chapters: • 0:00 - Intro • 1:12 - Breakpoints intro • 3:12 - Responsive layer structure • 4:34 - Breakpoint frames • 10:23 - Prototype • 11:01 - Conclusion

#############################

New on site