Typography and gradients deep dive and demos
summary
Shows how Figma now lets designers bind gradient stops to variables and save them as a single style that switches across modes (example: morning/afternoon/evening theme updates every stop). Demonstrates using number and string variables for font family, size, weight and line height, plus primitive → semantic aliasing to change a global font across many styles. Live demos include switching device modes and a banner component where gradients and typography update instantly, proving the system works.
AI-written summary · about
chapters (8)
- 0:00Intro
- 0:22Variable recap
- 2:18Gradient Demo
- 4:54Variables
- 7:58Binding variables to text
- 9:37Best practices
- 15:12Creating a style
- 17:45Wrap up
related talks
13mBest practices for migrating to variable fonts
21mCreate expressive and readable typography with variable fonts
29mAdd Character to Your Site
45mDesign System Typography: Intent, Application, and Scale
23mUsing Figma beyond and above in design teams
35mDesign Tokens for Cross-platform Design Systems
36mVariable Fonts and Dynamic Typography with CSS
31mUI details that connect