Figma Dev Mode MCP Server expõe variáveis e componentes direto para agentes de código

O problema que o MCP Server tenta encurtar

Todo time que já fez handoff de design sabe o ritual: o dev abre o arquivo no 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 →, inspeciona camada por camada, copia valores hexadecimais, mede espaçamento no olho e torce para não ter perdido nenhuma variável de tema no caminho. É lento e é onde a maior parte da divergência entre design e código nasce.

O 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, descrito no guia oficial do Figma Help Center, tenta resolver isso de outro jeito: em vez do dev traduzir o design manualmente, um agente de código conectado via Model Context Protocol lê a estrutura do arquivo Figma diretamente e extrai variáveis, componentes e dados de layout para dentro do editor. O MCP é o protocolo padrão que permite a ferramentas como Claude Code, Cursor, VS Code, Windsurf e Copilot CLI conversar com fontes de dados externas de forma uniforme, e o Figma implementou seu próprio servidor em cima dele.

Dois jeitos de ligar o servidor, dois níveis de acesso

O guia descreve duas formas de conectar o MCP Server, e a diferença entre elas importa para quem vai decidir qual usar:

O próprio Figma recomenda o servidor remoto como opção preferencial, justamente por cobrir mais clientes e mais recursos, incluindo a escrita direta no canvas do Figma Design e do FigJam.

O que o agente consegue puxar do arquivo

Com o servidor conectado, o agente ganha acesso a um conjunto de ferramentas que vão muito além de "ler o texto da camada". O guia lista, entre outras capacidades:

• Extrair contexto de design: variáveis, componentes e dados de layout direto no IDE, útil especialmente para design systems e fluxos baseados em componentes.
• Gerar código a partir de um frame selecionado no Figma.
• Puxar recursos de arquivos FigJam (diagramas, fluxos, mapas de arquitetura) para usar como contexto de código.
• Puxar recursos de arquivos Make, para quem está migrando de protótipo para aplicação de produção.
• Escrever direto no canvas do Figma Design e do FigJam, criando ou modificando frames, componentes, variáveis e auto layout usando o design system como fonte de verdade (só no servidor remoto).
• Capturar a UI viva de um app em produção, staging ou localhost e transformá-la em camadas editáveis no Figma Design (também só no servidor remoto, com clientes selecionados).

Na prática, o fluxo mais comum começa com um link: você seleciona uma camada no Figma, clica em "Copy link to selection" e cola a URL no seu agente. O cliente MCP não navega até a URL, mas extrai o ID do nó daquele link e usa isso para pedir ao servidor o contexto daquele objeto específico. É assim que Cursor, Claude Code ou Copilot sabem qual frame você quer implementar sem você precisar descrever tudo em texto.

Code Connect é o que evita reinventar componente

Um risco óbvio de gerar código a partir de um frame é o agente simplesmente desenhar divs e estilos do zero, ignorando que aquele botão já existe como componente no seu codebase. É aí que entra o Code Connect: ele mapeia componentes do Figma para os componentes reais do seu repositório, então o código gerado reusa Button, Card ou o que quer que já exista, em vez de recriar uma versão paralela.

O guia também menciona "Skills", pacotes de instruções que ajudam o agente a decidir qual ferramenta MCP chamar e em que ordem, para tarefas como conectar componentes ao Code Connect, gerar regras de design system alinhadas ao codebase ou traduzir um design em código pronto para produção. É importante notar o que o próprio Figma deixa explícito sobre esse recurso:

Skills não substituem conexões MCP nem adicionam novas capacidades ao servidor. Elas reduzem configuração e tentativa e erro empacotando fluxos de trabalho recomendados em instruções reutilizáveis.

Skills don't replace MCP connections or add new MCP capabilities. They reduce setup and guesswork by packaging recommended workflows into reusable instructions.Figma, Guide to the Dev Mode MCP Server

Ou seja: Skills orientam o agente, não ampliam o que ele consegue acessar.

O detalhe de custo que muda o cálculo de adoção

Antes de colocar isso no fluxo do time inteiro, vale registrar um ponto que o próprio guia faz questão de destacar duas vezes: a escrita direta no canvas está disponível de graça só durante o período de beta. O Figma já avisa que eventualmente isso vira um recurso pago baseado em uso. Já o recurso de capturar a UI viva tem uma restrição diferente: exige o servidor remoto e, no momento, é suportado apenas por clientes selecionados, sem nenhuma nota de preço associada no guia. Decidir arquitetura de time em cima de uma ferramenta grátis que vai virar paga é um risco de produto, não só de engenharia.

Onde isso quebra sem curadoria humana

Aqui mora o ângulo que mais importa para quem pensa em acessibilidade e design system como contrato, não como sugestão. O MCP Server extrai dados visuais e estruturais: cor, espaçamento, hierarquia de camadas, variáveis de tema. Ele não extrai intenção semântica nem valida se aquilo é acessível.

Em resumo: o servidor é excelente para reduzir o trabalho de tradução visual, mas não audita o que está sendo traduzido. Isso cria três pontos de atenção concretos:

• Se a variável de cor do design já tem contraste insuficiente, o agente reproduz esse contraste insuficiente no código, sem avisar nada, porque não é função dele julgar WCAG.
• Escrever direto no canvas usando "o design system como fonte de verdade" pressupõe que o design system já esteja correto e completo. Qualquer débito técnico ou visual existente é replicado automaticamente, em escala, sem um humano no meio para questionar.
• Capturar a UI viva de produção e trazê-la de volta para o Figma como camadas editáveis é um fluxo reverso interessante, mas se essa UI tem gambiarras locais que nunca foram levadas de volta ao componente oficial, essas gambiarras viram "componentes-fantasma" no Figma, sem mapeamento no Code Connect e sem relação real com o design system.

Nenhum desses três pontos é hipotético: são consequências diretas de como as próprias ferramentas foram descritas no guia, não falhas de implementação a corrigir depois.

O que muda, de fato, pra quem trabalha nisso

Para quem desenvolve, o ganho real é parar de caçar valor de variável manualmente: o contexto de design chega estruturado no IDE, pronto para virar prompt. Para quem projeta, o ganho é um canal mais direto entre decisão de design e implementação, com Code Connect mantendo os dois lados amarrados ao mesmo componente.

O que não muda, e não deveria mudar, é a necessidade de revisão humana antes de qualquer coisa gerada por agente (seja código, seja frame novo no Figma) entrar em produção. Auditoria de contraste, teste de navegação por teclado, leitor de tela e revisão de que o componente "novo" não é, na verdade, uma duplicata não mapeada do que já existe no design system seguem sendo trabalho de gente, feito antes do merge e antes do commit no arquivo de design, não depois.

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

The remote server is available on all seats and plans.

The desktop server is available on a Dev or Full seat for all paid plans.

You must use a code editor or application that supports MCP servers (i.e. VS Code, Cursor, Windsurf, Claude Code, Codex). See our MCP catalog for a full list of supported clients .

For information about usage and rate limits, see Plans, access, and permissions in the Figma developer documentation.

The Figma MCP server helps developers explore and implement designs quickly and accurately:

Use your agentic tools to create and modify native Figma content directly in Figma Design, FigJam, and Figma Slides.

Note: We're quickly improving how Figma supports AI agents. This will eventually be a usage-based paid feature, but is currently available for free during the beta period.

Get design context and code from your Figma designs, FigJam, and Make files

Capture your live UI as design layers, bringing the interfaces rendered by your code to Figma Design files

Enhance the way you work with design components and Code Connect

Use fonts uploaded to your account with the MCP Server and Figma Agent

Note: This guide is a high-level look at what's offered by the Figma MCP server. For specific instructions about using the server and example prompts, see:

Get started with the Figma MCP server

Remote Figma MCP server installation (preferred)

Desktop Figma MCP server installation

Figma skills for MCP

Tools and prompts

The Figma MCP collection

Detailed articles are also available in the Figma developer documentation .

The tools within Figma's MCP server bring additional context from Figma into your workflow, so your code doesn't just match your existing systems, but your design, too. MCP servers are part of a standardized interface for AI agents to interact with data sources using the Model Context Protocol .

See our Figma MCP Collection to learn more about the MCP server and bringing Figma into your workflow → Note: This page is a general overview of the Figma MCP server. For detailed instructions and code samples, see the Figma MCP server developer documentation . With the server enabled, you can:

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

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

Note: This feature requires the remote Figma MCP server . We're quickly improving how Figma supports AI agents. This will eventually be a usage-based paid feature, but is currently available for free during the beta period.

This feature is continuously being improved. If you encounter issues, you can report the issues using Fig, our support chatbot , or by emailing support (paid plans) .

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 in Figma. 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 currently supported by select clients.

This feature is continuously being improved. If you encounter issues, you can report the issues using Fig, our support chatbot , or by emailing support (paid plans) .

Learn more about generating designs from your interfaces

Generate code from selected frames

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

Extract design context

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

Retrieve FigJam resources

Access content from your FigJam diagrams and use it in your code generation workflow. Incorporate early-stage ideas, flows, or architecture maps directly into development.

Retrieve Make resources

Gather code resources from Make files and provide them to the LLM as context. This can help as you move from prototype to production application.

Keep your design system components consistent with Code Connect

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

Learn more about Code Connect

Set up the MCP server You can connect the Figma MCP server in two ways:

Remote MCP server (preferred) : Connects directly to Figma's hosted endpoint at https://mcp.figma.com/mcp . Learn how to install the remote MCP server.

Desktop MCP server : Runs locally through the Figma desktop app. Learn how to install the desktop MCP server. The desktop MCP server is primarily for specific use cases for organizations and enterprises. For the broadest set of features, use the remote MCP server.

Note: The MCP server and Figma Agent can access fonts uploaded to your account. Learn how to add a font to Figma.

--> Connect the MCP server to your editor Follow instructions for your specific editor to connect to the Figma MCP server, either locally or remotely. 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 ✓

Android↳Android46 conteúdosAndroid push notifications com Quasar Framework, Firebase e integração com WordPressDev (Back & Front) · mai 2019O X do Xamarin Forms – O guia das funcionalidades nativas - Parte 02: AndroidDev (Back & Front) · abr 2019Modularização de AndroidDev (Back & Front) · ago 2019Ver tudo em Dev (Back & Front) → Studio

Augment Code

Claude Code

Figma plugin

Claude Desktop

Figma connector

Codex by OpenAI

Codex Skills

Copilot CLI

Cursor

Factory

Firebender

Gemini CLI

Extension

Kiro

Kiro Powers

Openhands

Replit

VS Code

Warp

Xcode (beta)

About Skills Skills provide guidance for how an agent should complete specific tasks, using a combination of MCP tool calls and detailed instructions. While the Figma MCP server exposes individual tools, Skills help agents understand which tools to use, how to sequence them, and how to apply the results when working with Figma designs. Skills can guide agents through workflows like:

Connect Figma design components to code components using Code Connect

Generate design system rules aligned to your codebase

Translate designs into production-ready code

Skills don't replace MCP connections or add new MCP 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 via community contributions in the Figma community-resources repo on GitHub. Tip: For the latest list of supported editors and clients, check out our MCP Catalog . Prompt your MCP client The Figma MCP server introduces a set of tools that help LLMs translate designs in Figma. Once connected, you can prompt your MCP client to access a specific design node. For a complete list of tools and examples, see Tools and Prompts . First, follow the instructions to install the Figma MCP server for your preferred MCP client. We provide instructions for:

Xcode

For other MCP clients, follow the instructions in your client's documentation for adding MCP servers. See the table under Connect the MCP server to your editor for links. Example: Get design context Getting design context and code from files is link-based. To get design context:

In Figma Design, select the layer you want to get design context for.

Right-click a frame or layer in Figma and select Copy link to selection .

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

Your client won't be able to navigate directly to the selected URL, but it will extract the node ID that is required for the MCP server to identify which object to return information about. Example: Send UI to Figma Note: Currently available using the remote Figma MCP server with certain clients. See the table under Connect the MCP server to your editor for a list of supported clients. Sending the live UI of your web app or site to Figma is done through 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 for you, or give you a link to follow.

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

Let your client know when you're finished. Your client will give you a link to open the Figma file that was created.

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