Repolode
Enviar
southleft

southleft/figma-console-mcp

Um servidor MCP que conecta assistentes de IA ao Figma para extrair tokens de design, criar e editar designs e verificar a paridade entre design e código e a acessibilidade.

Alternativa open source a:Figma Dev Mode

Ver no GitHubSite
Estrelas
3,196
Forks
293
Issues abertas
9
Último commit
há 9 dias

O que é?

O Figma Console MCP é um servidor Model Context Protocol que disponibiliza arquivos do Figma para clientes de IA como Claude, Cursor e Codex. Ele lê variáveis, componentes, estilos e a estrutura dos arquivos, e também pode gravar no Figma: criar frames e componentes, gerenciar variáveis e modos e editar textos, preenchimentos e layouts por meio de um plugin Desktop Bridge executado no Figma Desktop.

Além das operações básicas de leitura e escrita, o projeto oferece recursos para trabalhar com sistemas de design. Ele sincroniza variáveis do Figma com DTCG JSON e vários formatos de tokens nos dois sentidos, verifica um componente do Figma em relação à sua implementação em código, executa verificações de acessibilidade no estilo WCAG e gera documentação de componentes. As ferramentas retornam dados estruturados, como tokens, variantes e bindings, para que o código gerado siga a stack da equipe.

O acesso completo de escrita requer a configuração NPX ou Local Git, executada no Node.js e com 130 ferramentas. O Cloud Mode permite que clientes de IA na web, como Claude.ai, se conectem a um plugin em execução sem Node.js, com 105 ferramentas. O endpoint Remote SSE é somente para leitura.

Recursos principais

  • 01Lê variáveis, componentes, estilos e a estrutura de arquivos do Figma para uso por IA
  • 02Cria e edita frames, componentes, textos, preenchimentos e auto layout no Figma
  • 03Sincroniza tokens de design nos dois sentidos com DTCG JSON, CSS, Tailwind e outros formatos
  • 04Compara componentes do Figma com implementações em código e aponta diferenças
  • 05Executa verificações de acessibilidade com base em WCAG e gera avaliações de acessibilidade de componentes
  • 06Funciona com Claude Code, Cursor, Windsurf, Claude Desktop, Codex e Gemini CLI

Casos de uso

  • Permitir que um assistente de IA gere mockups de UI ou componentes diretamente em um arquivo do Figma
  • Manter as variáveis do Figma e os tokens de design do código sincronizados na equipe
  • Verificar se um componente implementado em código corresponde ao design no Figma antes da aprovação
  • Auditar um sistema de design em busca de problemas de nomenclatura, tokens e acessibilidade

Início rápido

  1. 1

    Obtenha um token de acesso pessoal do Figma na Ajuda do Figma

  2. 2

    Adicione o servidor ao seu cliente MCP usando npx (exemplo com Claude Code)

    claude mcp add figma-console -s user -e FIGMA_ACCESS_TOKEN=figd_YOUR_TOKEN_HERE -e ENABLE_MCP_APPS=true -- npx -y figma-console-mcp@latest
  3. 3

    Importe o manifesto do plugin Desktop Bridge no Figma Desktop e execute-o

  4. 4

    Reinicie seu cliente MCP para carregar a configuração

Antes de usar

  • Para usar todas as funcionalidades, é necessário ter o Figma Desktop e uma conexão com o plugin Desktop Bridge.
  • O modo Remote SSE é somente leitura e não permite criar nem modificar designs.
  • Alguns recursos, como variáveis, exigem um plano Figma Enterprise.

Em coleções

Frameworks e apps de agentes de IA open sourceServidores MCP

Tópicos

#figma#mcp#design-system#design-tokens#ai-agent#accessibility#typescript#ai#design-systems#figma-api

Perguntas frequentes

O que é figma-console-mcp?
Um servidor MCP que conecta assistentes de IA ao Figma para extrair tokens de design, criar e editar designs e verificar a paridade entre design e código e a acessibilidade. O Figma Console MCP é um servidor Model Context Protocol que disponibiliza arquivos do Figma para clientes de IA como Claude, Cursor e Codex. Ele lê variáveis, componentes, estilos e a estrutura dos arquivos, e também pode gravar no Figma: criar frames e componentes, gerenciar variáveis e modos e editar textos, preenchimentos e layouts por meio de um plugin Desktop Bridge executado no Figma Desktop.
figma-console-mcp é gratuito? Qual é a licença?
figma-console-mcp é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
figma-console-mcp ainda é mantido?
Manutenção ativa. O último commit de figma-console-mcp foi em 29 de out. de 2026.
Para que posso usar figma-console-mcp?
Permitir que um assistente de IA gere mockups de UI ou componentes diretamente em um arquivo do Figma Manter as variáveis do Figma e os tokens de design do código sincronizados na equipe Verificar se um componente implementado em código corresponde ao design no Figma antes da aprovação Auditar um sistema de design em busca de problemas de nomenclatura, tokens e acessibilidade
Como instalar figma-console-mcp?
Obtenha um token de acesso pessoal do Figma na Ajuda do Figma Adicione o servidor ao seu cliente MCP usando npx (exemplo com Claude Code): claude mcp add figma-console -s user -e FIGMA_ACCESS_TOKEN=figd_YOUR_TOKEN_HERE -e ENABLE_MCP_APPS=true -- npx -y figma-console-mcp@latest Importe o manifesto do plugin Desktop Bridge no Figma Desktop e execute-o Reinicie seu cliente MCP para carregar a configuração
Onde consigo figma-console-mcp?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/southleft/figma-console-mcp

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados