southleft/figma-console-mcp

Your design system as an API. Connect AI to Figma for extraction, creation, and debugging.

What it solves

Figma Console MCP provides a bidirectional bridge between AI assistants (like Claude) and Figma, treating a design system as an API. It eliminates the manual gap between design and code by allowing AI to read design tokens, create UI components, and perform deterministic checks for design-code parity and accessibility.

How it works

The project implements the Model Context Protocol (MCP), allowing AI agents to interact with Figma through several connection modes:

  • Local Mode (NPX/Git): Connects via a Desktop Bridge plugin to provide full write access and real-time monitoring (console logs, selection tracking).
  • Cloud Mode: Relays commands from web AI clients (like Claude.ai or v0) to the Figma Desktop plugin via a WebSocket relay.
  • Remote SSE: A read-only connection for exploring design data without local installation.

It uses a combination of the Figma REST API and the Figma Plugin API to manage variables, components, and layouts.

Who it’s for

  • Designers who want to use AI to automate the creation of components, frames, and layouts.
  • Developers who need to extract design tokens into code or sync codebase styling back into Figma.
  • Design Engineers focused on maintaining design-system health, accessibility (WCAG), and parity between Figma and production code.

Highlights

  • Bidirectional Sync: Export Figma variables to multiple JSON formats or push code-side edits back to Figma.
  • Design Creation: Create UI components, frames, and layouts directly in Figma via AI prompts.
  • Health Audits: Lighthouse-style scored audits for naming, tokens, accessibility, and consistency.
  • Design-Code Parity: Deterministic comparison of Figma components against their code implementation.
  • Accessibility Scanning: 14 WCAG design checks with conformance tagging and component scorecards.
  • Version Awareness: Trace property changes via binary-search blame and generate markdown changelogs.

Related

  • Project
    figma/mcp-server-guide

    Documentation for Figma’s MCP server – an HTTP service that lets AI coding assistants read design data (components, variables, layout) from Figma, generate placeholder images, and (in beta) write back to the canvas. Includes setup for VS Code, Cursor, Claude Code, Gemini CLI, rate‑limit info, and best‑practice tips for prompting agents to turn frames into code.

  • Project
    GLips/Figma-Context-MCP

    An MCP server that gives AI coding agents access to Figma design data, allowing them to implement designs more accurately than using screenshots.

  • Project
    grab/cursor-talk-to-figma-mcp

    An MCP integration that allows AI agents like Cursor to read and programmatically modify Figma designs via a WebSocket server and plugin.

  • Project
    gethopp/figma-mcp-bridge

    A plugin and MCP server that lets AI agents read and write Figma document data without hitting Figma API rate limits by streaming data through a local bridge.

  • Project
    ecomfe/tempad-dev

    TemPad Dev is a Chrome extension that connects Figma designs with AI coding agents. It provides instant CSS/JS inspection, AI‑driven canvas editing, and design‑to‑code generation via a local MCP server. Developers can customise output with simple JavaScript plugins and integrate a variety of LLM‑based agents.