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

figma-console-mcp

figma-console-mcp est un projet de design open source, créé par southleft (southleft/figma-console-mcp sur GitHub). Il compte 2 453 étoiles sur GitHub et 255 forks, il est publié sous la licence MIT et a été mis à jour pour la dernière fois sur GitHub le 2 octobre 2026.

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

★ 2,5 k étoiles⑂ 255 forksMITmis à jour oct. 2026
▦ visuel — le README de ce projet ne contient aucune capture intégrable,
voici donc un emplacement réservé. Le guide ci-dessous est complet malgré tout.
// détails du projet

Détails du projet

Étoiles GitHub
2 453
Forks
255
Licence
MIT
Dernière mise à jour sur GitHub
2 octobre 2026
Catégorie
Design
Type de fiche
Guide d'installation complet
Site officiel
Official site
// fonctionnement

Comment ça marche

  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.

// fonctionnalités

Pourquoi on l'adore

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
// lancez-le

Lancez-le vous-même

  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
// cas d'usage

Ce que vous pouvez créer

Advertisement
// faq

Questions fréquentes

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'.

// continuez l'exploration

Outils similaires

Design

cursor-talk-to-figma-mcp

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

★ 7,0 k étoilesMIT
Voir le guide →
Design

dembrandt

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

★ 3,6 k étoilesMIT
Voir le guide →
Design

design-md-figma

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

★ 153 étoilesMIT
Voir le guide →
Design

glade-mcp

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

★ 221 étoilesMIT
Voir le guide →
Design

tuui

Desktop MCP client that unifies AI tools across vendors

★ 1,2 k étoilesApache-2.0
Voir le guide →
Design

poster-design

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

★ 4,9 k étoilesAGPL-3.0
Voir le guide →
// alternatives

Alternatives en Design

Les autres projets de la catégorie Design avec le plus d'étoiles du catalogue LibreAI — la sélection réaliste d'alternatives si figma-console-mcp ne vous convient pas.

// plus en design

Plus en Design

Projets de la catégorie Design proches dans le catalogue, les plus proches en étoiles de figma-console-mcp — continuez à explorer de part et d'autre.

Obtenir figma-console-mcp

Gratuit et ouvert : récupérez le code source, mettez une étoile au dépôt et commencez à créer.