1# Working with design systems: Effect Styles
2 
3Effect 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.
4 
5Effect 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.
6 
7## Model
8 
9An `EffectStyle` has one core writable property beyond the base style fields:
10 
11| Property      | Type                    | Notes                                                 |
12| ------------- | ----------------------- | ----------------------------------------------------- |
13| `name`        | `string`                | Slash-delimited for grouping (e.g. `"Elevation/200"`) |
14| `effects`     | `ReadonlyArray<Effect>` | **Read-only array** — clone, modify, reassign         |
15| `description` | `string`                | Inherited from `BaseStyleMixin`                       |
16 
17### Effect types
18 
19An `Effect` is a discriminated union. The most common types:
20 
21| `type`            | Key properties                                                                                       |
22| ----------------- | ---------------------------------------------------------------------------------------------------- |
23| `DROP_SHADOW`     | `color: RGBA`, `offset: Vector`, `radius: number`, `spread: number`, `visible: boolean`, `blendMode` |
24| `INNER_SHADOW`    | Same as `DROP_SHADOW`                                                                                |
25| `LAYER_BLUR`      | `radius: number`, `visible: boolean`                                                                 |
26| `BACKGROUND_BLUR` | `radius: number`, `visible: boolean`                                                                 |
27 
28All colors are in 0–1 range (`RGBA`), not 0–255.
29 
30### Variable bindings on effects
31 
32Effect properties that can be bound to variables (via `setBoundVariableForEffect(effect, field, variable)` on a node, or inline when constructing):
33 
34`color`, `radius`, `spread`, `offsetX`, `offsetY`
35 
36Note: `setBoundVariableForEffect` returns a **new** effect object — you must capture it and reassign the `effects` array.
37 
38### Applying an effect style to a node
39 
40Assign the style's `id` to the node's `effectStyleId`. The node's `effects` property will then reflect the style's values.
41 
42## Common gotchas
43 
44- **`effects` is read-only**: You cannot mutate the array in place. Clone it, modify the clone, then reassign: `style.effects = [...style.effects, newEffect]`.
45- **Effects stack in order**: The order of effects in the array matters visually. Drop shadows render bottom-to-top.
46- **Colors are RGBA 0–1**: `{ r: 0, g: 0, b: 0, a: 0.15 }` — not hex, not 0–255.
47- **`getLocalEffectStyles()` is deprecated**: Always use `getLocalEffectStylesAsync()`.
48- **Styles are not automatically applied**: Creating an `EffectStyle` has no effect on any node until you assign its ID to a node.
49 
50## Code patterns
51 
52For runnable code examples (listing, creating, applying effect styles), see [effect-style-patterns.md](../effect-style-patterns.md).
53