Figma tutorial: What’s new in Auto layout
summary
Builds a task‑card component and demonstrates concrete changes: negative spacing creates overlapping avatars and a new canvas stacking order sets which avatar sits on top; text baseline alignment fixes icon + countdown text alignment; pink canvas handles adjust padding and spacing interactively; absolute position removes the chevron from auto‑layout flow while constraints keep it pinned top‑right; including strokes in layout forces frames to resize and required tightening avatar gaps. Everything shown is applied to a working card and the techniques consistently produce the promised behavior.
AI-written summary · about
chapters (18)
- 0:00Intro
- 0:15What's new in auto layout
- 0:30New to auto layout? Check out our previous tutorials
- 1:00Link to playground file
- 1:59Update to layer ordering
- 2:33Negative spacing
- 3:00Canvas stacking order
- 4:10Text baseline alignment
- 5:21Update to resizing options
- 6:00Canvas controls
- 6:52Update to padding and alignment controls
- 7:46Absolute position
- 9:26Tip for updating resizing options
- 10:52Tip for adjusting spacing mode
- 12:42Strokes occupy space
- 13:40Absolute position Bonus
- 14:33Use the card design for the UI of the mobile app
- 15:09Recap
related talks
24mInside Figma: The art of being flexible
32mBreaking Barriers: Understanding Layout Between UI Design and Code
28mPushing Figma to its limits
33mStructure your designs with Figma Grid, a new way to use auto layout
43mUnderstanding Layout Between UI Design and Code – Christine Vallaure
01h 03mFigma product launch keynote
25mUnexpected places: Figma as a space for anything and everything
43mDesign Beyond Breakpoints