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.

 

Constraints

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

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. Fully responsive pages with breakpoint variables and variant swap NEW
  5. Breakpoints and a grid 
  6. Don't forget your typography! 
  7. 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.