LibreAI / Design / figma-console-mcp
// design · southleft/figma-console-mcp

figma-console-mcp

Your design system as an API — an MCP server that connects AI to Figma for extraction, creation and debugging

★ 2.5k stars⑂ 255 forksMITupdated 2026-10
▦ visual — this project's README ships no embeddable screenshot,
so here's a placeholder. The guide below is complete regardless.
// project facts

Project facts

figma-console-mcp is an open-source design project by southleft (southleft/figma-console-mcp on GitHub). It has 2,453 GitHub stars and 255 forks, is released under the MIT license, and was last updated on GitHub on 2 October 2026.

GitHub stars
2,453
Forks
255
License
MIT
Last updated on GitHub
2 October 2026
Category
Design
Listing
Full install guide
Official site
Official site
// how it works

How it works

  1. Clarify your goal

    Decide your mode: full creation/editing (NPX setup, 121 tools), web AI clients (Cloud Mode, 96 tools) or read-only exploration (Remote SSE).

  2. Get a Figma token

    Create a personal access token in Figma with File content, File versions, Variables and Comments scopes.

  3. Configure your MCP client

    Add the npx figma-console-mcp server with FIGMA_ACCESS_TOKEN to Claude Code, Cursor, Windsurf or Claude Desktop (or use the claude mcp add one-liner).

  4. Connect and test

    Open Figma Desktop, import and run the Desktop Bridge plugin from the auto-created manifest path, restart your client, and ask it to check Figma status or create a frame.

// features

Why people love it

Design-system extraction

Pull variables, components and styles as exact tokens, variants, bindings and states — structured data, not framework opinions.

Bidirectional token sync

Export Figma variables to DTCG JSON (plus 9 more formats) and push code-side edits back into Figma with full apply — replacing a Style Dictionary/Tokens Studio export pipeline.

Design creation and editing

Create UI components, frames and layouts directly in Figma, including one-call component-set creation from a variant matrix, in NPX/Cloud modes.

Deterministic checks

Design-code parity comparisons, 14 WCAG accessibility checks with conformance tagging, axe-core code scanning, and scored design-system health audits.

Version history tooling

List versions, diff snapshots, generate markdown changelogs and trace when a property or variant was introduced.

Codebase → design system

Scan a production codebase, mine its de-facto styling into DTCG tokens with provenance, scaffold a design-system package with a wired Storybook, and round-trip tokens into Figma (Local Mode).

Advertisement
// run it

Run it yourself

  1. Clone the repo

    Clone Figma Console MCP for the Local Git/contributor setup; most users use npx in step 2.

    git clone https://github.com/southleft/figma-console-mcp.git
    cd figma-console-mcp
  2. Add via npx to your client

    For Claude Code, the README's one-liner registers the server with your token; other clients use the npx figma-console-mcp@latest config.

    claude mcp add figma-console -s user -e FIGMA_ACCESS_TOKEN=figd_YOUR_TOKEN
  3. Connect the Desktop Bridge

    In Figma Desktop: Plugins → Development → Import plugin from manifest, select ~/.figma-console-mcp/plugin/manifest.json, run the plugin, restart your MCP client, and ask 'Check Figma status'.

    # see README for the exact command — plugin manifest path is auto-created by the server
// use cases

What you can build

Advertisement
// faq

Questions, answered

Who maintains Figma Console MCP?

southleft maintains it; documentation is at docs.figma-console-mcp.southleft.com.

Is it free?

The server is MIT-licensed and free. You need a Figma account and personal access token; Figma's own plan limits apply to your files.

Does it need a paid API key?

It needs a free Figma personal access token (not a paid API key). Your AI client (Claude etc.) has its own plan or key.

How does it compare to Figma's own MCP server?

This is an independent, design-system-focused server emphasizing bidirectional token sync, deterministic parity/accessibility/health checks and codebase-to-design-system extraction; check its docs for the current tool-by-tool comparison with your needs.

How do I get started?

Create a Figma token, add the npx server to your MCP client, import the Desktop Bridge plugin in Figma Desktop, restart the client, and test with 'Check Figma status'.

// keep exploring

Similar tools

Design

cursor-talk-to-figma-mcp

TalkToFigma — an MCP bridge letting Cursor, Claude Code or Codex read and modify Figma designs.

★ 7.0k starsMIT
View guide →
Design

dembrandt

Extract any website's design system — logo, colours, typography and tokens — in one command.

★ 3.6k starsMIT
View guide →
Design

design-md-figma

Figma plugin that turns your style guide into DESIGN.md and SKILL.md for AI

★ 153 starsMIT
View guide →
Design

glade-mcp

Connect AI coding assistants to Unity or Godot with 275+ tools

★ 221 starsMIT
View guide →
Design

tuui

Desktop MCP client that unifies AI tools across vendors

★ 1.2k starsApache-2.0
View guide →
Design

poster-design

Open-source online poster and image designer with a full editor, admin backend, and built-in AI tools

★ 4.9k starsAGPL-3.0
View guide →
// alternatives

Alternatives in Design

The most-starred other Design projects in the LibreAI catalogue — the realistic shortlist if figma-console-mcp is not the right fit.

Get figma-console-mcp

Free and open — grab the source, star the repo, and start creating.