figma-console-mcp-skills

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

figma-console-mcp-skills

★ 67 Open GitHub ↗

The most powerful Figma Console MCP capabilities, repackaged as Markdown skills for the native Figma MCP server — design tokens, variables, component analysis, WCAG lint, a11y audits, version history, FigJam & Slides.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Figma Console MCP Skills

**The most powerful [Figma Console MCP](https://github.com/southleft/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](https://github.com/southleft/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/`](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?"](#do-i-need-a-figma-token-mostly-no) 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.

> **⚡ Fastest path — `npx` (any agent: Claude Code, Codex, Cursor, Gemini CLI, …):** one command,
> no manual file copying —
> ```bash
> npx skills add southleft/figma-console-mcp-skills          # install all skills
> npx skills add southleft/figma-console-mcp-skills --list   # preview without installing
> npx skills add southleft/figma-console-mcp-skills --skill figma-export-tokens   # just one
> ```
> Powered by the [`skills`](https://github.com/vercel-labs/skills) CLI — it detects your agent and
> drops each skill into the right place.
>
> **Claude Code plugin** — alternatively, install the whole collection as a plugin:
> ```
> /plugin marketplace add southleft/figma-console-mcp-skills
> /plugin install figma-console-mcp-skills@figma-console-mcp-skills
> ```
> The per-host options below still work if you prefer copying folders manually.

### 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 — open the `skills/` folder, then in Finder/Explorer **right-click the
   `figma-export-tokens` 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](https://support.claude.com/en/articles/12512180-use-skills-in-claude)
   · 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
   `/figma-export-tokens`.

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)

```bash
git clone https://github.com/southleft/figma-console-mcp-skills.git
cd figma-console-mcp-skills
# Skills are self-contained — copy all of them (or pick individual folders) into your skills folder:
cp -R skills/* ~/.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 `/figma-export-tokens`. (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](references/rest-api-setup.md).

---

## The 22 skills

### 🎨 Tokens & Variables — _export, import & manage variables in code-ready formats_
| Skill | What it does |
|---|---|
| [`figma-export-tokens`](figma-export-tokens) | Export Figma variables → DTCG / CSS vars / Tailwind v4–v3 / SCSS / TS / JSON. Resolves aliases + multi-mode. Works on **any plan** (Plugin API, not the Enterprise-only Variables REST API). |
| [`figma-import-tokens`](figma-import-tokens) | Push tokens (DTCG/etc.) **into** Figma as variables, non-destructively (matches by id/key/name). |
| [`figma-setup-design-tokens`](figma-setup-design-tokens) | Bootstrap a whole token system (collection + modes + variables) atomically. |
| [`figma-manage-variables`](figma-manage-variables) | CRUD + fast batch create/update, scopes, code syntax, add/rename modes. |
| [`figma-library-variables`](figma-library-variables) | Discover & import variables from subscribed team libraries. |

### 🧩 Components & Design System
| Skill | What it does |
|---|---|
| [`figma-analyze-component-set`](figma-analyze-component-set) | Extract a variant **state machine** + CSS pseudo-class mapping + per-variant visual diffs for code gen. |
| [`figma-arrange-component-set`](figma-arrange-component-set) | Organize variants into a labeled grid container. |
| [`figma-component-properties`](figma-component-properties) | Add/edit/delete component properties; instantiate + set instance properties. |
| [`figma-design-system-inventory`](figma-design-system-inventory) | One-call unified extraction: tokens + components + styles + visual specs. |
| [`figma-deep-component`](figma-deep-component) | Unlimited-depth component tree with resolved tokens, mainComponent refs, reactions. |

### ♿ Quality & Accessibility — _WCAG 2.2 + design-system audits, run right in the file_
| Skill | What it does |
|---|---|
| [`figma-lint-design`](figma-lint-design) | WCAG 2.2 + design-system quality lint over a node tree. |
| [`figma-audit-accessibility`](figma-audit-accessibility) | Per-component a11y scorecard: state coverage, focus, target size, color-blind sim. |
| [`figma-scan-code-accessibility`](figma-scan-code-accessibility) | axe-core + JSDOM scan of generated HTML (code-side Node script). |
| [`figma-check-design-parity`](figma-check-design-parity) | Compare a Figma node vs a code spec; parity score + discrepancies. |

### 🕓 Versioning & Collaboration — _⌨️ terminal + Figma token required_
| Skill | What it does |
|---|---|
| [`figma-version-history`](figma-version-history) | List versions, snapshot a version, diff two versions. |
| [`figma-generate-changelog`](figma-generate-changelog) | Human-readable markdown changelog between versions. |
| [`figma-blame-node`](figma-blame-node) | Binary-search which version introduced a node/property change (~log₂N requests). |
| [`figma-comments`](figma-comments) | Read / post / reply / delete file comments (with node pinning). |

> ⌨️ **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
| Skill | What it does |
|---|---|
| [`figma-generate-component-doc`](figma-generate-component-doc) | Generate complete component documentation markdown (anatomy, tokens, states, a11y, parity). |
| [`figma-annotations`](figma-annotations) | Read & write designer annotations (specs pinned to nodes) + categories. |
| [`figjam-create-content`](figjam-create-content) | Author FigJam: stickies, connectors, shapes, sections, tables, code blocks, auto-arrange. |
| [`figma-slides`](figma-slides) | Author Figma Slides: create/reorder slides, text/shapes, backgrounds, transitions. |

> `figjam-create-content` only works in a **FigJam** file and `figma-slides` 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`](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`](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](https://github.com/southleft/figma-console-mcp) by
[Southleft](https://southleft.com). MIT licensed — see [LICENSE](LICENSE).

figma-console-mcp-skills

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README