🚧 Atualmente, o servidor MCP do Dev Mode está em versão beta aberta. Algumas funções e configurações podem não estar disponíveis. O recurso pode mudar e você pode encontrar bugs ou problemas de desempenho durante o período de versão beta.
Antes de começar
Quem pode usar esse recurso
O servidor MCP do Dev Mode está em versão beta aberta.
Disponível no acesso Full ou Dev nos planos Profissional, Organização ou Enterprise
Você deve usar um editor de código ou aplicativo compatível com servidores MCP (ou seja, VS Code, Cursor, Windsurf, Claude Code)
Só é possível usar o servidor MCP do Dev Mode no app Figma para desktop. Baixe o app Figma para desktop →
O servidor MCP do Dev Mode integra o Figma diretamente ao seu fluxo de trabalho, fornecendo informações importantes de design e contexto para agentes de IA que geram código a partir de arquivos do Figma Design.
Os servidores MCP fazem parte de uma interface padronizada para que os agentes de IA possam interagir com fontes de dados usando Model Context Protocol.
Com o servidor ativado, você pode:
-
Gerar código a partir de quadros selecionados
Selecione um quadro do Figma e converta-o em código. É ótimo para equipes de produto que desenvolvem novos fluxos ou iteram em funcionalidades de aplicativos.
-
Extrair contexto de design
Integre variáveis, componentes e dados de layout diretamente ao seu IDE. É especialmente útil para design systems e fluxos de trabalho baseados em componentes.
-
Programar de um jeito mais inteligente com o Code Connect
Melhore a qualidade do resultado reutilizando seus componentes reais. O Code Connect mantém a consistência do código gerado com a sua base de código.
Etapa 1: Ativar o servidor MCP
- Abra o aplicativo Figma para desktop e confira se você atualizou para a versão mais recente.
- Crie ou abra um arquivo do Figma Design.
- No canto superior esquerdo, abra o menu do Figma.
- Em Preferências, selecione Ativar servidor MCP no Dev Mode.
Você verá uma mensagem de confirmação na parte inferior da tela informando que o servidor está ativado e em execução.
O servidor é executado localmente em http://127.0.0.1:3845/sse
. Mantenha esse endereço à mão para o seu arquivo de configuração na próxima etapa.
Etapa 2: Configurar o cliente MCP
Assim que o servidor estiver em execução localmente no aplicativo Figma para desktop, os clientes MCP poderão se conectar ao seu servidor. Siga as instruções do seu cliente específico para adicionar o servidor MCP do Dev Mode.
-
Acesse Code → Settings → Settings ou use o atalho
⌘ ,
-
Na barra de busca, digite "MCP".
-
Selecione Edit in settings.json.
-
Adicione a configuração do Figma Dev Mode MCP aos seus servidores:
"chat.mcp.discovery.enabled": true, "mcp": { "servers": { "Figma Dev Mode MCP": { "type": "sse", "url": "http://127.0.0.1:3845/sse" } } }, "chat.agent.enabled": true
-
Abra a barra de ferramentas de chat usando
⌥⌘B
ou⌃⌘I
e mude para o modo Agent. -
Abra o menu da ferramenta de seleção e procure uma seção chamada:
MCP Server: Figma Dev Mode MCP
. Se nenhuma ferramenta aparecer na lista, reinicie o aplicativo Figma para desktop e o VS Code.
Observação: você deve ter o GitHub Copilot ativado na sua conta para usar o MCP no VS Code.
Para saber mais, consulte a documentação oficial do VS Code.
-
Abra Cursor → Settings → Cursor Settings.
-
Acesse a aba MCP.
-
Clique em + Adicionar novo servidor MCP global.
-
Insira a configuração a seguir e salve:
{ "mcpServers": { "Figma": { "url": "http://127.0.0.1:3845/sse" } } }
Para saber mais, consulte a documentação oficial do Cursor.
- Abra Windsurf → Settings → Windsurf Settings ou use o atalho
⌘ ,
. - Acesse Cascade settings e selecione Open plugin store.
- Busque por Figma e instale o plugin.
- Abra o Cascade. O servidor MCP do Figma e as ferramentas disponíveis serão exibidos.
Atenção: no Windsurf, altere a propriedade url
no arquivo de configuração para serverUrl
para evitar erros.
- Abra o terminal e execute:
claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse
- Use os seguintes comandos para verificar as configurações do MCP e gerenciar servidores:
- Listar todos os servidores configurados
claude mcp list
- Obter detalhes de um servidor específico
claude mcp get my-server
- Remover um servidor
claude mcp remove my-server
- Listar todos os servidores configurados
Outros editores de código e ferramentas compatíveis com SSE (Server-Sent Events) também podem se conectar ao servidor MCP do Dev Mode.
Se você estiver usando outro editor ou ferramenta, verifique a documentação para confirmar se ela oferece suporte à comunicação baseada em SSE. Se sim, você pode adicionar manualmente o servidor MCP do Dev Mode usando esta configuração:
{
"mcpServers": {
"Figma Dev Mode MCP": {
"url": "http://127.0.0.1:3845/sse"
}
}
}
Observação: o servidor MCP do Dev Mode se comunica pelo protocolo SSE. Use as etapas do seu editor para configurar um servidor MCP compatível com SSE e utilize a URL: http://localhost:3845/sse
Depois de configurado, atualize ou inicie o servidor. Você deve ver uma conexão bem-sucedida e as ferramentas disponíveis. Se a conexão falhar ou se nenhuma ferramenta aparecer, verifique se o servidor está ativo no aplicativo Figma para desktop.
Etapa 3: Enviar um prompt ao cliente MCP
O servidor MCP do Dev Mode introduz um conjunto de ferramentas que auxiliam os LLMs na tradução de designs no Figma. Depois de conectado, você pode instruir seu cliente MCP a acessar um nó de design específico.
Existem duas maneiras de fornecer o contexto do design no Figma ao seu cliente de IA:
Com seleção
- Selecione um quadro ou camada dentro do Figma usando o app para desktop.
- Solicite ao seu cliente que ajude a implementar sua seleção atual.
Com links
- Copie o link para um quadro ou camada no Figma.
- Solicite ao seu cliente que ajude a implementar o design na URL selecionada.
Atenção: seu cliente não conseguirá acessar a URL selecionada, mas extrairá o node-id necessário para que o servidor MCP identifique sobre qual objeto deve retornar informações.
Ferramentas e sugestões de uso
get_code
Use para gerar código para a sua seleção no Figma usando o servidor MCP. A saída padrão é React + Tailwind, mas você pode personalizar isso através dos seus prompts:
-
Mudar o framework
- “Gere minha seleção do Figma no Vue.”
- “Gere minha seleção do Figma em HTML + CSS puro.”
- “Gere minha seleção do Figma no iOS.”
-
Usar seus componentes
- “Gere minha seleção no Figma usando componentes de src/components/UI”
- "Gere minha seleção no Figma usando componentes de src/UI e estilo com Tailwind"
Você pode colar links ou selecionar o quadro ou componente no Figma antes de inserir o prompt.
Aprenda a configurar o Code Connect para uma melhor reutilização de componentes →
get_variable_defs
Retorna variáveis e estilos usados em sua seleção, como cores, espaçamento e tipografia.
- Listar todos os tokens usados
- “Pegue as variáveis usadas na minha seleção do Figma.”
- Concentrar-se em um tipo específico
- “Quais variáveis de cor e espaçamento são usadas na minha seleção do Figma?”
- Obter nomes e valores
- “Liste os nomes das variáveis e seus valores usados na minha seleção no Figma.”
get_code_connect_map
Recupera um mapeamento entre IDs de nó do Figma e os componentes de código correspondentes na sua base de código. Especificamente, retorna um objeto onde cada chave é um ID de nó do Figma, e o valor contém:
-
codeConnectSrc
: a localização do componente na sua base de código (por exemplo, um caminho de arquivo ou URL). -
codeConnectName
: o nome do componente na sua base de código.
Este mapeamento é utilizado para conectar elementos de Figma Design diretamente às suas implementações em React (ou outro framework), permitindo fluxos de trabalho contínuos de design para código e garantindo que os componentes corretos sejam utilizados para cada parte do design. Se um nó do Figma estiver conectado a um componente de código, esta função ajuda você a identificar e usar o componente exato em seu projeto.
get_image
Para usar esta ferramenta, acesse Preferências > Configurações do servidor MCP do Dev Mode > Ativar ferramenta get_image
Faz uma captura de tela da sua seleção para manter a fidelidade do layout. Mantenha essa opção ativada, a menos que você esteja gerenciando os limites de tokens.
Configurações do servidor MCP do Dev Mode
Estas são configurações adicionais que você pode ativar ou desativar em Preferências e usar com o cliente MCP
Ativar ferramenta get_image
- Usar texto de apoio: ignora a extração de imagens e, em vez disso, adiciona textos de apoio genéricos. É útil para quem prefere trocá-los manualmente no código. Caso contrário, extrai imagens reais do seu arquivo.
Ativar Code Connect
Inclui mapeamentos do Code Connect na resposta, para que o código gerado possa reutilizar componentes da sua base de código conectada sempre que possível.
Ao utilizar o servidor MCP do Dev Mode, você pode ver um pop-up dentro do Figma pedindo seu feedback. Para nos fornecer feedback, use este formulário.
Melhores práticas de MCP
A qualidade do código gerado depende de vários fatores, alguns controlados por você e outros pelas ferramentas que você está usando. Confira sugestões para um resultado limpo e consistente.
Organize seu arquivo do Figma para melhorar o código
Forneça o melhor contexto para sua intenção de design, para que o MCP e seu assistente de IA possam gerar um código claro, consistente e alinhado com o seu sistema.
-
Use componentes para qualquer item que seja reutilizado (botões, cartões, campos de entrada, etc.)
-
Vincule componentes à sua base de código via Code Connect. Essa é a melhor forma de garantir a reutilização consistente de componentes no código. Sem isso, o modelo depende de suposições.
-
Use variáveis para espaçamento, cor, raio e tipografia.
-
Nomeie camadas de forma semântica (por exemplo,
CardContainer
, nãoGroup 5
) -
Use o layout automático para comunicar a intenção responsiva.
Dica: redimensione o quadro no Figma para verificar se ele se comporta como esperado antes de gerar o código.
-
Use anotações e recursos de desenvolvimento para transmitir a intenção de design que é difícil de capturar apenas com elementos visuais, como o comportamento, alinhamento ou resposta de algo.
Escreva prompts eficazes para guiar a IA
O MCP fornece ao seu assistente de IA dados estruturados do Figma, mas o é o prompt que direciona o resultado. Bons prompts podem:
- Alinhar o resultado com o seu framework ou sistema de estilo
- Seguir a estrutura de arquivos e as convenções de nomenclatura
- Adicionar código a caminhos específicos (por exemplo,
src/components/ui
) - Adicionar ou modificar código em arquivos existentes em vez de criar novos
- Seguir sistemas de layout específicos (por exemplo, grade, flexbox, absoluto)
Exemplos:
- “Gere código SwiftUI para iOS a partir deste quadro”
- “Use o Chakra UI para este layout”
- “Use componentes
src/components/ui
” - “Adicione isso a
src/components/marketing/PricingCard.tsx
" - "Use o nosso componente de layout
Stack
"
Pense nos prompts como um resumo para um colega de equipe. A intenção clara leva a melhores resultados.
Acione ferramentas específicas quando necessário
O MCP aceita diferentes ferramentas, e cada uma fornece ao seu assistente de IA um tipo diferente de contexto estruturado. Às vezes, o assistente não escolhe automaticamente a opção certa, especialmente à medida que mais ferramentas se tornam disponíveis. Se os resultados estiverem incorretos, tente escrever prompts mais claros.
- get_code fornece uma representação estruturada React + Tailwind da sua seleção no Figma. Este é um ponto de partida que o seu assistente de IA pode traduzir para qualquer framework ou estilo de código, dependendo do seu prompt.
- get_variable_defs extrai as variáveis e estilos usados na sua seleção (cor, espaçamento, tipografia, etc). Isso ajuda o modelo a referenciar seus tokens diretamente no código gerado.
Por exemplo, se você estiver recebendo código bruto em vez de tokens, experimente algo como:
- “Obtenha os nomes e valores das variáveis usados neste quadro.”
Adicione regras personalizadas
Defina diretrizes no nível do projeto para manter os resultados consistentes, assim como as notas de integração para um novo desenvolvedor. São coisas como:
- Primitivas de layout preferenciais
- Organização de arquivos
- Padrões de nomenclatura
- O que não deve ser codificado
Você pode fornecer isso em qualquer formato que o seu cliente MCP utilize para arquivos de instrução.
Exemplos:
---
description: Figma Dev Mode MCP rules
globs:
alwaysApply: true
---
- The Figma Dev Mode MCP Server provides an assets endpoint which can serve image and SVG assets
- IMPORTANT: If the Figma Dev Mode MCP Server returns a localhost source for an image or an SVG, use that image or SVG source directly
- IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload
- IMPORTANT: do NOT use or create placeholders if a localhost source is provided
# MCP Servers
## Figma Dev Mode MCP Rules
- The Figma Dev Mode MCP Server provides an assets endpoint which can serve image and SVG assets
- IMPORTANT: If the Figma Dev Mode MCP Server returns a localhost source for an image or an SVG, use that image or SVG source directly
- IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload
- IMPORTANT: do NOT use or create placeholders if a localhost source is provided
- IMPORTANT: Always use components from `/path_to_your_design_system` when possible
- Prioritize Figma fidelity to match designs exactly
- Avoid hardcoded values, use design tokens from Figma where available
- Follow WCAG requirements for accessibility
- Add component documentation
- Place UI components in `/path_to_your_design_system`; avoid inline styles unless truly necessary
Adicionar isso uma vez pode reduzir drasticamente a necessidade de solicitações repetitivas e garante que os colegas de equipe ou agentes sigam consistentemente as mesmas expectativas.
Verifique a documentação do seu cliente IDE ou MCP para saber como estruturar as regras e experimente para descobrir o que funciona melhor para sua equipe. Orientações claras e consistentes frequentemente resultam em um código melhor e mais reutilizável, com menos idas e vindas.
Divida grandes seleções
Divida as telas em partes menores (como componentes ou blocos lógicos) para resultados mais rápidos e confiáveis.
Seleções grandes podem deixar as ferramentas mais lentas, causar erros ou resultar em respostas incompletas, especialmente quando há contexto demais para o modelo processar. Em vez disso:
- Gere código para seções menores ou componentes individuais (por exemplo, Cartão, Cabeçalho, Barra Lateral)
- Se estiver lento ou travado, reduza o tamanho da sua seleção
Isso ajuda a manter o contexto gerenciável e os resultados mais previsíveis, tanto para você quanto para o modelo.
Se algo no resultado não parecer correto, geralmente é bom revisar o básico: como o arquivo Figma está estruturado, como o prompt é escrito e qual contexto está sendo enviado. Seguir as melhores práticas acima pode fazer uma grande diferença e frequentemente leva a um código mais consistente e reutilizável.