Figma Console MCP Skills

The most powerful Figma Console MCP capabilities,
repackaged as Markdown skills for the native Figma MCP server.

The official Figma MCP server is powerful and general-purpose: it reads designs
(get_design_context, get_metadata, get_variable_defs, get_screenshot, search_design_system)
and writes to Figma through use_figma, which runs Figma Plugin API JavaScript. That flexibility
means it can do a great deal — the harder part is doing each design-systems job well and
repeatably.

This repo packages that know-how. Each directory is a skill — a Markdown playbook plus
ready-to-paste scripts, distilled from the
Figma Console MCP — so your agent reliably handles
design-systems work without reinventing the Plugin API each session: token export/import (DTCG, CSS,
Tailwind…), variable management, component-set analysis, WCAG linting, accessibility audits, version
diffing/changelogs, annotations, comments, FigJam, and Slides. Most run through use_figma; a few
reach data the Plugin API can't (version history, comments) via the Figma REST API, or analyze code
(axe-core).

You do not need to install the Figma Console MCP to use these skills. You only need the native
Figma MCP server and (for the four REST skills) a Figma personal access token.

How it works

A "skill" is a folder containing a SKILL.md with YAML frontmatter (name, description). When your
request matches a skill's description, the agent loads it and follows the playbook. You can also
invoke one explicitly with /skill-name.

• scripts/*.js — ready-to-paste snippets for the native use_figma tool (plain JS, top-level
  await, return for output, inlined inputs). The full Plugin API reference is the official
  figma-use skill.
• scripts/*.mjs / *.sh — runnable Node/bash for the REST and code-side skills.
• A skill's own references/ — extra detail bundled inside that skill's folder, so it travels
  with a single-folder upload. Every skill is self-contained — you don't need anything else from
  the repo. (The top-level references/ is optional background/contributor docs that no
  skill depends on.)

Prerequisite: Always load the official figma-use skill alongside any Plugin-API skill here —
it's the source of truth for the Figma Plugin API surface. These skills add design-systems workflows
on top of it.

Install

A "skill" is just a folder with a SKILL.md file — an open, portable format supported by Claude
Desktop, Claude Code, claude.ai (web), Cursor, OpenAI Codex, and Google Gemini CLI. Pick the path
that matches how you work.

Two one-time prerequisites (both free, no token):

1. Connect Figma. In your AI tool, add the Figma connector and sign in — this is a one-time
   OAuth login (see "Do I need a Figma token?" below).
2. Have the official figma-use skill available. It ships with the Figma integration and carries
   the Figma Plugin API rules these skills build on. These skills extend it.

Option A — Claude Desktop or claude.ai web (no terminal — best for designers)

1. Download this repo: green Code → Download ZIP, then unzip it.

2. Zip a single skill folder — in Finder/Explorer, right-click the export-tokens-figma folder →
   Compress (no terminal needed). Its SKILL.md must sit at the root of the zip.

3. In Claude, open Settings → Capabilities → Skills (Claude Desktop) or Settings → Skills
   (claude.ai), choose Create / upload a skill, upload that zip, and toggle it on. Repeat for each
   skill you want. (Official guide
   · requires a plan with Skills / code-execution enabled.)

4. In a chat with Figma connected, just ask ("export my Figma variables to CSS") or type
   /export-tokens-figma.

   Every skill is self-contained — its SKILL.md and scripts/ carry everything, so single-folder
   zips work with no broken links. This path can't run the 4 REST skills (version history, changelog,
   blame, comments) — they need a terminal (Option B).

Option B — Claude Code (incl. the Code tab inside Claude Desktop), Cursor, etc. (terminal)

git clone https://github.com/southleft/figma-console-mcp-skills.git
cd figma-console-mcp-skills
# Skills are self-contained — copy the ones you want into your skills folder:
cp -R figma-* figjam-* ~/.claude/skills/

This is the most capable setup: the use_figma skills and the shell the 4 REST skills need. Then
ask naturally or type /export-tokens-figma. (The repo's top-level references/ holds canonical docs
for maintainers — the skills don't depend on it.)

Codex / Gemini CLI / other agents

Same folders — drop them in that tool's skills directory (e.g. .codex/skills/, .gemini/skills/;
check the tool's docs). The SKILL.md format is portable across all of them.

Do I need a Figma token? (Mostly no)

No — for the native Figma MCP and 18 of the 22 skills. Connecting Figma uses OAuth: you sign
in to your Figma account once when you add the connector, and there's no token to manage. Everything
that runs through use_figma — tokens, variables, components, lint, accessibility, annotations,
FigJam, Slides, component docs — is authorized automatically. (Figma's MCP doesn't even accept personal
access tokens — OAuth only.)

Yes — only for the 4 REST skills: figma-version-history, figma-generate-changelog,
figma-blame-node, figma-comments. They're the exception because version history and comments
aren't part of the native Figma MCP's tools and can't be reached through use_figma (the Figma
Plugin API has no access to them). So these skills call Figma's REST API directly — and a skill
can't borrow the MCP's OAuth session — so they need your own Figma personal access token, and a
host that can run commands (Option B; they won't run in plain web/desktop chat).

Set it once in your terminal — export FIGMA_TOKEN="figd_…" — then run those skills. The token lives
in your shell environment, never inside a skill or its zip (skills must not contain secrets); the
scripts read $FIGMA_TOKEN at runtime. Full steps (creating the token, scopes) are in
references/rest-api-setup.md.

The 22 skills

🎨 Tokens & Variables — export, import & manage variables in code-ready formats

🧩 Components & Design System

♿ Quality & Accessibility — WCAG 2.2 + design-system audits, run right in the file

🕓 Versioning & Collaboration — ⌨️ terminal + Figma token required

⌨️ These four run shell commands — they need a terminal-capable agent (Claude Code, the Code tab
inside Claude Desktop, Cursor, Codex, Gemini CLI) plus a FIGMA_TOKEN. They do not run in
plain Claude Desktop or claude.ai chat. Every other skill works anywhere the Figma connector does.

📝 Documentation, Annotations, FigJam & Slides

create-figjam-content only works in a FigJam file and build-slides-figma only in a Figma Slides
file (the editor-specific node types throw elsewhere). The token, variable, component, lint, and
a11y skills work in standard Figma design files.

What we deliberately left out (to avoid conflicts)

These overlap with the native Figma MCP's built-in tools, so there's no skill for them — use the
native tool instead:

• Design-to-code / inspect a node → native get_design_context
• Screenshots → native get_screenshot
• File metadata / structure → native get_metadata
• Basic variable defs (default mode) → native get_variable_defs (our token skills go further:
  alias resolution + every mode)
• Component search → native search_design_system
• Code Connect → native Code Connect suite
• Create a new file / diagram → native create_new_file / generate_diagram
• Low-level node create/move/resize/fills/text → already taught by the official figma-use skill

FAQ

Do I need the Figma Console MCP installed? No. These skills run on the native Figma MCP. They're
distilled from the Console MCP's implementation so you get the capabilities without the extra server.

Why is use_figma enough for tokens/variables/components? Because use_figma executes the Figma
Plugin API in the file context — the same API the Console MCP's Desktop Bridge uses. The scripts here
are that logic, rewritten for the use_figma idiom.

Why do four skills need a token? Version history and comments live only in Figma's REST API, which
the Plugin API (and therefore use_figma) can't reach. See
references/rest-api-setup.md.

My script errored on the first use_figma call. Failed scripts are atomic — nothing was applied.
Read the error, fix, retry. See references/use-figma-conventions.md.

Contributing

PRs welcome — new skills, better ports, more output formats. Keep each skill self-contained, mirror
the existing SKILL.md structure (frontmatter + "Skill boundaries" + workflow), and make scripts
follow the use_figma conventions. Run a quick syntax check (node --check wrapped in an async
function for use_figma scripts; bash -n for shell) before opening a PR.

Credits & license

Distilled from the Figma Console MCP by
Southleft. MIT licensed — see LICENSE.