Figma Context MCP

Extraia código, assets e estruturas de componentes de designs do Figma para usar em fluxos de trabalho de IA.

Documentação

Sunnyside Figma MCP

Um servidor Model Context Protocol (MCP) que transforma designs do Figma em código de produção. Ele acompanha um plugin complementar do Figma para que clientes LLM possam ler a camada que você está realmente visualizando, extrair CSS pixel-perfect e design tokens, e gerar saída React / Tailwind / styled-components — tudo a partir de um prompt em linguagem natural.

Dois caminhos de dados são suportados:

Plugin bridge — maior fidelidade. Usa o getCSSAsync() nativo do Figma de dentro do editor. Funciona em qualquer plano, até mesmo em Drafts.
Figma REST API — funciona headless a partir de um fileKey / nodeId para designs que vivem em um time/projeto que você pode acessar com um Personal Access Token.

Início Rápido

Requisitos: Node 18+, um Figma Personal Access Token (crie um aqui).

git clone https://github.com/tercumantanumut/sunnysideFigma-Context-MCP
cd sunnysideFigma-Context-MCP
npm install
npm run build

Crie um .env:

FIGMA_API_KEY=figd_your_token_here
PORT=3333
OUTPUT_FORMAT=json

Execute o servidor HTTP/SSE:

npm start
# → http://localhost:3333
#   SSE:              /sse
#   Streamable HTTP:  /mcp

Instale o plugin do Figma (uma única vez):

Abra o Figma Desktop → Plugins → Development → Import plugin from manifest…
Escolha figma-dev-plugin/manifest.json deste repositório.
Execute o plugin em qualquer arquivo. Selecione um frame → clique em Extract Dev Code.

Você verá "Data sent to MCP server successfully" quando a ponte estiver ativa.

Conecte um Cliente MCP

Escolha um transporte. Ambos expõem as mesmas 27 ferramentas contra o mesmo servidor em execução.

stdio (o cliente inicia o processo)

Use isto se quiser que o cliente gerencie o ciclo de vida e não precisar que o plugin bridge do Figma compartilhe estado com o processo MCP.

{
  "mcpServers": {
    "sunnyside-figma": {
      "type": "stdio",
      "command": "node",
      "args": [
        "/absolute/path/to/sunnysideFigma-Context-MCP/dist/cli.js",
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": "figd_your_token_here"
      }
    }
  }
}

SSE (recomendado ao usar o plugin do Figma)

O plugin envia extrações para http://localhost:3333/plugin/*. Aponte seu cliente MCP para o mesmo processo para que ambos compartilhem o buffer de extração.

{
  "mcpServers": {
    "sunnyside-figma": {
      "type": "sse",
      "url": "http://localhost:3333/sse"
    }
  }
}

Streamable HTTP

{
  "mcpServers": {
    "sunnyside-figma": {
      "type": "http",
      "url": "http://localhost:3333/mcp"
    }
  }
}

Referência de Ferramentas (27 ferramentas)

Ferramentas do plugin bridge — use estas primeiro

Estas leem o buffer preenchido pelo plugin do Figma. Mais rápidas, maior fidelidade, sem limites de API.

Ferramenta	Retorna
`get_figma_dev_history`	Lista de extrações anteriores (nome, id, layout)
`get_Basic_CSS`	CSS do elemento raiz via `getCSSAsync()`
`get_All_Layers_CSS`	CSS para cada camada na seleção
`get_JSON`	Estruturado: id, fills, variáveis, design tokens, `allLayersCSS` — a chamada única de maior sinal
`get_react_component`	TypeScript React + módulo CSS
`get_tailwind_component`	React + classes Tailwind (valores arbitrários)
`get_styled_component`	React + styled-components
`get_plugin_project_overview`	Resumo do projeto completo escaneado (requer Scan Entire Project no plugin)
`analyze_app_structure`	Análise arquitetural de um projeto escaneado

Ferramentas da Figma REST API

Requerem FIGMA_API_KEY + um arquivo que o token possa acessar. Não funcionam em Drafts — mova os arquivos para um time/projeto primeiro.

Ferramenta	Uso
`get_figma_data`	JSON bruto do arquivo ou nó
`get_figma_page_structure`	Árvore em nível de página para orientação
`get_figma_project_overview`	Resumo em nível de time/projeto
`analyze_figma_components`	Detecção de componentes em um arquivo
`download_figma_images`	Exportação em lote de SVG/PNG para disco

Ciclo de vida de design tokens

Registro de tokens + simulação de "e se" para mudanças no design system.

Ferramenta	Uso
`extract_design_tokens`	Construir um catálogo de tokens a partir da seleção atual
`build_dependency_graph`	Mapear quais camadas consomem quais tokens
`debug_token_registry`	Inspecionar o estado atual do registro
`track_design_system_health`	Relatório de cobertura / conflitos
`simulate_token_change`	Simular uma renomeação/mudança de valor
`analyze_token_change_impact`	Relatório de raio de impacto para uma mudança proposta
`apply_token_change`	Confirmar uma mudança simulada
`rollback_token_change`	Reverter uma mudança aplicada
`list_token_simulations`	Listar simulações em estágio
`generate_migration_code`	Produzir saída no estilo codemod para a mudança

Figma Dev Mode (oficial) — somente plano Professional

Faz a ponte com o servidor MCP oficial do Figma Dev Mode em localhost:3845. Requer um plano Figma Professional com Dev Mode habilitado no aplicativo desktop.

Ferramenta	Uso
`check_figma_dev_connection`	Testar o servidor Dev Mode
`get_figma_dev_mode_code`	React + Tailwind a partir do gerador oficial do Figma

Utilitário

Ferramenta	Uso
`generate_codegen_plugin`	Gerar um novo plugin de codegen do Figma Dev Mode

Fluxos de Trabalho Típicos

Gerar um componente a partir de uma seleção

No Figma, selecione o frame.
No plugin, clique em Extract Dev Code.
Peça ao seu agente: "Gere um componente React + Tailwind a partir da extração mais recente." → chama get_tailwind_component.

Auditar um design system

Clique em Scan Entire Project no plugin.
Pergunte: "Resuma os design tokens deste projeto e sinalize conflitos." → chama get_plugin_project_overview + extract_design_tokens + track_design_system_health.

Propor uma mudança de token com segurança

simulate_token_change → analyze_token_change_impact → revise.
apply_token_change se for seguro, rollback_token_change para desfazer.
generate_migration_code para produzir a migração de código.

Exportação headless

Dê ao seu agente uma URL do Figma (Copy link to selection). Ele analisa fileKey + nodeId e chama get_figma_data / download_figma_images.

Arquitetura

┌───────────────────┐     POST /plugin/*     ┌──────────────────────┐
│  Figma Plugin     │ ─────────────────────▶ │                      │
│  (figma-dev-plugin)                        │  HTTP server :3333   │
└───────────────────┘                        │  ├─ /sse   (MCP SSE) │
                                             │  ├─ /mcp   (MCP HTTP)│
┌───────────────────┐   MCP (SSE / HTTP /    │  └─ extraction cache │
│  MCP client       │   stdio)               │                      │
│  (Claude, Selene, │ ◀──────────────────────│                      │
│   Cursor, etc.)   │                        └──────────────────────┘
└───────────────────┘                                   │
                                                        │ optional
                                                        ▼
                                            ┌──────────────────────┐
                                            │  Figma REST API      │
                                            │  Figma Dev Mode :3845│
                                            └──────────────────────┘

O servidor HTTP e os endpoints MCP vivem no mesmo processo Node, então o buffer de extração do plugin e as ferramentas MCP compartilham memória. É por isso que SSE é o transporte recomendado quando o plugin está em uso.
O modo stdio inicia um processo novo por cliente — ele não verá extrações do plugin de um servidor separado em execução. Use SSE/HTTP se precisar desse estado compartilhado.

Solução de Problemas

"No extracted data available" — reabra o plugin e clique em Extract Dev Code. Se o cliente for stdio, mude para SSE para que ele compartilhe estado com o servidor do plugin.

As ferramentas da Figma REST expiram / 404 — o arquivo provavelmente está em Drafts. Mova-o para um time/projeto, ou use o caminho do plugin.

check_figma_dev_connection falha — requer Figma Professional + Dev Mode MCP Server habilitado no Figma Desktop (Preferences → Enable local MCP Server). Usuários do plano gratuito devem usar as ferramentas do plugin.

O servidor não inicia na :3333 — outro processo está usando a porta. Altere PORT em .env e atualize a URL do seu cliente MCP de acordo.

Erros de sessão ao acessar /mcp diretamente com curl — o transporte Streamable HTTP requer inicializar uma sessão (initialize → notifications/initialized) antes de tools/list. Clientes MCP fazem isso automaticamente.

Desenvolvimento

npm run dev          # tsup watch build
npm run dev:cli      # stdio dev loop
npm run type-check   # tsc --noEmit
npm run lint
npm test             # jest
npm run inspect      # open @modelcontextprotocol/inspector

Estrutura do projeto:

src/
├─ cli.ts                    # entrypoint (HTTP + stdio)
├─ mcp.ts                    # tool registration
├─ server.ts                 # Express + MCP transport wiring
├─ tools/
│  ├─ plugin-tools.ts        # plugin-bridge tools
│  ├─ figma-codegen-tools.ts # React / Tailwind / styled-components
│  ├─ figma-dev-tools.ts     # official Dev Mode bridge
│  ├─ design-system-tools.ts # token lifecycle
│  └─ figma-api-tools.ts     # REST API
└─ services/
   └─ plugin-integration.ts  # /plugin/* endpoints + extraction cache

figma-dev-plugin/            # companion Figma plugin (manifest + UI + code)

Contribuindo

PRs são bem-vindos. Execute npm run lint && npm test && npm run build antes de abrir. Mantenha a superfície de ferramentas enxuta — se você adicionar uma nova ferramenta, verifique se há sobreposição com uma existente.

Licença

Veja LICENSE. Construído sobre conceitos do Framelink MCP, mas substancialmente diferente; proprietário com termos específicos. Consultas comerciais: Umut TAN — tercumantanumut@gmail.com.