Design Beyond Breakpoints

on YouTube ↗43m

" summary

Shows how to prototype responsive behavior in Figma using autolayout, component variants, new min/max and wrap settings and Figma Variables (color/number/string/boolean) to swap component variants per mode; demonstrates mixed collections, boolean toggles and aliasing, and documents chosen breakpoints in a playground file. Notes that real container queries aren’t supported in Figma yet, CSS grid and automatic typography are missing, and setup requires team training. Recommends static page representations plus component docs and a plugin (Specs) to hand off to development.

AI-written summary · about

" chapters (10)

1. 0:00Introduction
2. 1:38History of web design
3. 3:20Design-developer collaboration
4. 5:52Figma variables introduction
5. 8:42Using modes for responsiveness
6. 11:57Practical responsive setups
7. 17:13Understanding container queries
8. 20:52Designing for container queries
9. 25:40Documentation and collaboration
10. 30:20Q&A session

" related talks

• 38mCreating Powerful Prototypes with FigmaAna María Zúniga Conte · Nerdearla Chile 2024
• 01h 01mPrototype PlayfullyMiggi Cardona, Miguel (Miggi) Cardona · Commons 2022
• 32mBreaking Barriers: Understanding Layout Between UI Design and CodeChristine Vallaure · Wey Wey Web 2024
• 28mPushing Figma to its limitsChudo Loo, Andrei Iancu, Gleb Sabirzyanov, Vitalii Sologub, Shuaiqi Sun · Config 2021
• 22mArchitecting SubcomponentsNathan Curtis · Schema by Figma 2022 New York City
• 23mHow to create Figma design loved by developersKazuya Seki · Config 2022
• 36mElevate Your React Workflow with FigmaKelly King · reactjsday 2024
• 43mUnderstanding Layout Between UI Design and Code – Christine VallaureChristine Vallaure · Pixel Pioneers 2026