Agent skill · Figma

Figma Use skill for Claude Code, Codex and Cursor

Required primer for the Figma MCP write tool so edits to Figma files work reliably.

Officialname: figma-use★ 2.1k (repo)pushed 2026-10-20SKILL.md on GitHubchecked 2026-11-07

What it does, in the publisher's words

**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 read action that requires JavaScript execution in the Figma file context — e.g.

The description field of the SKILL.md. The agent reads only this at startup and decides from it when to load the full skill.

Install Figma Use

The skills CLI copies the skill into the folder of each agent you pick (Claude Code, Codex, Cursor, Copilot, Gemini CLI, OpenCode, Windsurf...). Add -g for all projects. Needs Node.js 22.20+. docs

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

Copy the skill folder into ~/.claude/skills (all projects) or .claude/skills (this repo). Claude Code picks it up without a restart. docs

npx skills add figma/mcp-server-guide --skill figma-use -a claude-code

# or by hand:
git clone --depth 1 https://github.com/figma/mcp-server-guide.git /tmp/figma-use-src
cp -r /tmp/figma-use-src/skills/figma-use ~/.claude/skills/figma-use

Download the skill folder, zip it, then Customize > Skills > + > Create skill > Upload a skill. Code execution must be on (Settings > Capabilities). docs

git clone --depth 1 https://github.com/figma/mcp-server-guide.git /tmp/figma-use-src
cp -r /tmp/figma-use-src/skills/figma-use ./figma-use
zip -r figma-use.zip figma-use

Codex reads skills from .agents/skills in the repo or ~/.agents/skills. Type $ in Codex to use one. docs

npx skills add figma/mcp-server-guide --skill figma-use -a codex

gh skill (GitHub CLI 2.90+, preview) installs it for Copilot in VS Code, the CLI and the cloud agent. Copilot also reads .github/skills and ~/.copilot/skills. docs

gh skill install figma/mcp-server-guide figma-use

Cursor reads .cursor/skills, .agents/skills and ~/.cursor/skills (and .claude/skills). It does not install loose skills from a GitHub URL, so copy it in. docs

npx skills add figma/mcp-server-guide --skill figma-use -a cursor

Installs from the GitHub repo; --path picks this skill out of the repo. Default scope is user (all projects). docs

gemini skills install https://github.com/figma/mcp-server-guide.git --path skills/figma-use

OpenCode reads .opencode/skills, ~/.config/opencode/skills and the Claude and .agents folders. docs

npx skills add figma/mcp-server-guide --skill figma-use -a opencode

Windsurf (now Devin Desktop) reads .devin/skills, .windsurf/skills and ~/.codeium/windsurf/skills. docs

npx skills add figma/mcp-server-guide --skill figma-use -a windsurf

Works with

Claude Code, Claude.ai and Claude Desktop, Codex, GitHub Copilot, Cursor, Gemini CLI, OpenCode, Windsurf and other agents that read the open Agent Skills format.

Uses disable-model-invocation in its frontmatter: Claude Code extensions to the Agent Skills format. Other agents load the skill but may not honor that field.
Bundles 1 TypeScript script the agent can run, so it needs TypeScript on the machine. In the Claude apps, code execution must be on.

What's in the SKILL.md

22 sections

1. Critical Rules
2. Page Rules (Critical)
3. return Is Your Output Channel
4. Editor Mode
5. Efficient APIs — Prefer These Over Verbose Alternatives
node.query(selector) — CSS-like node search
node.set(props) — batch property updates
figma.createAutoLayout(direction?, props?) — auto-layout frames
node.placeholder — shimmer overlay for AI-in-progress feedback
await node.screenshot(opts?) — inline screenshots
6. Incremental Workflow (How to Avoid Bugs)
Key rules
The pattern
Suggested step order for complex tasks
What to validate at each step
7. Error Recovery & Self-Correction
When the script succeeds but the result looks wrong
8. Pre-Flight Checklist
9. Discover Conventions Before Creating
Quick inspection scripts
10. Reference Docs
11. Snippet examples

Bundled files

references/api-reference.md
references/common-patterns.md
references/component-patterns.md
references/effect-style-patterns.md
references/gotchas.md
references/plugin-api-patterns.md
references/plugin-api-standalone.d.ts
references/plugin-api-standalone.index.md
references/text-style-patterns.md
references/validation-and-recovery.md
references/variable-patterns.md
references/working-with-design-systems/wwds-components--creating.md
references/working-with-design-systems/wwds-components--using.md
references/working-with-design-systems/wwds-components.md
references/working-with-design-systems/wwds-effect-styles.md
references/working-with-design-systems/wwds-text-styles.md
references/working-with-design-systems/wwds-variables--creating.md
references/working-with-design-systems/wwds-variables--using.md
references/working-with-design-systems/wwds-variables.md
references/working-with-design-systems/wwds.md

Loaded only when the instructions point to them.

Facts

Skill name: figma-use
Publisher: Figma (official)
Repo: figma/mcp-server-guide
SKILL.md size: 4,151 words, 379 lines
Bundled files: 20, 1 scripts (TypeScript), 19 docs
Repo stars: 2.1k (as of 2026-10-24)
SKILL.md checked: 2026-11-07

Pairs with the Figma MCP server: the server gives the agent the tools, the skill teaches it how to use them.

More skills from figma/mcp-server-guide

Figma Code Connect: Creates Code Connect files that map Figma components to their real code snippets.
Figma Design to Code: Turns a Figma frame into code using the Figma MCP server's design context.
Figma Generate Design: Recreates an app page or layout from code as a design inside Figma.

Related frontend & design skills

FAQ

What does the figma-use skill do?+

Required primer for the Figma MCP write tool so edits to Figma files work reliably. In its own SKILL.md, Figma describes it as: "**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."

How do I install the figma-use skill?+

Run npx skills add figma/mcp-server-guide --skill figma-use and pick your agents, or use the tab for your agent above. In Claude Code the skill ends up in ~/.claude/skills/figma-use/SKILL.md; in Codex and Cursor in .agents/skills/figma-use/.

Does Figma Use work in Codex, Cursor and Copilot, or only Claude?+

It's a standard SKILL.md, so any agent that reads the Agent Skills format can use it: Claude Code, the Claude apps, Codex, GitHub Copilot, Cursor, Gemini CLI, OpenCode, Windsurf and more. It also sets disable-model-invocation, which are Claude Code extensions; other agents may ignore it.

Who maintains Figma Use?+

Figma, the company or project behind it, in the figma/mcp-server-guide repo on GitHub, last pushed 2026-10-20.

Read a skill's SKILL.md and scripts before you install it: skills aren't verified by any agent vendor. Claude skills marketplace · How to install skills · MCP servers