Sobre esta coleção
Bem-vindo à coleção MCP do Figma! Esta coleção contém vídeos e artigos sobre os servidores MCP do Figma para ajudar você e sua equipe a aprenderem mais sobre o que é, e como configurá-lo dentro de sua equipe para melhorar seus fluxos de trabalho de design e desenvolvimento ao usar ferramentas de desenvolvimento agêncicas.
Nota: Estamos sempre melhorando e adicionando novos recursos, portanto, certifique-se de verificar aqui quaisquer atualizações e novos conteúdos.
O servidor MCP do Figma
O servidor MCP do Figma conecta design e desenvolvimento ao tornar os detalhes em seu Figma Design, FigJam e arquivos Figma Make — como nomes de camadas, layouts e variáveis — disponíveis para grandes modelos de linguagem (LLMs) para que você possa usá-los ao longo do seu processo de desenvolvimento.
Quando você usa o servidor MCP do Figma com um arquivo Figma Make, os modelos de IA poderão visualizar todo o código subjacente por trás desse arquivo Make, e não apenas uma imagem ou instantâneo do seu arquivo - melhorando a precisão do código gerado em suas ferramentas de desenvolvimento.
Compartilhar esses dados estruturados entre o Figma e suas ferramentas de agente permite que você aproveite seus design systems existentes para criar produtos ainda mais rápido.
Esta coleção de lições aborda:
- O Protocolo de Contexto de Modelo — ou MCP
- O servidor MCP do Figma e como ele funciona
- E algumas melhores práticas que preparam as equipes para o sucesso
Quer você seja um designer preparando seus designs finais para entrega, ou um desenvolvedor codificando com ferramentas alimentadas por IA, você aprenderá como o servidor MCP traz o contexto de seus arquivos do Figma Design e Figma Make para seu fluxo de trabalho.
Requisitos
Você precisará de algumas coisas para começar, incluindo:
- Um editor de código ou aplicativo compatível com servidores MCP
- Um arquivo do Figma Design, Figma Make ou FigJam.
- Um acesso com permissão para o Dev Mode (acesso completo ou acesso de desenvolvedor) para permissão total ao servidor MCP. Outros acessos terão limites mensais.
- O aplicativo do Figma para desktop (se estiver usando o servidor MCP do Figma para desktop)
Vamos mostrar como configurar o servidor MCP do Figma em algumas ferramentas de agente de desenvolvimento diferentes, como VS Code, Claude Code, Cursor, e Windsurf.
Em seguida, vamos mostrar como usar o servidor MCP remoto do Figma com o aplicativo web do Figma, mas se você preferir usar o aplicativo Figma para Desktop e hospedar o servidor MCP localmente, também vamos guiá-lo por essas etapas.