figma-use

Name: figma-use
Author: figma

5.4kinstalls163forks

How to install figma-use?

figma/mcp-server-guide/figma-use

$npx -y skills add figma/mcp-server-guide --skill figma-use

Installs into the current project.

Summary

MANDATORY prerequisite — you MUST invoke this skill BEFORE every use_figma tool call. NEVER call use_figma directly without loading this skill first. Skipping it causes common, hard-to-debug failures. Trigger whenever the user wants to perform a write action or a unique r

Files · 1

View on GitHub

SKILL.md

1	# use_figma — Figma Plugin API Skill
2
3	Use the `use_figma` tool to execute JavaScript in Figma files via the Plugin API. All detailed reference docs live in `references/`.
4
5	Always include `figma-use` in the comma-separated `skillNames` parameter when calling `use_figma`. If this skill was loaded via an MCP resource, you MUST prefix the name with `resource:` (e.g. `resource:figma-use`). This is a logging parameter used to track skill usage — it does not affect execution.
6
7	If Figma MCP tools appear as deferred tools, batch-load all their schemas in a single `ToolSearch` call using the `select:` syntax — e.g. `ToolSearch query="select:use_figma,get_screenshot,get_metadata,create_new_file"`. One round trip beats six.
8
9	If the task involves building or updating a full page, screen, or multi-section layout in Figma from code, also load [figma-generate-design](../figma-generate-design/SKILL.md). It provides the workflow for discovering design system components via `search_design_system`, importing them, and assembling screens incrementally. Both skills work together: this one for the API rules, that one for the screen-building workflow.
10
11	If the task involves creating or building a component in Figma (even a single component), also load [figma-generate-library](../figma-generate-library/SKILL.md). It provides the component creation workflow — variable foundations, variant sets, design token bindings — that `figma-use` alone doesn't cover.
12
13	Before anything, load [plugin-api-standalone.index.md](references/plugin-api-standalone.index.md) to understand what is possible. When you are asked to write plugin API code, use this context to grep [plugin-api-standalone.d.ts](references/plugin-api-standalone.d.ts) for relevant types, methods, and properties. This is the definitive source of truth for the API surface. It is a large typings file, so do not load it all at once, grep for relevant sections as needed.
14
15	IMPORTANT: Whenever you work with design systems, start with [working-with-design-systems/wwds.md](references/working-with-design-systems/wwds.md) to understand the key concepts, processes, and guidelines for working with design systems in Figma. Then load the more specific references for components, variables, text styles, and effect styles as needed.
16
17	## 1. Critical Rules
18
19	1. Use `return` to send data back. The return value is JSON-serialized automatically (objects, arrays, strings, numbers). Do NOT call `figma.closePlugin()` or wrap code in an async IIFE — this is handled for you.
20	2. Write plain JavaScript with top-level `await` and `return`. Code is automatically wrapped in an async context. Do NOT wrap in `(async () => { ... })()`.
21	3. `figma.notify()` throws "not implemented" — never use it
22	3a. `getPluginData()` / `setPluginData()` are not supported in `use_figma` — do not use them. Use `getSharedPluginData()` / `setSharedPluginData()` instead (these ARE supported), or track node IDs by returning them and passing them to subsequent calls.
23	4. `console.log()` is NOT returned — use `return` for output
24	5. Work incrementally in small steps. Break large operations into multiple `use_figma` calls. Validate after each step. This is the single most important practice for avoiding bugs.
25	6. Colors are 0–1 range (not 0–255): `{r: 1, g: 0, b: 0}` = red
26	7. Fills/strokes are read-only arrays — clone, modify, reassign
27	8. Every text edit follows the canonical recipe: load font → `await` → mutate → return affected node IDs. Skipping the load throws `Cannot write to node with unloaded font "<family> <style>"`. The rule covers more than `characters` — it applies to any operation on nodes with unloaded fonts (`appendChild`, `insertChild`, `setBoundVariable`, `setExplicitVariableModeForCollection`, `setValueForMode`, `findAll` callbacks touching text). When mutating existing text, load the node's current fonts via `getStyledTextSegments(['fontName'])`, not a hardcoded default. Inter is preloaded in most environments so other families surface this bug more often — the recipe is the same for every font. Use `await figma.listAvailableFontsAsync()` first if the style string is unverified. See [Canonical text-edit recipe](references/gotchas.md#canonical-text-edit-recipe-font-load--await--mutate--return-ids).
28	9. Pages load incrementally — use `await figma.setCurrentPageAsyn

People who liked this also viewed

6 picks

Type

figma-use

5.4kinstalls163forks

View on GitHub

How to install figma-use?

figma/mcp-server-guide/figma-use

$npx -y skills add figma/mcp-server-guide --skill figma-use

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# use_figma — Figma Plugin API Skill
2
3	Use the `use_figma` tool to execute JavaScript in Figma files via the Plugin API. All detailed reference docs live in `references/`.
4
5	Always include `figma-use` in the comma-separated `skillNames` parameter when calling `use_figma`. If this skill was loaded via an MCP resource, you MUST prefix the name with `resource:` (e.g. `resource:figma-use`). This is a logging parameter used to track skill usage — it does not affect execution.
6
7	If Figma MCP tools appear as deferred tools, batch-load all their schemas in a single `ToolSearch` call using the `select:` syntax — e.g. `ToolSearch query="select:use_figma,get_screenshot,get_metadata,create_new_file"`. One round trip beats six.
8
9	If the task involves building or updating a full page, screen, or multi-section layout in Figma from code, also load [figma-generate-design](../figma-generate-design/SKILL.md). It provides the workflow for discovering design system components via `search_design_system`, importing them, and assembling screens incrementally. Both skills work together: this one for the API rules, that one for the screen-building workflow.
10
11	If the task involves creating or building a component in Figma (even a single component), also load [figma-generate-library](../figma-generate-library/SKILL.md). It provides the component creation workflow — variable foundations, variant sets, design token bindings — that `figma-use` alone doesn't cover.
12
13	Before anything, load [plugin-api-standalone.index.md](references/plugin-api-standalone.index.md) to understand what is possible. When you are asked to write plugin API code, use this context to grep [plugin-api-standalone.d.ts](references/plugin-api-standalone.d.ts) for relevant types, methods, and properties. This is the definitive source of truth for the API surface. It is a large typings file, so do not load it all at once, grep for relevant sections as needed.
14
15	IMPORTANT: Whenever you work with design systems, start with [working-with-design-systems/wwds.md](references/working-with-design-systems/wwds.md) to understand the key concepts, processes, and guidelines for working with design systems in Figma. Then load the more specific references for components, variables, text styles, and effect styles as needed.
16
17	## 1. Critical Rules
18
19	1. Use `return` to send data back. The return value is JSON-serialized automatically (objects, arrays, strings, numbers). Do NOT call `figma.closePlugin()` or wrap code in an async IIFE — this is handled for you.
20	2. Write plain JavaScript with top-level `await` and `return`. Code is automatically wrapped in an async context. Do NOT wrap in `(async () => { ... })()`.
21	3. `figma.notify()` throws "not implemented" — never use it
22	3a. `getPluginData()` / `setPluginData()` are not supported in `use_figma` — do not use them. Use `getSharedPluginData()` / `setSharedPluginData()` instead (these ARE supported), or track node IDs by returning them and passing them to subsequent calls.
23	4. `console.log()` is NOT returned — use `return` for output
24	5. Work incrementally in small steps. Break large operations into multiple `use_figma` calls. Validate after each step. This is the single most important practice for avoiding bugs.
25	6. Colors are 0–1 range (not 0–255): `{r: 1, g: 0, b: 0}` = red
26	7. Fills/strokes are read-only arrays — clone, modify, reassign
27	8. Every text edit follows the canonical recipe: load font → `await` → mutate → return affected node IDs. Skipping the load throws `Cannot write to node with unloaded font "<family> <style>"`. The rule covers more than `characters` — it applies to any operation on nodes with unloaded fonts (`appendChild`, `insertChild`, `setBoundVariable`, `setExplicitVariableModeForCollection`, `setValueForMode`, `findAll` callbacks touching text). When mutating existing text, load the node's current fonts via `getStyledTextSegments(['fontName'])`, not a hardcoded default. Inter is preloaded in most environments so other families surface this bug more often — the recipe is the same for every font. Use `await figma.listAvailableFontsAsync()` first if the style string is unverified. See [Canonical text-edit recipe](references/gotchas.md#canonical-text-edit-recipe-font-load--await--mutate--return-ids).
28	9. Pages load incrementally — use `await figma.setCurrentPageAsyn

People who liked this also viewed

6 picks

Type