Design Context Bridge

design-context-bridge é um servidor MCP que transforma qualquer agente de IA em um desenvolvedor frontend que consegue ler um arquivo Figma de verdade — sem precisar adivinhar a partir de uma captura de tela. Quando você entrega um Figma a um desenvolvedor e diz "construa isso", ele não apenas copia os pixels visíveis. Ele abre o arquivo, identifica os componentes, lê as cores exatas e a escala tipográfica, infere as rotas que o aplicativo precisará, descobre os estados de hover e desabilitado, e exporta os ícones. Este servidor dá ao agente de IA esse mesmo acesso, para que ele possa fazer esse trabalho por você — fielmente, não de forma aproximada.

GitHubExperimente este MCPPatrocinado

Documentação

Design Context Bridge

Design Context Bridge — an independent MCP server that connects Figma design context to AI coding agents. Not affiliated with Figma.

npm i -g design-context-bridge · Um servidor MCP independente para Figma

npm MIT Node ≥ 18 20 tools CI

O que é isso?

design-context-bridge é um servidor MCP que transforma qualquer agente de IA em um desenvolvedor frontend que consegue realmente ler um arquivo Figma — não adivinhar a partir de uma captura de tela.

Quando você entrega um Figma a um desenvolvedor e diz "construa isso", ele não apenas copia os pixels visíveis. Ele abre o arquivo, identifica os componentes, lê as cores exatas e a escala tipográfica, infere as rotas que o app precisará, descobre os estados de hover e desabilitado e exporta os ícones. Este servidor dá à IA esse mesmo acesso, para que ela possa fazer esse trabalho por você — fielmente, não aproximadamente.

Para quem é?

  • Desenvolvedores frontend que recebem um Figma e precisam construí-lo com fidelidade de pixels, rapidamente.
  • Designers e PMs que querem que uma IA raciocine sobre um design — rotas, componentes, tokens — sem escrever código.
  • Qualquer pessoa que construa ferramentas de IA que precise de dados de design estruturados e confiáveis em vez de suposições de modelos de visão.

Por que não simplesmente colar uma captura de tela?

Uma captura de tela é uma suposição. Isto são os dados reais.

Colar uma captura de teladesign-context-bridge
A IA adivinha cores a partir dos pixelsLê o hex exato, por camada
Espaçamentos e tamanhos aproximadosGaps reais de auto-layout, padding, geometria
Sem ideia do que é um componente reutilizávelIdentifica componentes e suas variantes
Inventa estados de hover/desabilitadoLê as interações reais do protótipo
Você exporta ícones manualmentefind_assets + export_image montam a pasta
Não consegue ver tokensDeriva um design system completo, mesmo sem Figma Variables

Duas formas de conectar

Tudo funciona nos dois modos — escolha pelo fluxo de trabalho, ou use os dois ao mesmo tempo.

🔌 Modo plugin

Um plugin do Figma ("Frontend Handoff Snapshot") roda dentro do Figma desktop. Selecione qualquer camada e veja instantaneamente suas cores, tipografia e espaçamento no painel do plugin — sem token ou servidor necessário para inspeção. Quando estiver pronto, pressione Export para enviar o contexto completo da seleção para a ponte local da sua ferramenta de codificação com IA.

O plugin só fala com localhost e nunca modifica seu arquivo. Não é a integração MCP oficial do Figma (use_figma) e não substitui ela — combiná-lo com o servidor MCP abaixo é opcional, para desenvolvedores que querem que sua ferramenta de codificação com IA leia esse mesmo contexto exportado.

O plugin ainda não está na Comunidade Figma, então você o instala manualmente a partir do manifesto — leva cerca de um minuto e funciona exatamente da mesma forma.

→ Instalar o plugin manualmente

🌐 Modo API REST

Passe qualquer URL de figma.com e o servidor a lê através da API REST do Figma com um token de acesso pessoal. Sem plugin, sem Figma desktop, sem seleção. Ideal para revisar arquivos que você não tem abertos, CI ou uso headless.

→ Configuração da API REST

As ferramentas de design system, estrutura, variantes e exportação de assets rodam em modo REST — passe uma URL e elas leem o arquivo inteiro.

Início rápido

npx design-context-bridge

Adicione ao seu cliente de IA e então pergunte em linguagem natural:

"Extract the design system from this Figma: <url>"
"What routes would this app have?"
"What variants does this Button component have?"
"Export every icon in this file as SVG into ./assets"
"Build this landing page faithfully — components, tokens, hover states and all."

A IA chama as ferramentas certas, obtém dados reais e constrói a partir deles.

O que ele pode fazer

CapacidadeFerramentasComo você pediria
Ler a seleção ativaget_current_selection, get_selected_colors, get_selected_texts, get_selected_spacing, get_selected_interactions"Quais cores estão na minha seleção?"
Navegar em qualquer arquivoget_all_pages, get_current_page, get_frame_by_name, get_node_info, get_nodes_info, scan_nodes_by_types"Encontre o frame Checkout e mostre sua árvore"
Derivar um design systemextract_design_system, get_variables, get_component_definitions"Me dê os tokens: cores, escala tipográfica, espaçamento"
Planejar a construçãoanalyze_structure, get_component_variants"Quais rotas e componentes isso precisa?"
Exportar assetsfind_assets, export_image"Exporte todos os ícones como SVG"
Começar a partir de uma URLget_file_from_url, get_node_from_url"Leia este link do Figma"

→ Referência completa com todos os argumentos em docs/tools.md

Como funciona

Figma desktop              design-context-bridge            AI agent
──────────────    HTTP     ─────────────────   stdio   ──────────
  Plugin        ────────►  :3055 bridge     ◄────────  Claude Code
  (push/poll)              + MCP server                Cursor
                                                       OpenCode
              figma.com    ─────────────────           Windsurf
  Any file URL ────────►  REST API client              VS Code…
  1. O plugin envia o contexto da seleção e responde a solicitações de nós sob demanda em tempo real.
  2. O servidor MCP expõe 20 ferramentas via stdio.
  3. O cliente REST lê qualquer arquivo de api.figma.com quando FIGMA_ACCESS_TOKEN está definido — e alimenta as ferramentas de análise e assets.

Documentação

GuiaO que cobre
Configuração do pluginInstalar o plugin do Figma, verificar a ponte, configurar a porta
Configuração da API RESTGerar um token do Figma, adicioná-lo à configuração do seu cliente
Configuração do clienteClaude Code · Claude Desktop · Cursor · OpenCode · Windsurf · VS Code
Referência de ferramentasTodas as 20 ferramentas — argumentos, valores de retorno e padrões de uso

Tratamento de tokens

Seu FIGMA_ACCESS_TOKEN é lido apenas do ambiente e enviado somente para api.figma.com no cabeçalho X-Figma-Token. Ele nunca é registrado, armazenado em cache ou gravado em disco por este servidor, e nunca é incluído nas respostas das ferramentas. Trate-o como uma senha: use um Personal Access Token com escopo, nunca o envie para um repositório e revogue-o se for exposto. PATs são destinados a uso local/usuário único — para um produto público multiusuário, use Figma OAuth.

Segurança e privacidade

  • A ponte local escuta apenas em 127.0.0.1:3055 — nunca a exponha a redes não confiáveis.
  • Esta ferramenta roda inteiramente na sua máquina; seus mantenedores não recebem nenhum dado.
  • Os dados de design são repassados ao cliente de IA ao qual você se conecta, que pode encaminhá-los ao provedor de modelo.
  • Use apenas com arquivos Figma aos quais você tem permissão de acesso.

Consulte SECURITY.md e PRIVACY.md para detalhes e para saber como reportar uma vulnerabilidade.

Aviso legal

Este projeto é independente e não é afiliado, endossado ou patrocinado pela Figma. "Figma" é uma marca registrada da Figma, Inc., usada aqui apenas de forma descritiva para indicar compatibilidade. Consulte DISCLAIMER.md.

Licença

MIT © Cristina Fores Campos