Figma Styles and Variables

Styles and Variables store design decisions — colors, typography, spacing, shadows — so you apply them consistently and update them in one place. Think of styles as saved presets and variables as programmable tokens that can change based on context.

What Are Styles?

A Style is a saved set of properties you can apply to any layer. Figma offers four types:

• Color Styles – Saved fill or stroke colors.
• Text Styles – Saved font family, size, weight, line height combinations.
• Effect Styles – Saved shadows and blur settings.
• Grid Styles – Saved layout grid configurations.

Creating and Applying a Color Style

1. Select a shape with the color you want to save.
2. In the right panel, click the four-dot icon next to the fill color.
3. Click + to create a new style.
4. Name it (e.g., Brand/Primary Blue).

To apply it later, select any layer, click the four-dot icon next to fill, and pick the saved style from the list.

Effect Styles: Shadows and Blurs

A drop shadow has six values: X offset, Y offset, blur radius, spread, color, and opacity. Saving these as a style means every card, modal, and button in your design uses the same shadow — not a slightly different one each time.

Card Shadow Style:
  Drop Shadow
  X: 0    Y: 4
  Blur: 16    Spread: 0
  Color: Black at 12% opacity

Tooltip Shadow Style:
  Drop Shadow
  X: 0    Y: 2
  Blur: 8    Spread: 0
  Color: Black at 10% opacity

Updating Styles

Go to the assets panel, right-click any style, and choose Edit style. Change the color or shadow. Every layer in the file using that style updates immediately. This is how a single color change propagates across an entire app design in seconds.

What Are Variables?

Variables are a newer, more powerful system for storing design tokens. A variable stores a raw value and a name. You assign that variable to properties instead of hard-coding values.

Variable: color/brand/primary
  Value: #1A73E8

Any layer using this variable shows #1A73E8.
Change the variable value to #0F62FE, and every layer updates.

Variable Types

• Color – Stores a color value.
• Number – Stores a number (spacing, border radius, opacity, etc.).
• String – Stores text (prototype conditions, content strings).
• Boolean – Stores true or false (show/hide layers in prototypes).

Variable Collections and Modes

Variables are organized into collections. Each collection can have multiple modes. This is how light and dark themes work in Figma.

Collection: Color Tokens
  Mode: Light
    color/background: #FFFFFF
    color/text:       #111827
    color/primary:    #1A73E8

  Mode: Dark
    color/background: #0F172A
    color/text:       #F9FAFB
    color/primary:    #60A5FA

Assign these variables to your layers. To preview dark mode, select a frame and switch the mode to Dark in the right panel. The entire frame updates instantly.

Using Number Variables for Spacing

Collection: Spacing
  spacing/xs:  4
  spacing/sm:  8
  spacing/md:  16
  spacing/lg:  24
  spacing/xl:  32

Apply spacing/md to a frame's padding → padding becomes 16px.
Change spacing/md value to 20 → all frames using it update.

Styles vs Variables: When to Use Each

Use Styles for:
  Text styles (font family + size + weight combinations)
  Effect styles (complex shadows or blurs)
  Grid styles

Use Variables for:
  Colors (especially if you need light/dark modes)
  Spacing and sizing numbers
  Border radius values
  Any value that needs to change between modes or themes

Publishing Styles and Variables

In a Team plan, you can publish styles and variables from one file so other files in the same team can use them. This is called a Team Library. All files subscribe to the library, and when you publish an update, subscribers see a prompt to accept the changes.