Sobre o MCP
O Protocolo de Contexto de Modelo ↗ (MCP) é um padrão de código aberto para como diferentes agentes e aplicações de IA se comunicam entre si ou com outros sistemas externos.
Empresas e proprietários de aplicativos, como o Figma, podem criar seus próprios servidores MCP que seguem esse padrão para que seus aplicativos possam interagir com outros produtos e sistemas que também utilizam o padrão MCP.
Dessa forma, todas as suas ferramentas podem se comunicar entre si e passar contexto para melhorar cada etapa do seu processo de construção.
Use Figma MCP e Figma Design
O servidor MCP da Figma traz um contexto importante—como variáveis e componentes—dos seus arquivos do Figma Design e traz diretamente para o seu ambiente de desenvolvimento. Isso pode ajudar a melhorar seus fluxos de trabalho e manter seu código consistente com seus componentes de design.
Nós embalamos o servidor MCP da Figma com ferramentas úteis que permitem que você execute ações com base no conteúdo dos seus arquivos de design. Você não precisa conhecer todas as ferramentas disponíveis porque quando você escreve prompts em seu cliente de IA, ele encontrará automaticamente a ferramenta certa para o trabalho.
Sua ferramenta de agente deve ter um comando 'ferramentas' que você pode usar para ver a lista completa de ferramentas disponíveis. Consulte nossa documentação para desenvolvedores para informações mais atualizadas.
Use Figma MCP e Figma Make
O servidor MCP do Figma também funciona com Figma Make, a ferramenta de prompt-para-app com poder de IA do Figma que transforma suas ideias em protótipos interativos e apps — tudo baseado em código real. O Figma Make é ótimo para qualquer pessoa, não importa seu nível de habilidade ou função, para criar apps funcionais rapidamente.
Combinar Figma Make com o servidor MCP da Figma permite que modelos de IA vejam o código subjacente dos seus arquivos Figma Make e melhora a qualidade do código gerado em suas ferramentas de desenvolvimento alimentadas por IA.
Saiba mais sobre o Figma Make →
Use Figma MCP e FigJam
Você também pode usar o servidor MCP do Figma com o FigJam. Use as ferramentas de diagramação do FigJam — como formas e conectores — para criar fluxogramas e outros diagramas que ilustrem a lógica do aplicativo que você está tentando construir.
Então, com a ajuda do servidor MCP do Figma, suas ferramentas de agente de desenvolvimento podem referenciar o diagrama para rapidamente escrever código e lógica de aplicação para seus produtos.
Tipos de servidores e integrações
O Figma tem um servidor desktop MCP que você pode usar com o aplicativo Figma para desktop, e um servidor remoto MCP que é hospedado pela equipe do Figma para quando você usar o Figma no seu navegador.
Após configurar o servidor MCP da Figma, você pode integrá-lo com suas ferramentas de agente favoritas como VS Code, Claude Code, Cursor, e Windsurf. Se você está procurando uma ferramenta não abordada nesta coleção, você pode encontrar o catálogo completo de ferramentas suportadas no catálogo MCP da Figma. Recomendamos também que você verifique a documentação da ferramenta que está usando para as etapas de instalação mais recentes.
Ao estimular e escrever código, essas ferramentas de agente são o que geram o resultado final do código, então você pode descobrir que algumas ferramentas geram resultados mais próximos da sua visão do que outras. O servidor MCP do Figma apenas envia o contexto e os detalhes dos seus arquivos de design — não nenhum código.
Quando estiver pronto para começar a trabalhar com o servidor MCP do Figma, você pode conferir nossas outras aulas ou a documentação para desenvolvedores do Figma, para instruções passo a passo sobre como configurar seu servidor MCP em suas ferramentas favoritas.
Como o MCP melhora fluxos de trabalho
Depois de configurar o servidor MCP, você pode fazer coisas como:
- Selecionar um quadro do Figma e convertê-lo em código com uma ferramenta de agente de desenvolvimento.
- Integrar variáveis, componentes e dados de layout diretamente ao seu prompt. Isto é especialmente útil para design systems e fluxos de trabalho baseados em componentes.
- Reunir recursos de código dos arquivos Figma Make e fornecê-los às suas ferramentas de agente como contexto. Isso pode ajudar à medida que você passa de um protótipo para uma aplicação pronta para produção.
Com Dev Mode e Code Connect
O servidor MCP do Figma funciona ainda melhor quando você conecta sua base de código ao Figma com o Dev Mode e Code Connect. O Dev Mode é uma interface centrada no desenvolvedor que se destina a inspecionar designs e navegar neles. Você pode acessar o Dev Mode na barra de ferramentas. E Code Connect é a ponte que conecta sua base de dados de componentes ao Dev Mode.
Após configurar o Code Connect, você poderá ver o código real que está diretamente mapeado para sua base de código ao inspecioná-los no Dev Mode. E com o servidor MCP do Figma, suas ferramentas de desenvolvimento de agente podem gerar código com base nos seus designs e na base de código conectada, garantindo que seu código e design estejam sempre sincronizados.
Para obter instruções detalhadas sobre como configurar o Code Connect, confira nossa documentação para desenvolvedores. E para saber mais sobre o Dev Mode, confira nosso vídeo introdutório sobre o Dev Mode no YouTube →
Conclusão
E isso é tudo para esta visão geral rápida sobre o que é o MCP e como o servidor MCP do Figma pode...
- Trazer o contexto dos seus design systems para suas ferramentas de agente de desenvolvimento
- Usar o servidor Figma MCP com o Figma Make
- Aumentar a consistência da saída do seu código por meio do Code Connect enquanto utiliza seus componentes existentes do design system
Design systems podem ajudar sua equipe a projetar de forma consistente em escala. Saiba mais sobre design systems em nosso curso de Introdução a design systems →
Se você está ansioso para começar, confira nossas próximas aulas sobre como configurar o servidor MCP do Figma para algumas das ferramentas de desenvolvimento de IA mais populares como Cursor, VS Code e Claude Code.
Teste seus conhecimentos!