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 

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

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

1. Testing a responsive navigation component
2. Documenting a tested component
3. Responsive variants hack
4. Fully responsive pages with breakpoint variables and variant swap NEW
5. Breakpoints and a grid 
6. Don't forget your typography! 
7. Breakpoint Plugin