Figma Console MCP - Turn Your Design System Into a Living API

MCP Apps are rich, interactive UI panels that render directly inside your AI assistant. Instead of receiving plain text responses, you get fully interactive applications — with search, filtering, click-to-copy, and real-time data refresh.

Experimental — MCP Apps use the ext-apps protocol extension and require an MCP client with ext-apps support. The protocol may evolve.

How MCP Apps Work

MCP Apps extend the Model Context Protocol with a UI layer. When an AI tool returns a result, it can also include an interactive HTML application that renders inline in the conversation. Key concepts:

Server-side tools register with the MCP server and handle data fetching
App-only tools are hidden from the AI model and callable only from the UI
Resource URIs point the host to the HTML application to render
App SDK (@modelcontextprotocol/ext-apps) handles the lifecycle, theming, and communication

Available Apps

Token Browser

Browse all design tokens from your Figma file in an interactive table. Features:

Organized by variable collection with expandable sections
Filter by type (Colors, Numbers, Strings) and search by name
Per-collection mode columns (Light, Dark, Custom) matching Figma’s layout
Color swatches with hex/rgba values and alias reference resolution
Click any token name or value to copy it to your clipboard

Usage:

Browse the design tokens in the current file

The AI calls figma_browse_tokens which returns a brief summary to the conversation and renders the full interactive Token Browser inline. The tool auto-detects the current file from your connected browser tab — no URL required.

Design System Dashboard

Audit your design system with a Lighthouse-style health scorecard rendered inline. Features:

Overall weighted score (0–100) with six category gauges: Naming, Tokens, Components, Accessibility, Consistency, Coverage
Expandable category sections with individual findings, severity indicators, and actionable details
Diagnostic locations linking findings to specific variables, components, or collections
Tooltips explaining each check’s purpose and scoring criteria
Refresh button to re-run the audit without consuming AI context

Usage:

Audit the design system in the current file

The AI calls figma_audit_design_system which returns a brief text summary and renders the full interactive dashboard inline. The tool auto-detects the current file from your connected browser tab — no URL required. The dashboard scores six categories:

Category	Weight	What it checks
Naming & Semantics	25%	Semantic variable naming, component naming conventions
Token Architecture	20%	Alias usage, depth layering, mode support, descriptions
Component Metadata	20%	Descriptions, variant structure, standalone vs. set ratio
Accessibility	10%	Contrast-ready tokens, focus state components, readable naming
Consistency	15%	Delimiter usage, casing patterns, scale adherence, mode naming
Coverage	10%	Token type coverage, core component presence, variable count

Enabling MCP Apps

MCP Apps are gated behind an environment variable and only available in Local Mode.

{
  "mcpServers": {
    "figma-console-local": {
      "command": "node",
      "args": ["/path/to/figma-console-mcp/dist/local.js"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "figd_YOUR_TOKEN_HERE",
        "ENABLE_MCP_APPS": "true"
      }
    }
  }
}

When ENABLE_MCP_APPS is not set or set to "false", no app tools are registered and existing functionality is completely unaffected.

Architecture

Each MCP App follows a modular structure:

src/apps/<app-name>/
  server.ts              # Tool + resource registration (compiled by tsc)
  ui/
    mcp-app.html         # HTML shell with styles (bundled by Vite)
    mcp-app.ts           # App logic using ext-apps SDK (inlined into HTML)

Build pipeline:

TypeScript compiles server.ts to dist/apps/<app-name>/server.js
Vite bundles the UI into a single self-contained dist/apps/<app-name>/mcp-app.html
The server registers a resource URI that serves the built HTML file
The host renders the HTML inline when the tool is called

Apps use the official @modelcontextprotocol/ext-apps SDK for lifecycle management, host theming, and server communication.

Building Apps

The build system supports multiple apps via the APP_NAME environment variable:

# Build a specific app
cross-env APP_NAME=token-browser vite build

# Build all apps (runs as part of npm run build)
npm run build:apps

Adding a new app requires:

Create src/apps/<name>/server.ts with tool and resource registration
Create src/apps/<name>/ui/mcp-app.html and mcp-app.ts
Add a cross-env APP_NAME=<name> vite build entry to the build:apps script
Register the app in src/local.ts inside the ENABLE_MCP_APPS gate

Roadmap

Planned MCP Apps:

Component Gallery — Visual browser for searching and previewing components with variant exploration
Style Inspector — Interactive panel for exploring color, text, and effect styles with live previews
Variable Diff Viewer — Side-by-side comparison of token values across modes and branches

Learn More

MCP Apps Protocol Extension — Official specification
@modelcontextprotocol/ext-apps on npm — Client and server SDK
Architecture — How Figma Console MCP works under the hood

Getting Started

Guides

Reference

MCP Apps

How MCP Apps Work

Available Apps

Token Browser

Design System Dashboard

Enabling MCP Apps

Architecture

Building Apps

Roadmap

Learn More

​How MCP Apps Work

​Available Apps

​Token Browser

​Design System Dashboard

​Enabling MCP Apps

​Architecture

​Building Apps

​Roadmap

​Learn More

How MCP Apps Work

Available Apps

Token Browser

Design System Dashboard

Enabling MCP Apps

Architecture

Building Apps

Roadmap

Learn More