1# Effect Style API Patterns
2 
3> Part of the [use_figma skill](../SKILL.md). How to create, apply, and inspect effect styles using the Plugin API.
4>
5> For design system context (effect types, variable bindings on effects, gotchas), see [wwds-effect-styles](working-with-design-systems/wwds-effect-styles.md).
6 
7## Contents
8 
9- Listing Effect Styles
10- Creating a Drop Shadow Style
11- Importing Library Effect Styles
12- Applying Effect Styles to Nodes
13 
14## Listing Effect Styles
15 
16```javascript
17/**
18 * Lists all local effect styles.
19 *
20 * @returns {Promise<Array<{id: string, name: string, key: string, effectCount: number}>>}
21 */
22async function listEffectStyles() {
23  const styles = await figma.getLocalEffectStylesAsync();
24  return styles.map(s => ({
25    id: s.id,
26    name: s.name,
27    key: s.key,
28    effectCount: s.effects.length
29  }));
30}
31```
32 
33Full runnable script:
34 
35```javascript
36const results = await listEffectStyles();
37return results;
38```
39 
40## Creating a Drop Shadow Style
41 
42Colors are **RGBA 0–1 range**. `effects` is a read-only array — always reassign, never mutate in place.
43 
44```javascript
45/**
46 * Creates a drop shadow effect style.
47 *
48 * @param {string} name - e.g. "Elevation/200"
49 * @param {{ r: number, g: number, b: number, a: number }} color - RGBA, 0-1 range
50 * @param {{ x: number, y: number }} offset
51 * @param {number} radius - blur radius
52 * @param {number} [spread=0]
53 * @returns {EffectStyle}
54 */
55function createDropShadowStyle(name, color, offset, radius, spread) {
56  const style = figma.createEffectStyle();
57  style.name = name;
58  style.effects = [{
59    type: "DROP_SHADOW",
60    color,
61    offset,
62    radius,
63    spread: spread || 0,
64    visible: true,
65    blendMode: "NORMAL"
66  }];
67  return style;
68}
69```
70 
71Full runnable script:
72 
73```javascript
74const style = createDropShadowStyle(
75  "Elevation/200",
76  { r: 0, g: 0, b: 0, a: 0.15 },
77  { x: 0, y: 4 },
78  12,
79  0
80);
81return { id: style.id, name: style.name };
82```
83 
84## Importing Library Effect Styles
85 
86For effect styles from **team libraries**, use `importStyleByKeyAsync`:
87 
88```javascript
89// Import a library effect style by key
90const shadowStyle = await figma.importStyleByKeyAsync("EFFECT_STYLE_KEY");
91// Apply to a node
92node.effectStyleId = shadowStyle.id;
93```
94 
95`search_design_system` with `includeStyles: true` returns style keys you can import this way. Prefer importing library styles over creating new ones.
96 
97## Applying Effect Styles to Nodes
98 
99```javascript
100/**
101 * Applies an effect style to all nodes on the current page that match a given name pattern.
102 *
103 * @param {string} styleId - The ID of an EffectStyle.
104 * @param {string} nodeNamePattern - Substring match against node names.
105 * @returns {number} - Number of nodes the style was applied to.
106 */
107function applyEffectStyleToMatchingNodes(styleId, nodeNamePattern) {
108  const nodes = figma.currentPage.findAll(n => n.name.includes(nodeNamePattern));
109  let applied = 0;
110  for (const node of nodes) {
111    if ('effectStyleId' in node) {
112      node.effectStyleId = styleId;
113      applied++;
114    }
115  }
116  return applied;
117}
118```
119 
120Full runnable script:
121 
122```javascript
123const applied = applyEffectStyleToMatchingNodes('STYLE_ID', 'Card');
124return { applied };
125```
126