Responsive UX/UI Design in Figma 1.5h deep dive 2024 UPDATE! (Udemy.com)
Figma Auto Layout, Constraints and Breakpoints: Responsive setup, testing and design documentation, min/max width, wrap
Created by: Christine Vallaure
Last updated October 2024
What you will learn
- Auto Layout
- Constraints
- Testing responsive components with Breakpoints
- Documenting responsive components and pages
- Absolute positioning
- Fix aspect ratio
- Auto layout resizing
- How to find the right breakpoints and translate them to Figma
- How to media queries work under the hood in CSS
- Breakpoint Plugin
- Note: We will NOT deal with coding responsive web!
- Figma working material file with plenty of exercises
- Access to the moonlearning student files library
Quality Score
No CourseDuck member has rated this course yet. Taken it? Give each part a thumbs up or down.
Overall Score : 92 / 100
Course Description
Deep Dive: Figma Auto Layout, Constraints, Breakpoints & Modes(1.5h)
NEW! Full Config 2024 Update Featuring the New Figma UI Design!
Auto layout driving you crazy? Scared of what will happen with your design in the browser? Then this class is just right for you! We will learn everything about how to set up responsive designs in Figma.
This is going to be a real deep dive into auto layout, constraints, and, most importantly but rarely discussed, how to deal with breakpoints for your UI design, ranging from a simple setup to a more advanced approach with variables and modes.
Understanding and combining these tools will help you set up components, design patterns, and entire pages that align with code settings.
With the Figma course material file, you can work alongside me or return to exercises with detailed instructions in your own time.
This class is right for you if you have basic knowledge of Figma or if you are an advanced Figma user and want to brush up on your skills.
Auto Layout deep dive
What is auto layout?
Setting up auto layout frames
The auto layout menu
The auto setting
Advanced auto layout menu
Resize settings
Vertical resizing tips
Ignore auto layout
Auto layout components and variables
Setting min and max values
Auto layout wrap
Fixed aspect ratio images (hack)
Learn about nesting: parent-child relationship
Suggest auto layout
Some magic with tables: auto layout and AI
More advanced setup (examples)
Auto layout pages
Auto layout and CSS flexbox
Slot components with auto layout
Constraints
What are constraints in Figma?
Constraints and grids
A quick intro to grids in Figma
Breakpoints & Modes
Introducing CSS breakpoints
Breakpoints in Figma
Modes and screen sizes: a quick intro
Binding variants to modes
Hide and show with booleans
Responsive typography with modes
Figma course material file
Instructor Details
- 4.6 Rating
844 Reviews
Christine Vallaure
I’m Christine Vallaure, founder of moonlearning. I run it as a deliberate solo business. Supported by smart automation and AI, but deeply human at its core. Every course is crafted and taught by me.
I’ve spent 15+ years in design and product. Agencies, startups, global brands, and my own products. I’ve been excited, stuck, overwhelmed, and back at square one more than once. Tools move fast. Expectations grow. It’s easy to feel like you’re always catching up.
What changed things for me wasn’t learning every new feature. It was understanding what’s happening under the hood. Not to become an engineer, but to design with clarity and control.
That’s what I teach. Practical skills that help you move faster without losing craft.
✔️ 15+ years in design and product (BMW, P&G, MetaDesign)
✔️ 2× Figma Config speaker
✔️ Awwwards Jury Member
✔️ International speaker on design-dev collaboration and solo building
✔️ Author of the Solo
Follow me on:
moonlearning(dot)io
More courses by Christine Vallaure
Master Figma: Getting started the Beginner to Pro Class (2025)
4.7 (2,402 Reviews)
Provider: Udemy
Time: 5h
$74.99
UX/UI Design Principles Compact (Theory + Figma Exercise) (2022)
4.7 (1,538 Reviews)
Provider: Udemy
Time: 2.1h
$64.99
Figma Prototyping: A deep dive for UX/UI Designer (2025)
4.6 (461 Reviews)
Provider: Udemy
Time: 2.8h
$74.99
More Figma courses
Complete Web Design: from Figma to Webflow to Freelancing (2026)
4.7 (22,616 Reviews)
Provider: Udemy
Time: 23.3h
$149.99
Master Figma: Getting started the Beginner to Pro Class (2025)
4.7 (2,402 Reviews)
Provider: Udemy
Time: 5h
$74.99
Figma Prototyping: A deep dive for UX/UI Designer (2025)
4.6 (461 Reviews)
Provider: Udemy
Time: 2.8h
$74.99
Reviews
By Fiorella Ariadna Otero on 10/13/2024
Increíble curso para profundizar en el diseño responsive! Las explicaciones y ejemplos fueron muy claros, sin duda súper necesario aprender estos conceptos para ser mejores diseñadores UXUI. Lo recomiendo completamente para aprender más de diseño responsive!
By Tamara Miladinović on 3/13/2024
The course provided an exceptional learning experience that I thoroughly enjoyed. The content was well-organized, with clear explanations and practical examples that made complex topics easy to understand. I highly recommend this course to anyone interested in deepening their knowledge in this area. Thank you for creating such a valuable learning resource.
By Alex on 1/24/2024
Excellent course well taught, but lots of repeat content from other moonlearning courses. Double-check the lesson breakdown and make sure you’re not paying twice for stuff you’ve already done.
By Juan Andrés Cortés Rojas on 10/21/2023
Me gusto este curso, los contenidos separados en secciones de corta duración hicieron resultara muy fácil seguir el ritmo y comprender lo que se estaba explicando antes de pasar a la siguiente sección. Completamente satisfecho con el curso
By Francis Ebuka David on 9/24/2023
This course is just one of the Best thing that has happened to me. Awwesomly amazing . I have struggled with Autolayout, Fill container, Fixed and Hug content for long. This course simplifies everything. I will recommend this course to everyone who wants to master the theory and practice of design.
By Rachel Yount on 8/17/2023
I initially thought the course length was a little on the skimpy side but I read the reviews and gave it a go! 2.5 hours is enough. This course cleared up the panicky feeling I get when thinking about responsive layouts. The file alone is worth its weight in gold but Christine's calm instruction walked me through. I get it, finally!
By Taylor Adams on 5/12/2023
I watched A LOT of Youtube videos before doing this course and was still having a hard time fully understanding constrains and auto layout in Figma. This is the best explanation I've seen explaining those concepts. I appreciate the type scale info at the end as well. Very valuable course with information that will help me stand out in my job search. Thank you!
By Stacy Jara on 5/1/2023
I really enjoyed this course. I appreciated the material covered and how detailed the instructor was. I would have loved a bit more explanation in certain parts but will simply need to go back and rewatch. I would recommend this course to anyone who is interested in furthering their learning of responsive design.
By Anne on 3/26/2023
It's a great content that helped me understand better about auto layout/constrains and breakpoints. It would be perfect if there are more materials to practice along the way. Christine's voice is wonderful :-)
By Noel Hernandez on 10/21/2022
I LOVE HOW EACH SECTION HAS EXPLICIT INSTRUCTIONS THAT I CAN PRACTICE! I am very pleased at the progress I have made in learning responsive design. Your explanations are very clear and straightforward. Your tone is very calming. I look forward to taking another class.







