Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.figma-console-mcp.southleft.com/llms.txt

Use this file to discover all available pages before exploring further.

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:
CategoryWeightWhat it checks
Naming & Semantics25%Semantic variable naming, component naming conventions
Token Architecture20%Alias usage, depth layering, mode support, descriptions
Component Metadata20%Descriptions, variant structure, standalone vs. set ratio
Accessibility10%Contrast-ready tokens, focus state components, readable naming
Consistency15%Delimiter usage, casing patterns, scale adherence, mode naming
Coverage10%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:
  1. TypeScript compiles server.ts to dist/apps/<app-name>/server.js
  2. Vite bundles the UI into a single self-contained dist/apps/<app-name>/mcp-app.html
  3. The server registers a resource URI that serves the built HTML file
  4. 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:
  1. Create src/apps/<name>/server.ts with tool and resource registration
  2. Create src/apps/<name>/ui/mcp-app.html and mcp-app.ts
  3. Add a cross-env APP_NAME=<name> vite build entry to the build:apps script
  4. 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