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):

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).

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 —
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 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)

Download this repo: green Code → Download ZIP, then unzip it.
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.
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.)
In a chat with Figma connected, just ask ("export my Figma variables to CSS") or type /figma-export-tokens.