By the end of this lesson you can
- Create colour, text, effect and grid styles.
- Decide when to use styles and when to use variables.
- Build a type scale as text styles.
The idea
Styles save sets of visual properties for reuse: colour fills, text settings, effects such as shadows, and layout grids. Like components, changing a style updates everything that uses it.
Text styles
A text style stores font family, weight, size, line height and letter spacing. Build your type scale from Stage 1 as text styles: Display, Heading 1, Heading 2, Body, Body small, Caption, Label. Name them by role, not by size ("Heading 2", not "24 bold").
Colour and effect styles
Colour styles store fills, including gradients and images. Effect styles store shadows and blurs, useful for consistent elevation levels. Grid styles store layout grids for each breakpoint.
Styles and variables
Variables are best for single values that need modes (colours, spacing). Styles are best for combinations of properties (a text style with several settings, a shadow with several layers) and for things variables cannot hold, such as gradients. Many teams use colour variables plus text and effect styles. Text styles can also reference variables for their values.
Why it matters in real projects
Styles keep typography and visual effects consistent across a whole product. They make updates fast, communicate the type scale to developers and help other designers pick the right option instead of guessing. Without them, files quickly fill with near-duplicate sizes and shadows.
A realistic example
An audit of a startup's Figma file finds 31 different text size and weight combinations. The designer defines eight text styles from a type scale and three shadow styles for elevation.
Using Figma's selection tools, they find every text layer and apply the nearest style. The file now uses eight text styles consistently. Developers map them to eight CSS classes, and the product looks more polished without any new design work.
Step by step
Define a type scale
Choose sizes, weights and line heights for each role.
Create text styles
Make a text style for each role, named by purpose.
Create effect styles
Define two or three elevation shadows.
Create grid styles
Save layout grids for phone, tablet and desktop.
Apply everywhere
Replace loose values with styles.
Document
Make a reference page showing each style.
Common mistakes
Mistake Naming styles by appearance.
Instead Name by role so they survive design changes.
Mistake Too many text styles.
Instead Keep the scale small and purposeful.
Mistake Leaving unstyled text in files.
Instead Audit and apply styles regularly.
Check your understanding
Choose an answer, then check it. There is an explanation either way.
Practice exercise
Exercise · about 45 min
Style library
Create a small style library for a personal project.
Steps
- Create six to eight text styles from a type scale.
- Create two shadow styles.
- Create grid styles for two breakpoints.
- Build a reference page showing every style.
Deliverable
A style library with a reference page.
Self-assessment
Tick each item when it is true of your exercise. Be honest; this is for you.
4 items
Summary
- Styles save sets of visual properties for reuse.
- Build your type scale as text styles named by role.
- Use variables for single values with modes, styles for combinations.
- Styles keep products consistent and handoff clear.
Further reading
Third-party sources, chosen for reliability. They open in a new tab.
- Typography (opens in a new tab)Material Design 3
- Elevation (opens in a new tab)Material Design 3
Your notes
Marking complete updates your course and roadmap progress.