southleft/figma-console-mcp

What it solves

Figma Console MCP bridges the gap between design and development by giving AI assistants (like Claude) direct, programmatic access to Figma. It eliminates the manual effort of extracting design tokens, creating UI components, and syncing variables between a design file and a production codebase.

How it works

The project implements the Model Context Protocol (MCP), allowing AI agents to call a suite of over 100 tools to interact with Figma. It offers four connection modes:

• NPX/Local Git: Full access (121 tools) including design creation and real-time monitoring via a Desktop Bridge plugin.
• Cloud Mode: Write access (101 tools) for web-based AI clients (e.g., Claude.ai, v0) using a cloud relay and a pairing code to connect to the Figma Desktop app.
• Remote SSE: Read-only access (9 tools) for quick exploration.
• Local Git: Full source code access for contributors.

Who it’s for

• Designers who want to use AI to generate components, manage design tokens, or build FigJam boards and Figma Slides programmatically.
• Developers who want to automate the extraction of design systems from codebases into Figma variables or audit design system health.
• AI Engineers building agents that need to read, create, or modify Figma designs.

Highlights

• Design System Extraction: Can scan production codebases to mine styling into tokens and round-trip them back into Figma variables.
• Bidirectional Token Sync: Exports Figma variables to multiple JSON formats and pushes code-side edits back to Figma.
• Design Creation: Enables AI to create UI components, frames, and layouts directly in Figma, including complex component sets from variant matrices.
• Health Audits: Provides Lighthouse-style scored audits of design systems across accessibility, naming, and consistency.
• Accessibility Scanning: Includes 14 WCAG design checks with conformance tagging.
• Version Awareness: Can generate markdown changelogs and trace property changes via binary-search blame.