What is Figma Console MCP Skills?
Figma Console MCP Skills is a repository of self-contained skills for the official Figma MCP server. Each skill is a SKILL.md playbook with ready-to-paste scripts for tokens, variables, components, accessibility, version history, FigJam and Slides. It is MIT licensed and does not need the Figma Console MCP installed.
Figma Console MCP Skills is a repository of skills for the native Figma MCP server. Each folder holds a SKILL.md playbook, ready-to-paste scripts and its own references, so a single folder works on its own.
The skills are distilled from the Figma Console MCP, but you do not need that server. The README says you only need the native Figma MCP, plus a personal access token for four skills that call the REST API.
Most skills run through use_figma, the native tool that executes Figma Plugin API JavaScript inside the file. Load the official figma-use skill alongside them, because it holds the Plugin API rules they build on.
What changes in your agent's output
- Variables leave Figma as real token files, with aliases resolved and every mode included, instead of default-mode values only.
- Token changes go back into Figma without overwriting existing variables, matched by id, key or name.
- Components get a variant state machine, mapped CSS pseudo-classes and per-variant visual diffs your agent can code against.
- Designs are linted against WCAG 2.2 and design-system rules, and each component gets an accessibility scorecard.
- Version history becomes a readable changelog, and comments or annotations are read and written from the agent.
The skills by group
The README lists 22 skills in five groups. A few need a terminal and a Figma token, while the rest work anywhere the Figma connector does.
| Group | What it covers | Skills in README |
|---|---|---|
| Tokens and variables | Export, import, set up and manage variables | 5 |
| Components and design system | Variant analysis, properties, inventory, deep component trees | 5 |
| Quality and accessibility | WCAG 2.2 lint, accessibility scorecards, code scans, parity | 4 |
| Versioning and collaboration | Version history, changelog, blame, comments | 4 |
| Docs, annotations, FigJam, Slides | Component docs, annotations, FigJam content, Slides | 4 |
Who Figma Console MCP Skills is for
Best for
- Design-systems teams that want tokens in code-ready formats from any Figma plan.
- Designers who maintain variables, component sets and annotations and want an agent to do the repetitive passes.
- Developers who need an accessibility or parity check between a Figma node and a code spec.
- Teams already on the native Figma MCP who want repeatable playbooks, as in UI/UX Design System.
Not for
- Plain design-to-code from a node or screenshots. The README leaves that to the native tools in the Figma MCP server.
- Browser-only chat for the four REST skills. They run shell commands, so they need a terminal-capable agent.
- Anyone expecting a bridge server. This repo ships Markdown and scripts, not an MCP server.
Use it with UiChemy
These skills keep tokens, components and annotations in order inside Figma. UiChemy's Figma to WordPress product then turns the finished design into an editable WordPress page. For tokens in the handoff, see Design Systems MCP. Click Get Started on uichemy.com.
How to install Figma Console MCP Skills: Design-System Skills for Figma
git clone https://github.com/southleft/figma-console-mcp-skills.gitConnect Figma
Add the Figma connector in your AI tool and sign in once with OAuth. Make sure the official
figma-useskill is available, since it ships with the Figma integration and carries the Plugin API rules.Clone the repository
Run
git clone https://github.com/southleft/figma-console-mcp-skills.gitand open the folder. The skills sit in theskills/directory.Copy the skills
Copy all of them, or only the folders you need, into your agent's skills folder. For Claude Code that is
cp -R skills/* ~/.claude/skills/. The README says other agents use the same folders, for example.codex/skills/or.gemini/skills/.Or use the plugin route
In Claude Code you can instead run
/plugin marketplace add southleft/figma-console-mcp-skills, then/plugin install figma-console-mcp-skills@figma-console-mcp-skills.Set a token for the REST skills
Only figma-version-history, figma-generate-changelog, figma-blame-node and figma-comments need one. Export it in your shell with
export FIGMA_TOKEN="figd_...". Never place it inside a skill folder.Upload one skill in Claude Desktop or web
Zip a single skill folder so SKILL.md sits at the zip root, then upload it under Settings, Capabilities, Skills. The four REST skills cannot run this way.
Check that it loaded
With Figma connected, ask your agent to export your Figma variables to CSS, or type /figma-export-tokens. It should read the variables with use_figma and write token files.
Key features
- Token export in ten formatsfigma-export-tokens reads variables through the Plugin API and writes DTCG, CSS variables, Tailwind v4 or v3, SCSS, TypeScript, flat or nested JSON, Style Dictionary or Tokens Studio. A bundled Node script does the conversion the same way every run.
- Any-plan variable readsVariables come through the Plugin API, not the Enterprise-only Variables REST API. Aliases and multi-mode values resolve, which the default-mode variable definitions in the native server drop.
- Non-destructive token importfigma-import-tokens pushes DTCG and similar token files into Figma as variables. It matches existing variables by id, key or name so nothing is overwritten blindly.
- Token system bootstrapfigma-setup-design-tokens creates a collection, its modes and its variables in one atomic script. A failed script applies nothing, so a retry starts clean.
- Variable managementfigma-manage-variables covers create, update and delete, fast batch edits, scopes, code syntax and adding or renaming modes. figma-library-variables imports variables from subscribed team libraries.
- Component-set analysisfigma-analyze-component-set extracts a variant state machine, a CSS pseudo-class mapping and per-variant visual diffs for code generation. Other skills arrange variants into a grid and edit component properties.
- WCAG 2.2 lint and accessibility auditsfigma-lint-design checks a node tree against WCAG 2.2 and design-system rules. figma-audit-accessibility scores each component on state coverage, focus, target size and color-blind simulation.
- Code-side checksfigma-scan-code-accessibility runs axe-core and JSDOM over generated HTML. figma-check-design-parity compares a Figma node with a code spec and reports a parity score and discrepancies.
- Version history and blameFour REST skills list and diff versions, write a markdown changelog, find which version changed a node with a binary search, and handle file comments. They need a Figma token.
- Docs, FigJam and Slidesfigma-generate-component-doc writes component documentation, figma-annotations reads and writes annotations, and the FigJam and Slides skills author stickies, connectors, slides and transitions.
Frequently asked questions
What is Figma Console MCP Skills?
It is a GitHub repository of Markdown skills for the native Figma MCP server. Each skill pairs a SKILL.md playbook with ready-to-paste scripts for design-systems work: token export and import, variable management, component analysis, WCAG linting, version history, annotations, FigJam and Slides. The skills are distilled from the Figma Console MCP.
Do I need the Figma Console MCP installed?
No. The README states that the skills run on the native Figma MCP server and that you do not need the Figma Console MCP. You need the Figma connector signed in with OAuth, the official figma-use skill, and a personal access token only for the four REST skills.
How do I install Figma Console MCP Skills?
Clone the repository with git clone, then copy the folders from skills/ into your agent's skills folder. You can copy every skill or just the ones you need. Each folder is self-contained, so a single folder also works when zipped for upload.
Which AI agents can use these skills?
The README calls the SKILL.md format portable and names Claude Desktop, Claude Code, claude.ai on the web, Cursor, OpenAI Codex and Google Gemini CLI. Agents with a terminal can run every skill, while plain chat apps cannot run the four REST skills that need shell commands.
Do I need a Figma token?
Mostly no. Connecting Figma uses OAuth, and the README says that covers the native server and most of the skills. Only version history, changelog, blame and comments need a personal access token, because that data lives in the REST API. Keep the token in your shell environment, not in a skill folder.
Can it export Figma variables to Tailwind or CSS?
Yes. The figma-export-tokens skill reads variables through the Plugin API and converts them with a bundled Node script. Formats include DTCG, CSS variables, Tailwind v4 and v3, SCSS, TypeScript, JSON, Style Dictionary and Tokens Studio. Aliases and multiple modes are resolved, and it works on any Figma plan.
Which tasks are left to the native Figma MCP tools?
The README leaves design-to-code and node inspection, screenshots, file metadata, basic variable definitions, component search, Code Connect and new file creation to the native tools. If you also want a community bridge with its own tools, compare Figma UI MCP.
What license does Figma Console MCP Skills use?
The repository is MIT licensed, with a LICENSE file in the root. You can copy the skill folders into a project or fork the collection. Keep the license notice with any folders you redistribute.