Working with design systems: Effect Styles

Effect styles in Figma are named, reusable definitions of one or more visual effects — drop shadows, inner shadows, and blurs. They are the closest equivalent to a shadow or elevation token in a design system.

Effect styles are distinct from variables. There is no single variable type that represents a shadow. However, individual numeric and color properties within an effect can be bound to variables, allowing shadow values to participate in a token system.

Model

An EffectStyle has one core writable property beyond the base style fields:

Effect types

An Effect is a discriminated union. The most common types:

All colors are in 0–1 range (RGBA), not 0–255.

Variable bindings on effects

Effect properties that can be bound to variables (via setBoundVariableForEffect(effect, field, variable) on a node, or inline when constructing):

color, radius, spread, offsetX, offsetY

Note: setBoundVariableForEffect returns a new effect object — you must capture it and reassign the effects array.

Applying an effect style to a node

Assign the style's id to the node's effectStyleId. The node's effects property will then reflect the style's values.

Common gotchas

• effects is read-only: You cannot mutate the array in place. Clone it, modify the clone, then reassign: style.effects = [...style.effects, newEffect].
• Effects stack in order: The order of effects in the array matters visually. Drop shadows render bottom-to-top.
• Colors are RGBA 0–1: { r: 0, g: 0, b: 0, a: 0.15 } — not hex, not 0–255.
• getLocalEffectStyles() is deprecated: Always use getLocalEffectStylesAsync().
• Styles are not automatically applied: Creating an EffectStyle has no effect on any node until you assign its ID to a node.

Code patterns

For runnable code examples (listing, creating, applying effect styles), see effect-style-patterns.md.