Why It Matters
Styles were Figma's original approach to reusable design values before Variables. Color styles, text styles, effect styles (shadows), and grid styles let you define properties once and apply them everywhere. While Variables offer more power (modes, numbers), Styles remain important for complex text styling and effects that Variables can't fully replicate.
Examples
1
A "Heading/H1" text style defining font, size, weight, line height, and letter spacing together.
2
An "Elevation/Card" effect style combining drop shadow and subtle border.
3
A "Layout/12-Column" grid style for consistent page layouts across screens.
Related Terms
Figma Variables
Reusable values in Figma that can store colors, numbers, strings, and booleans, supporting modes for theming and enabling design tokens directly in Figma.
Design Tokens
Named, platform-agnostic values that store design decisions like colors, spacing, typography, and shadows, enabling consistent styling across design tools and code.
Design System
A comprehensive collection of reusable components, patterns, guidelines, and design tokens that work together to ensure consistency and efficiency across product development.
Style Guide
Documentation that defines the visual language of a product, including color palettes, typography scales, spacing systems, and usage guidelines.
Explore More Design Terms
Browse our complete glossary of Figma and design systems terminology.