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

figma-console-mcp

figma-console-mcp é um projeto de design de código aberto de southleft (southleft/figma-console-mcp no GitHub). Tem 2.453 estrelas no GitHub e 255 forks, é publicado sob a licença MIT e foi atualizado pela última vez no GitHub em 2 de outubro de 2026.

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

★ 2,5 mil estrelas⑂ 255 forksMITatualizado out 2026
▦ visual: o README deste projeto não inclui nenhuma captura incorporável,
então aqui vai um marcador. O guia abaixo está completo mesmo assim.
// dados do projeto

Dados do projeto

Estrelas no GitHub
2.453
Forks
255
Licença
MIT
Última atualização no GitHub
2 de outubro de 2026
Categoria
Design
Tipo de ficha
Guia de instalação completo
Site oficial
Official site
// como funciona

Como funciona

  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.

// recursos

Por que as pessoas gostam tanto

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
// execute você mesmo

Execute você mesmo

  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
// casos de uso

O que você pode criar

Advertisement
// perguntas frequentes

Perguntas frequentes

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

// continue explorando

Ferramentas semelhantes

Design

cursor-talk-to-figma-mcp

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

★ 7,0 mil estrelasMIT
Ver o guia →
Design

dembrandt

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

★ 3,6 mil estrelasMIT
Ver o guia →
Design

design-md-figma

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

★ 153 estrelasMIT
Ver o guia →
Design

glade-mcp

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

★ 221 estrelasMIT
Ver o guia →
Design

tuui

Desktop MCP client that unifies AI tools across vendors

★ 1,2 mil estrelasApache-2.0
Ver o guia →
Design

poster-design

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

★ 4,9 mil estrelasAGPL-3.0
Ver o guia →
// alternativas

Alternativas em Design

Os outros projetos de Design com mais estrelas no catálogo do LibreAI — a lista realista de alternativas se figma-console-mcp não for o ideal para você.

// mais em design

Mais em Design

Projetos de Design próximos no catálogo, os mais próximos em estrelas de figma-console-mcp: continue explorando dos dois lados dele.

Baixe o figma-console-mcp

Grátis e aberto: pegue o código-fonte, dê uma estrela no repositório e comece a criar.