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.
- What are Constraints in Figma?
- Horizontal and Vertical Constraints
- Constraints and grids
- Grids and components
- Fix position when scrolling
- Fun illustrations with constraints
- Limitations of constraints
- Auto layout update during Config 2023 overview NEW
- What is auto layout?
- Setting up an auto layout frame
- Where can I apply auto layout?
- The auto layout menu
- The advanced auto layout menu: spacing, baseline and stacking order
- Auto layout resizing
- Building a responsive card with auto layouts resize
- Auto layout components and instances
- Nesting auto layout frames: Building a navigation
- Absolute positioning
- More complex auto layout setups
- Padding and spacing with variables NEW
- Setting min/max width NEW
- auto layout wrap NEW
- Setting up an entire auto layout page NEW
- Same height for all child elements
- Stacking options
- Is Auto layout flexbox?
- Limitations of auto layout (and some solutions)
- Fixed aspect ratio images
- Setting a minimum width hack
- One design will not work for all sizes
- Think of single components adapting, not entire pages!
- Breakpoints in CSS
- Which breakpoints should I use?
- Setting up breakpoints in Figma
Testing and Documenting in Figma
- Testing a responsive navigation component
- Documenting a tested component
- Responsive variants hack
- Fully responsive pages with breakpoint variables and variant swap NEW
- Breakpoints and a grid
- Don't forget your typography!
- Breakpoint Plugin
Join the Newsletter
Sign up and be the first to know about new releases, workshops, and articles.