Sign up
Take full course

Already a member? Click here


Deep Dive: Auto Layout, Constraints & Breakpoints (2h)


In this class, we will learn everything about how to set up responsive design with Figma. This will be a real deep dive into constraints, auto layout, and, most importantly, rarely discussed breakpoints for your UI Design. Combining those tools, will allow us to really test and document designs and components in line with the actual code settings.

With the 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 really want to brush up on your skills.



  1. What are Constraints in Figma?
  2. Horizontal and Vertical Constraints 
  3. Constraints and grids
  4. Grids and components
  5. Fix position when scrolling
  6. Fun illustrations with constraints 
  7. Limitations of constraints 

Auto Layout

  1. What is auto layout? 
  2. Setting up an auto layout frame
  3. Where can I apply auto layout? 
  4. The auto layout menu
  5. The advanced auto layout menu: spacing, baseline and stacking order
  6. Auto layout resizing 
  7. Building a responsive card with auto layouts resize
  8. Auto layout components and instances
  9. Nesting auto layout frames: Building a navigation
  10. Absolute positioning
  11. More complex auto layout setups
  12. Setting up an entire auto layout page
  13. Same height for all child elements
  14. Stacking options
  15. Is Auto layout flexbox?
  16. Limitations of auto layout (and some solutions)
  17. Fixed aspect ratio images
  18. Setting a minimum width hack

Understanding Breakpoints

  1. One design will not work for all sizes
  2. Think of single components adapting, not entire pages!
  3. Breakpoints in CSS
  4. Which breakpoints should I use?
  5. Setting up breakpoints in Figma


Testing and Documenting in Figma

  1. Testing a responsive navigation component
  2. Documenting a tested component
  3. Responsive variants hack
  4. Breakpoints and a grid 
  5. Don't forget your typography! 
  6. Breakpoint Plugin
Take full course

Already a member? Click here

Join the Newsletter

Sign up and be the first to know about new releases, workshops, and articles.