Skip to content
UdemyFigmaPaid courseIntermediate levelCertificate

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

icon
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

icon
Quality Score

No CourseDuck member has rated this course yet. Taken it? Give each part a thumbs up or down.

Content Quality
/
Video Quality
/
Qualified Instructor
/
Course Pace
/
Course Depth & Coverage
/

Overall Score : 92 / 100

icon
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

  1. What is auto layout?

  2. Setting up auto layout frames

  3. The auto layout menu

  4. The auto setting

  5. Advanced auto layout menu

  6. Resize settings

  7. Vertical resizing tips

  8. Ignore auto layout

  9. Auto layout components and variables

  10. Setting min and max values

  11. Auto layout wrap

  12. Fixed aspect ratio images (hack)

  13. Learn about nesting: parent-child relationship

  14. Suggest auto layout

  15. Some magic with tables: auto layout and AI

  16. More advanced setup (examples)

  17. Auto layout pages

  18. Auto layout and CSS flexbox

  19. Slot components with auto layout

Constraints

  1. What are constraints in Figma?

  2. Constraints and grids

  3. A quick intro to grids in Figma

Breakpoints & Modes

  1. Introducing CSS breakpoints

  2. Breakpoints in Figma

  3. Modes and screen sizes: a quick intro

  4. Binding variants to modes

  5. Hide and show with booleans

  6. Responsive typography with modes

  • Figma course material file

icon
Udemy Discount

The discount is applied through our link. Open the course from here and Udemy's current promotional price is applied at checkout on most courses, no code to type.

Some courses are excluded from Udemy's promotions. If the price does not drop, clear your browser cookies and use the button again.

icon
Instructor Details

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


icon
More courses by Christine Vallaure

$74.99

$64.99

$74.99

icon
More Figma courses

$124.99

$149.99

$109.99

$74.99

Free

$74.99

icon
Reviews

4.6

844 ratings on Udemy

Select a bar to show only those reviews.Select the bar again to show every rating.

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.

Showing all 10 reviews on CourseDuck

Read all 844 reviews on Udemy