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. 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

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. Breakpoints and a grid 
5. Don't forget your typography! 
6. Breakpoint Plugin