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.

  Saiba mais sobre o Code Connect →

Etapa 1: Ativar o servidor MCP

1. Abra o aplicativo Figma para desktop e confira se você atualizou para a versão mais recente.
2. Crie ou abra um arquivo do Figma Design.
3. No canto superior esquerdo, abra o menu do Figma.
4. 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.

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.

{
  "mcpServers": {
    "Figma Dev Mode MCP": {
      "url": "http://127.0.0.1:3845/sse"
    }
  }
}

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

1. Selecione um quadro ou camada dentro do Figma usando o app para desktop.
2. Solicite ao seu cliente que ajude a implementar sua seleção atual.
   

Com links

1. Copie o link para um quadro ou camada no Figma.
   
2. Solicite ao seu cliente que ajude a implementar o design na URL selecionada.

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.

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ão Group 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:

1. Gere código para seções menores ou componentes individuais (por exemplo, Cartão, Cabeçalho, Barra Lateral)
2. 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.