Figma Console MCP (Obra Autodocs)

What it does

This MCP server bridges design and development by giving AI assistants full access to Figma. It specializes in extracting design systems, creating UI components programmatically, and managing design tokens. The Obra fork specifically adds the ability to generate labeled component-variant documentation (Autodocs) directly within the Figma canvas.

Key features

• Automated Documentation: Generate labeled variant grids for component sets using figma_generate_autodocs.
• Bidirectional Token Sync: Export Figma variables to DTCG JSON/CSS and push code-side edits back to Figma.
• Full Design Creation: Create frames, shapes, and complex layouts using the Figma Plugin API.
• Accessibility Audits: Perform 14 WCAG design checks with conformance tagging.
• Interactive UI: Includes a Token Browser and Design System Dashboard for visual auditing.

Installation

Use the following command for Claude Code:

claude mcp add figma-console -s user -e FIGMA_ACCESS_TOKEN=figd_YOUR_TOKEN_HERE -e ENABLE_MCP_APPS=true -- npx -y @obra-studio/figma-console-mcp@latest

For Claude Desktop, add to claude_desktop_config.json:

{
  "mcpServers": {
    "figma-console": {
      "command": "npx",
      "args": ["-y", "@obra-studio/figma-console-mcp@latest"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "figd_YOUR_TOKEN_HERE",
        "ENABLE_MCP_APPS": "true"
      }
    }
  }
}

Supported hosts

• claude
• vscode-copilot
• cursor
• windsurf