Setting the file. One moment.
Subchapter 12.16
references/working-with-design-systems/wwds-effect-styles.mdMarkdown3 KBView on GitHub
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 be bound to variables, allowing shadow values to participate in a token system.
An EffectStyle has one core writable property beyond the base style fields:
| Property | Type | Notes |
|---|---|---|
name | string | Slash-delimited for grouping (e.g. "Elevation/200") |
effects | ReadonlyArray<Effect> | Read-only array — clone, modify, reassign |
description | string | Inherited from BaseStyleMixin |
An Effect is a discriminated union. The most common types:
type | Key properties |
|---|---|
DROP_SHADOW | color: RGBA, offset: Vector, radius: number, spread: number, visible: boolean, blendMode |
INNER_SHADOW | Same as DROP_SHADOW |
LAYER_BLUR | radius: number, visible: boolean |
BACKGROUND_BLUR | radius: number, visible: boolean |
All colors are in 0–1 range (RGBA), not 0–255.
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.
Assign the style’s id to the node’s effectStyleId. The node’s effects property will then reflect the style’s values.
effects is read-only: You cannot mutate the array in place. Clone it, modify the clone, then reassign: style.effects = [...style.effects, newEffect].{ r: 0, g: 0, b: 0, a: 0.15 } — not hex, not 0–255.getLocalEffectStyles() is deprecated: Always use getLocalEffectStylesAsync().EffectStyle has no effect on any node until you assign its ID to a node.For runnable code examples (listing, creating, applying effect styles), see effect-style-patterns.md.