Styles, Variables & Design Tokens
Create Color Styles for brand and neutrals. Create Text Styles for Heading / Body / Caption. Apply styles from the style picker — never hardcode random hex or font sizes on every layer.
01Text and color styles
Create Color Styles for brand and neutrals. Create Text Styles for Heading / Body / Caption. Apply styles from the style picker — never hardcode random hex or font sizes on every layer.
02Variables (design tokens)
Figma Variables store colors, numbers (spacing, radius), strings, and boolean values. Modes support light/dark themes from one set of tokens.
Map variables to CSS custom properties or Tailwind theme tokens during handoff so design and code share the same language.
- color/bg/primary, color/text/muted
- space/100 = 4, space/200 = 8, space/400 = 16
- radius/sm, radius/md, radius/pill
03Effect styles
Save drop shadows and blurs as Effect Styles (e.g. elevation/sm, elevation/lg) so cards and modals share consistent depth.
Real-life example: Tokens are the recipe book. Styles and variables stop every cook from inventing a new spice mix for the same dish.