PlugWiki

figma-use skill for Claude: the rules for editing Figma files through the Figma MCP server

Figma's own skill that teaches Claude the rules for writing JavaScript that creates and edits things in a Figma file.

Installs
9.4K
on skills.sh
Stars
2.1K
on GitHub
Files
20
besides SKILL.md
Updated
Oct 2026
last repo commit

The skill is a required companion to the Figma MCP server's use_figma tool, which runs JavaScript in a Figma file through the Plugin API. SKILL.md says to load it before every use_figma call, because skipping it causes hard-to-debug failures.

It holds the rules Claude follows: return data instead of logging, colors in the 0 to 1 range, load fonts before editing text, switch pages once per call, and inspect the file before creating anything. For visible design changes, SKILL.md also says to load figma-generate-design, and figma-generate-library for reusable libraries. It needs the Figma MCP server connected.

Good for

  • Designers and developers who want Claude to build or edit frames, components and variables in Figma
  • Teams keeping a design system and tokens in Figma
  • People who already use the Figma MCP server and hit hard-to-debug failures

Install figma-use

Claude Code

  1. 1

    Copy this prompt.

    Install the figma-use skill in Claude Code. Run this command:

claude plugin install figma@claude-plugins-official

Then check that it loaded and tell me how to use it.
  2. 2

    Paste it into Claude Code. It shows the change and asks before running it.

Pick one route. The plugin installs the figma plugin: the Figma MCP server settings plus 16 skills (counted from the repo tree), including figma-generate-design and figma-generate-library, which SKILL.md tells Claude to load alongside this skill. The skills CLI route installs the three skills but not the MCP server, so add the server too. The README marks the skills as Beta.

From the project README. Source.

What's in the skill

When it loads

**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. create/edit/delete nodes, set up variables or tokens, build components and variants, modify auto-layout or fills, bind variables to properties, or inspect file structure programmatically.

Sections in SKILL.md

  1. 1. Critical Rules
  2. 2. Page Rules (Critical)
  3. 3. return Is Your Output Channel
  4. 4. Editor Mode
  5. 5. Efficient APIs — Prefer These Over Verbose Alternatives
  6. node.query(selector) — CSS-like node search
  7. node.set(props) — batch property updates
  8. figma.createAutoLayout(direction?, props?) — auto-layout frames
  9. node.placeholder — shimmer overlay for AI-in-progress feedback
  10. await node.screenshot(opts?) — inline screenshots
  11. 6. Incremental Workflow (How to Avoid Bugs)
  12. Key rules
  13. The pattern
  14. Suggested step order for complex tasks
  15. What to validate at each step
  16. 7. Error Recovery & Self-Correction

Key facts

Author
Figma (vendor's own repo)
License
No LICENSE file in the repo tree. The README says that using the Figma MCP server and related resources, including these skills, means you agree to the Figma Developer Terms
Installs on skills.sh
9,405 (Nov 2, 2026)
GitHub stars
2,138 for the whole figma/mcp-server-guide repo (Nov 2, 2026)
Last repo commit
Oct 28, 2026
Audits on skills.sh
Gen Agent Trust Hub: pass, Socket: pass, Snyk: pass
What it includes
21 files including SKILL.md: 20 reference files, no .py, .js or .sh files
Part of
The figma plugin: 16 skill folders under skills/ (counted from the repo tree), plus the Figma MCP server settings
Needs
The Figma MCP server (use_figma tool) and a Figma account
Status
Skills are in Beta, per the README

What it includes

  • Return data, 0-1 colors, load fonts, pages, sizing

    Rules for use_figma code: use return to send data back, no figma.closePlugin or async wrapper, colors from 0 to 1, fills are read-only arrays, a font-load recipe before text edits and async page switching.

    Try: “Use figma-use to build a pricing card with auto layout in my file.”

    Read · 1. Critical rules

  • Switch pages once per call; fan out in parallel

    For multi-page work, split into one use_figma call per page and send them together in one message.

    Read · 2. Page rules

  • Every write returns node IDs and status

    The agent sees only the returned value, so scripts that create or change nodes must return their IDs.

    Read · 3. Return is the output channel

  • Design, FigJam and Slides differ

    Tells the editor from the URL (design, board or slides) and lists which node types each mode allows or blocks.

    Read · 4. Editor mode

  • node.query, node.set, createAutoLayout, placeholder, screenshot

    Shorter ways to search nodes, update properties in batch, build auto-layout frames, show a shimmer placeholder while building and take inline screenshots.

    Read · 5. Efficient APIs

  • Inspect, build a skeleton, fill in, validate

    Inspect the file first, build top-down with placeholders, batch retry-safe work, return validation evidence and fix before moving on.

    Read · 6. Incremental workflow

  • Retry rules and a table of common errors

    Follows the safeToRetryWithoutCanvasRead flag, then uses get_metadata and get_screenshot to check structure and looks.

    Read · 7. Error recovery

  • Pre-flight list, file discovery scripts, 20 reference files

    References cover gotchas, common patterns, the Plugin API typings and index, component, variable, text style and effect style patterns, and a working-with-design-systems set.

    Files · 8 to 10. Checklist, conventions, reference docs

  • Runs the JavaScript in your Figma file

    Provided by the Figma MCP server, not by this skill. SKILL.md says to include figma-use in the skillNames parameter on every call.

    Write · use_figma (Figma MCP tool)

From the official docs

Permissions

Medium risk

What it can do

  • Read your data
  • Create and change things
  • Delete things
  • Read-only mode

Watch out for

  • Claude can change and delete things in your Figma files

    The description covers creating, editing and deleting nodes, setting up variables and building components. Work in a copy or a branch of an important file, and check results with the screenshot step. github.com

  • Read calls have rate limits

    The README says Starter plans and View or Collab seats on paid plans are limited to up to 6 tool calls per month for read tools, and Dev or Full seats have per-minute limits. Write tools are exempt from the limits. github.com

  • Write to canvas is free only during the beta

    The README says writing to the canvas will eventually be a usage-based paid feature. Image generation also uses Figma AI credits, and the README says the agent should ask permission and disclose that first. github.com

  • The plugin bundles the Figma MCP server

    The figma plugin ships a .mcp.json that points to https://mcp.figma.com/mcp with a plugin-bundle header, along with 16 skills. The repo tree shows no hooks. The skills CLI route installs only skills, and you add the MCP server yourself. github.com

Security advisories

No published security advisories as of Nov 2, 2026.

Technical details
Turning on read-onlyNo read-only mode in the skill. SKILL.md says read-only use_figma calls need neither companion skill.
Talks tomcp.figma.com (Figma MCP server)
Sign-in and keysSign in to Figma when the Figma MCP server asks. The skill itself holds no key.
Scopes

  • Through the Figma MCP server, Claude runs JavaScript that can create, edit and delete nodes in your Figma files

  • Reads file structure, variables and screenshots from your Figma files

Questions

What does the figma-use skill do?

It teaches Claude how to write JavaScript for the Figma MCP server's use_figma tool, which creates and edits things in a Figma file. Without it, SKILL.md says, calls fail in hard-to-debug ways.

How do I install it?

Use the install box at the top of this page. In Claude Code the plugin route installs the Figma MCP server settings and all 16 Figma skills; the skills CLI route installs three skills only.

Do I need the Figma MCP server too?

Yes. The skill is instructions for the use_figma tool, and that tool comes from the Figma MCP server. The Figma plugin bundles the server settings with the skills.

Which other Figma skills does it need?

For visible design changes SKILL.md says to load figma-generate-design as well, and for reusable components, variables or styles it says to load figma-generate-library instead. Read-only calls need neither. See figma-generate-design and figma-generate-library.

Is it free?

The skill is. The README says write to the canvas is free during the beta and will eventually be usage-based and paid, and that read tools have rate limits that depend on your plan and seat.

Does it work in FigJam and Slides?

SKILL.md covers design files, FigJam and Slides, and explains which node types each allows. It points to figma-use-slides for Slides-specific guidance.

Is it safe?

Claude runs scripts that can change or delete content in your Figma files, so try it on a copy first. Image generation uses Figma AI credits, and the README says the agent should ask before using them.

Is this made by Figma?

Yes. It lives in Figma's own mcp-server-guide repo, together with the Figma MCP server settings and its other skills.

Information

updated Nov 2, 2026

Repository
figma/mcp-server-guide
Folder
skills/figma-use

figma/mcp-server-guideskills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 3
  1. figma-use SKILL.md · github.com
  2. Figma MCP server guide README · github.com
  3. Figma plugin .mcp.json · github.com

Updated Nov 2, 2026.