Figma Dev Mode MCP Server define o que a IA vê antes de gerar código

O guia oficial do Dev Mode MCP↳MCP7 conteúdosArquitetura de Sistemas Cognitivos: Integração de RAG, MCP e LLMs no Ecossistema .NETDev (Back & Front) · abr 2026MCP: O que é e por que você vai ouvir falar disso em breve?AI · jul 2025Agentes de IA com LLMs de Código Aberto: Integração Prática com o Model Context Protocol (MCP)AI · ago 2025Ver tudo em AI → Server mostra que o agente de IA só enxerga tokens, componentes e specs que estão no arquivo Figma↳Figma3 conteúdosFigma Dev Mode funciona mesmo? Testando na práticaDev (Back & Front) · mar 2025Claude Design: nova aposta da Anthropic contra Figma e MicrosoftProduto & UX · abr 2026A importância do HTML e CSS para quem trabalha com UI Design e Design SystemProduto & UX · dez 2024Ver tudo em Produto & UX →: o que falta ali vira código inventado, e isso muda o que o time precisa validar antes do merge.

O Figma Help Center publicou o guia oficial do Dev Mode MCP Server, documentando como agentes de IA conectados via Model Context Protocol (MCP) leem arquivos Figma para gerar código e, numa via menos discutida, escrevem de volta no canvas. O guia atual descreve um escopo amplo do recurso: extração de design context, leitura de specs, captura de UI ao vivo e escrita nativa no arquivo.

Para quem vive na ponte entre design e engenharia, o ponto central não é "a IA gera código" (isso já existia em plugins avulsos). É que o MCP Server formaliza uma interface única entre o arquivo Figma e qualquer cliente MCP, de Cursor a Claude Code a VS Code. O que muda é o contrato: o agente só vê o que está estruturado no arquivo como variável, componente ou auto layout. Design solto, sem tokens, vira interpretação da IA, não extração.

Como o agente enxerga o arquivo

O fluxo descrito no guia é baseado em link, não em upload de imagem. O desenvolvedor clica com o botão direito num frame ou camada no Figma Design, escolhe Copy link to selection e cola esse link no cliente MCP. O cliente não abre o link: ele extrai o node ID que identifica aquele objeto específico e usa isso para consultar o servidor.

A partir daí, o agente pode puxar quatro tipos de contexto, segundo o Help Center:

• Variáveis e componentes: os tokens de design system (cor, espaçamento, tipografia) e os componentes reutilizáveis, para quem trabalha com workflows baseados em design system.
• Dados de layout: estrutura de auto layout, hierarquia de camadas e propriedades de frame.
• Recursos do FigJam: conteúdo de diagramas e fluxogramas, para que decisões de arquitetura feitas em brainstorm cheguem ao código.
• Recursos do Make: arquivos de protótipo do Figma Make, úteis na transição de protótipo para produção.

Isso importa porque muda a pergunta que o time de produto precisa fazer antes de aprovar um PR gerado por agente: não é "o código bate com o design visualmente", é "o design system que alimentou o agente está correto e completo". Se uma variável de cor está mal nomeada ou um componente não tem variante documentada, o agente vai gerar algo plausível, mas errado, e vai gerar com a mesma confiança de quando está certo.

Code Connect como camada de consistência

O guia aponta o Code Connect como a peça que evita que o código gerado reinvente componentes que já existem no repositório. Em vez de o agente criar um novo Button do zero a cada prompt, o Code Connect mapeia o componente Figma ao componente real do codebase, e o agente reaproveita essa referência.

Na prática, isso desloca o trabalho de validação: sem Code Connect configurado, revisar um PR gerado por IA significa checar se o componente novo diverge do padrão existente (nome de prop diferente, classe CSS↳CSS31 conteúdosArquitetura CSS: CSS FuncionalDev (Back & Front) · set 2019Entendendo posicionamento com CSS de uma vez por todasDev (Back & Front) · jul 2025Sites que combinam estética e usabilidade: reflexos da evolução do CSSDev (Back & Front) · fev 2025Ver tudo em Dev (Back & Front) → fora do design token, estado de foco ausente). Com Code Connect mantido em dia, essa checagem vira responsabilidade de quem cuida do mapeamento, não de quem revisa cada PR individualmente. É uma troca: menos retrabalho recorrente por mais disciplina de manutenção do mapeamento.

A via contrária: o agente escreve no canvas

A parte do guia que muda mais a dinâmica de handoff é a escrita no canvas. Com o servidor remoto e um Full seat, o agente pode criar e atualizar frames, componentes, variáveis e auto layout diretamente no arquivo Figma, usando o design system da equipe como fonte de verdade. O recurso é gratuito durante o período de beta e vai se tornar paga por uso.

Há também o caminho de capturar UI ao vivo: o cliente MCP abre uma página em produção, staging ou localhost, e transforma elementos reais da interface em camadas editáveis no Figma. Isso serve para levar um fluxo que já existe em código de volta para exploração de design, útil quando o time quer refinar algo que foi implementado rápido e nunca passou por design review formal.

Esse fluxo reverso cria uma pergunta nova para quem faz handoff: se o design pode nascer do código e o código pode nascer do design, quem é a fonte de verdade num dado momento? O guia não resolve isso, e é razoável que não resolva: a resposta depende do processo de cada time, não da ferramenta.

Figma Specs: contexto antes de o agente começar

Outra peça do guia é a figma-spec skill, que permite ao agente ler, criar e atualizar specs do time antes de gerar qualquer código. A ideia é que requisitos e decisões fiquem registrados na spec e sejam capturados de volta nela conforme o agente trabalha, criando um histórico de por que uma decisão de implementação foi tomada.

Figma Specs está em beta aberto, e escrever numa spec exige o servidor remoto e acesso de edição ao arquivo. Para quem traduz requisito de produto em especificação técnica, isso é relevante: a spec deixa de ser só documentação para virar input estruturado que o agente consome antes de codar, o que significa que specs mal escritas agora têm custo mais alto, alimentam código errado, não só confusão humana.

Dois jeitos de rodar o servidor, requisitos diferentes

O Figma for Government só suporta o servidor desktop, com limitações atuais de ferramentas disponíveis. A lista de clientes compatíveis (Cursor, VS Code, Claude Code, Amazon Q, entre outros) está na catalogação própria da Figma; para a lista mais atualizada, é preciso consultar o Figma MCP catalog diretamente.

O que isso muda antes do merge

Em resumo: a validação de um PR gerado a partir do MCP Server deixa de ser só "o visual bate" e passa a incluir se a fonte que alimentou o agente, variáveis, componentes e specs, estava correta e completa. Isso empurra trabalho de QA para trás na cadeia: antes de confiar no código gerado, alguém precisa confiar no design system que o originou.

Para acessibilidade, o guia não menciona nenhuma checagem automática de contraste, foco ou semântica no fluxo de geração de código. Isso significa que o agente reproduz exatamente o que está no design, incluindo eventuais falhas de acessibilidade que já existiam no arquivo Figma. Rodar um agente de IA sobre um design sem revisão de acessibilidade prévia não cria um problema novo, mas automatiza a reprodução do problema antigo em escala maior.

O caso em que isso não vale a pena é razoavelmente claro: times sem Code Connect mapeado, sem design system de variáveis consolidado e sem specs mantidas vão gerar código plausível e inconsistente, trocando o trabalho de desenhar handoff manual pelo trabalho de revisar handoff automatizado linha a linha. O MCP Server reduz fricção de leitura do arquivo; ele não substitui a disciplina de manter o arquivo correto.

Fonte 1: Figma Help Center — Guide to the Dev Mode MCP Server (https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Dev-Mode-MCP-Server)

Guide to the Figma MCP server – Figma Learn - Help Center

Before you start

Who can use this feature

Starter, Professional, Education, Organization, Government, and Enterprise plans

Requires an MCP client listed in the Figma MCP catalog

The Figma MCP server brings Figma into your AI workflow. It gives AI agents the design context they need to generate code from your Figma files, and lets agents write native Figma content back to the canvas. MCP servers use the Model Context Protocol , a standard interface that lets AI agents interact with data sources.

Note: This guide is a high-level overview of the Figma MCP server. For setup instructions and example prompts, see:

Get started with the Figma MCP server

Figma skills for MCP

Tools and prompts

The Figma MCP collection

What you can do with the Figma MCP server

Let your agent write directly to the canvas in Figma Design, FigJam, and Figma Slides

Create and modify native Figma content from your MCP client. With the right skills, agents can build and update frames, components, variables, and auto layout in your files, using your design system as the source of truth.

Note: This feature requires the remote Figma MCP server and a Full seat to write outside your drafts. It's free during the beta period and will eventually become a usage-based paid feature.

Learn more about writing to the canvas

Generate designs from the live UI of your web apps and sites

Turn live UI from your browser (production, staging, or localhost) into editable design layers. Send pages, elements, or whole flows to Figma Design for exploration, alignment, and refinement.

Note: This feature requires the remote Figma MCP server and is supported by select clients.

Learn more about generating designs from your interfaces

Generate code from selected frames

Select a Figma frame and turn it into code. This is useful for product teams building new flows or iterating on app features.

Extract design context

Pull variables, components, and layout data into your IDE. This is especially useful for design systems and component-based workflows.

Retrieve FigJam resources

Use content from your FigJam diagrams in your code generation workflow, so early-stage ideas, flows, and architecture maps carry into development.

Retrieve Make resources

Gather code resources from Make files and provide them to your agent as context. This helps as you move from prototype to production.

Keep generated code consistent with Code Connect

Improve output quality by reusing your actual components. Code Connect keeps generated code consistent with your codebase.

Learn more about Code Connect

Give your agent project context with Figma Specs

Use the figma-spec skill to let your agent read, create, and update your team's specs. Share requirements before your agent starts building, and have it capture decisions and discoveries back in the spec as it works.

Note: Figma Specs is in open beta. Writing to a spec requires the remote Figma MCP server and edit access to the file.

Learn more about the figma-spec skill

Write to canvas and code to canvas are continuously being improved. If you run into issues, report them using Fig, our support chatbot , or by emailing support (paid plans) . Note: The MCP server and Figma Agent can access fonts uploaded to your account. Learn how to add a font to Figma. Set up the MCP server You can connect to the Figma MCP server in two ways:

Remote MCP server (recommended) : Connects directly to Figma’s hosted endpoint at https://mcp.figma.com/mcp , without the Figma desktop app. The remote server offers the broadest set of features and is the best choice for most users. Learn how to install the remote MCP server.

Desktop MCP server : Runs locally through the Figma desktop app . The desktop server is intended for specific organization and enterprise needs. It requires a Dev or Full seat on a Professional, Education, Organization, Government, or Enterprise plan . Learn how to install the desktop MCP server.

For information about usage and rate limits, see Plans, access, and permissions . Note: Figma for Government supports the desktop server only. See Figma for Government for available tools and current limitations. If you plan to write to the canvas, also install Figma’s skills for your MCP client.

Skills help your agent use the write tools more reliably and follow the right workflow when creating or updating content in Figma. Connect the MCP server to your editor Follow the instructions for your editor to connect to the remote or desktop server. Some clients also support skills , which add agent-level instructions that help AI tools work more effectively with Figma designs.

Client Desktop server support Remote server support Write to canvas (remote only) Plugin/skills support

Amazon Q ✓

Amp

Android Studio

Augment Code

Claude Code

Figma plugin

Claude Desktop

Figma connector

ClickUp

Codex by OpenAI

Codex Skills

Copilot CLI

Cursor

Dia

Factory

Firebender

Gemini CLI

Extension

Junie by JetBrains

Kiro

Kiro Powers

Linear

Meta Muse

Mistral

Notion

OpenCode

Openhands

Replit

Sarvam Agents

VS Code

Warp

Xcode

Tip: For the latest list of supported clients, see the Figma MCP catalog . If you're a developer who wants to connect a new MCP client, join the waitlist . About skills Skills tell an agent how to complete specific tasks, combining MCP tool calls with detailed instructions. The Figma MCP server exposes individual tools; skills help agents understand which tools to use, in what order, and how to apply the results. Skills can guide agents through workflows like:

Connecting Figma design components to code components with Code Connect

Generating design system rules aligned to your codebase

Translating designs into production-ready code

Reading and updating Figma Specs, so your agent works from your team's requirements

Skills don’t replace the MCP connection or add new capabilities. They reduce setup and guesswork by packaging recommended workflows into reusable instructions. To learn more about skills:

Use skills with the Figma MCP server

Note: Skills are also available from the Figma Community and through community contributions in the Figma community-resources repo on GitHub. Prompt your MCP client Once connected, you can prompt your MCP client to work with a specific design node. For a complete list of tools and example prompts, see Tools and prompts . Example: Get design context Getting design context and code from files is link-based. To get design context:

In Figma Design, right-click the frame or layer you want design context for and select Copy link to selection .

In your MCP client, paste the link and prompt your client to help you implement the design.

Your client won't open the link directly. Instead, it extracts the node ID the MCP server needs to identify which object to return information about. Example: Send UI to Figma Note: Requires the remote Figma MCP server and a supported client. See Connect the MCP server to your editor . You send the live UI of your web app or site to Figma through a conversation with your MCP client:

Prompt your MCP client: "Start a local server for my app and capture the UI in a new Figma file."

Follow the steps your client provides. Your client will open a browser window or give you a link to follow.

Use the capture toolbar to capture pages, elements, and states of your web app or site.

Tell your client when you're finished. Your client will give you a link to the new Figma file.

Fonte: Figma Help Center — Guide to the Dev Mode MCP Server