Configure o servidor MCP do Figma no Claude Code com o plugin ou um único comando manual, autentique em dois cliques e veja quais ferramentas de leitura e escrita ele expõe. Inclui as cinco skills, Code Connect, limites de uso por assento e soluções para falhas comuns.
Cole um link do Figma no Claude Code e ele consegue ler o layout, o espaçamento, as cores e os componentes do frame antes de escrever uma única linha de código. Essa é a proposta do servidor MCP do Figma, e a configuração leva dois comandos e um clique no navegador. Tudo o que vem depois é sobre escolher as ferramentas certas, ficar dentro dos limites de uso e dar ao agente contexto suficiente para parar de inventar os próprios botões.
Este artigo mostra a configuração exata, as ferramentas que o servidor expõe, as skills que o Figma oferece para fluxos de escrita, uma rotina de frame para código que você pode copiar e os limites que mais pegam as pessoas de surpresa. Os detalhes vêm da documentação para desenvolvedores do Figma como ela estava em outubro de 2026, então confira essas páginas se algum comando parecer diferente na sua máquina.
O servidor MCP do Figma é uma ponte. De um lado está o seu arquivo no Figma: camadas, variáveis, componentes, quadros do FigJam e recursos do Make. Do outro está um cliente MCP, aqui o Claude Code. No meio, um conjunto de ferramentas permite que o agente faça perguntas sobre um design e, com as permissões certas, altere esse design.
A documentação do Figma descreve cinco funções. O servidor pode criar e modificar conteúdo nativo do Figma na tela, transformar frames selecionados em código, extrair o contexto do design, como variáveis, componentes e dados de layout, recuperar recursos de arquivos do Make e manter o código alinhado ao seu design system por meio do Code Connect.
A mudança real está em sair de capturas de tela e chegar à estrutura. Uma captura de tela diz ao modelo como é um botão. O contexto do design diz que o botão é uma instância de um componente, usa uma variável de espaçamento nomeada e fica em uma linha de auto-layout com um espaço fixo. Código escrito a partir dessa estrutura fica muito mais perto de algo que você consegue fazer merge.
O Figma oferece duas versões do servidor, e a escolha importa porque algumas ferramentas existem em apenas uma delas.
| Servidor remoto | Servidor desktop | |
|---|---|---|
| Conexão | Endpoint hospedado pelo Figma, https://mcp.figma.com/mcp | Local, pelo app desktop do Figma |
| App desktop necessário | Não | Sim |
| Seleção de ferramentas | Conjunto mais amplo, incluindo todas as ferramentas exclusivas do remoto | Conjunto menor |
| Ideal para | A maioria das pessoas | Implantações do Figma for Government, configurações somente locais |
O Figma considera o servidor remoto a melhor escolha para a maioria dos usuários, e é ele que o restante deste artigo usa.
Você precisa de um arquivo do Figma Design, Make ou FigJam, com permissão de visualização ou edição, e, de preferência, de um assento Full ou Dev. Outros tipos de assento também conectam, mas com uma cota mensal muito menor (os números estão na seção de limites abaixo). Só clientes MCP listados no catálogo MCP do Figma podem se conectar, e o Claude Code tem uma página de configuração própria lá.
Há dois caminhos e ambos chegam ao mesmo lugar. Escolha o plugin se você também quer as skills do Figma, e o comando manual se prefere uma configuração mínima.
claude plugin install figma@claude-plugins-official
O Figma recomenda este. O plugin reúne as configurações do servidor MCP e as Agent Skills para fluxos comuns, então uma única instalação entrega o servidor e as instruções que fazem as ferramentas de escrita se comportarem bem.
claude mcp add --transport http figma https://mcp.figma.com/mcp
Sem uma flag de escopo, o servidor fica registrado apenas para o projeto em que você está. Se quiser que ele funcione em todos, adicione --scope user:
claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp
Escopo de usuário significa que você não repete a instalação para cada repositório.
O servidor usa login pelo navegador, então nada precisa ser colado em um arquivo de configuração.
/mcp.Authentication successful. Connected to figma.Execute /mcp mais uma vez para confirmar que o servidor aparece como conectado. Depois, peça ao Claude para chamar a ferramenta whoami. Ela retorna o usuário autenticado e os planos, o que mostra de imediato se você está em um assento com cota utilizável.
💡 Dica: Se ferramentas sumirem no meio de uma sessão,
/mcpé o primeiro lugar para olhar. Ele mostra o status da conexão e permite autenticar de novo sem editar arquivos.
A referência de ferramentas do Figma lista dezenas de ferramentas. Você vai usar algumas poucas no dia a dia, então comece por elas e deixe o resto de lado até que uma tarefa exija.
| Ferramenta | O que faz | Só no remoto |
|---|---|---|
get_design_context | Extrai o contexto do design de uma camada ou seleção | Não |
get_metadata | Retorna um esboço XML esparso de uma seleção | Não |
get_screenshot | Captura uma tela de uma seleção | Não |
get_variable_defs | Recupera as variáveis e estilos usados em uma seleção | Não |
get_code_connect_map | Retorna o mapeamento de ID de nó para componente de código | Não |
get_code_connect_suggestions | Sugere mapeamentos de componente para código | Não |
get_context_for_code_connect | Fornece metadados de componentes para templates | Sim |
search_design_system | Pesquisa bibliotecas por componentes, variáveis e estilos | Sim |
get_libraries | Lista as bibliotecas de design assinadas e disponíveis | Sim |
get_figjam | Converte diagramas do FigJam em XML | Não |
get_motion_context | Extrai dados de animação | Não |
download_assets | Baixa exportações e imagens de origem originais | Sim |
Comece por get_design_context. É o motor por trás de "construa este frame". Combine com get_screenshot para que o agente tenha um alvo visual, e com get_variable_defs para que cores e espaçamentos venham dos seus tokens, e não de valores hex chutados. Quando um frame é enorme, get_metadata oferece um esboço esparso que serve para mapear a página antes de puxar os detalhes camada por camada.
| Ferramenta | O que faz | Só no remoto |
|---|---|---|
use_figma | Ferramenta de uso geral para criar, editar e inspecionar | Sim |
generate_figma_design | Gera camadas de design a partir de interfaces | Sim |
generate_diagram | Monta um diagrama do FigJam a partir de Mermaid | Sim |
create_new_file | Cria um arquivo em branco de Design, FigJam ou Slides | Sim |
generate_image | Gera uma imagem raster para download | Sim |
upload_assets | Envia imagens para um arquivo do Figma | Sim |
add_code_connect_map | Mapeia um ID de nó do Figma para um componente de código | Não |
send_code_connect_mappings | Confirma os mapeamentos de componente sugeridos | Não |
O servidor também traz ferramentas para shaders e plugins generativos, além de seis ferramentas weave_* que executam fluxos Weave baseados em créditos. A maior parte do trabalho de front-end nunca toca nelas. Vale conhecer um prompt pelo nome: create_design_system_rules, que gera um arquivo de regras para que o contexto do agente combine com a sua base de código.
Ferramentas de escrita são poderosas e fáceis de usar mal. A documentação do Figma lista skills de que o agente precisa para os fluxos correspondentes, e a instalação do plugin as traz junto. Se você seguiu o caminho manual, instale as skills do Figma para o seu cliente separadamente.
| Skill | Usada para |
|---|---|
figma-use | Fluxos do Figma Design |
figma-use-figjam | Operações do FigJam |
figma-use-slides | Figma Slides |
figma-shaders | Criação e atualização de shaders |
figma-generative-plugins | Criação e atualização de plugins generativos |
Se o seu trabalho é principalmente ler designs e escrever código, você mal vai notá-las. Elas importam no momento em que você pede ao Claude Code para criar ou editar algo dentro do Figma.
Mesmo com ferramentas perfeitas, o agente não conhece as suas convenções. Execute o prompt create_design_system_rules e deixe que ele rascunhe um arquivo de regras, depois corte o que a sua equipe realmente aplica e guarde em CLAUDE.md. Um exemplo curto:
Figma to code rules:
- Reuse components from src/components/ui before creating new ones.
- Map Figma variables to our CSS tokens. Never hardcode hex values.
- Use the project spacing scale, not the pixel values from the frame.
- Treat Figma output as a reference. Match our file structure and naming.
Quatro linhas como estas eliminam a maior parte das reclamações do tipo "por que ele criou um botão novo de novo".
get_design_context, e normalmente get_screenshot e get_variable_defs também.Um prompt que funciona bem:
Implement this frame using our existing components and tokens.
Do not add new dependencies. Figma link: <paste link here>
Depois da primeira passada, confira quatro coisas no diff antes de executar qualquer coisa:
💡 Dica: Trabalhe uma seção por vez. Um frame de página inteira gera uma montanha de contexto e uma montanha de código, e a sua cota de chamadas de leitura se esgota mais rápido do que você imagina.
O Code Connect é a forma como o Figma descobre que o seu componente Button é, na verdade, src/components/ui/Button.tsx. Quando esse mapeamento existe, o Claude importa o componente real em vez de escrever marcação nova.
Quatro ferramentas cuidam do ciclo. get_code_connect_map lê os mapeamentos existentes. get_code_connect_suggestions propõe novos, send_code_connect_mappings confirma os que você aceitar, e add_code_connect_map grava um único mapeamento diretamente. A última está isenta dos limites de uso, o que é útil quando você está mapeando uma biblioteca inteira.
Estes números vêm da página de limites de uso e acesso do Figma no momento em que este texto foi escrito. O Figma pode alterá-los, então confirme na página antes de planejar a implantação em uma equipe.
| Tipo de assento | Starter | Professional | Organization | Enterprise |
|---|---|---|---|---|
| View, Collab | Até 20 por mês | Até 20 por mês | Até 20 por mês | Até 20 por mês |
| Dev, Full | Até 200 por dia, 10 por minuto | Até 200 por dia, 15 por minuto | Até 600 por dia, 20 por minuto | Não especificado na tabela |
Os limites se aplicam às ferramentas que leem dados do Figma. add_code_connect_map, create_new_file e whoami são isentas.
O assento define a experiência. Um designer em assento View pode conectar e explorar, mas o fluxo diário pertence aos desenvolvedores com assento Full ou Dev. Se apenas duas pessoas da sua equipe têm esses assentos, faça com que sejam elas as que geram código, e deixe que todos os outros revisem os pull requests.
💡 Dica: Se o Claude chama três ferramentas de leitura por frame, 200 chamadas por dia somem rápido. Peça uma seção e deixe que
get_metadataescolha a camada certa antes de puxar o contexto completo.
As ferramentas não aparecem. Execute /mcp. Se o figma estiver listado, mas não conectado, escolha-o e autentique de novo. Se ele não aparecer de jeito nenhum, repita o comando de instalação e reinicie o Claude Code.
A saída ignora os seus componentes. Isso é um problema de contexto, não de ferramenta. Adicione o arquivo de regras em CLAUDE.md, crie mapeamentos do Code Connect para os seus dez componentes principais e diga no prompt para reutilizar componentes existentes antes de escrever novos.
Você bate no limite no meio da tarefa. Reduza o escopo, confira o seu assento com whoami e leve o trabalho pesado para um assento Full ou Dev. Um assento View ou Collab oferece cerca de 20 chamadas por mês, o que serve para uma demonstração, não para um fluxo de trabalho.
A maioria dos frames do Figma vem com retângulos cinza no lugar onde deveria haver fotografias, e o código gerado herda essa falta de graça. Preencha-os com imagens de aparência real antes da entrega e a construção parece pronta já na primeira execução.
No PicassoIA, o catálogo de texto para imagem inclui Seedream 5 Pro, GPT Image 2, Flux 2 Pro, Nano Banana Pro e P Image. Gere uma foto de destaque e depois coloque-a no frame manualmente ou peça ao Claude para inseri-la com upload_assets. O Figma tem a sua própria ferramenta generate_image, mas um modelo de imagem dedicado dá mais controle sobre lente, luz e composição.
Para movimento, transforme a mesma imagem fixa em um clipe curto com um modelo de vídeo como Seedance 2.5 Lite, Wan 3, Veo 3.1 Lite, LTX 2.5 Fast ou Kling v3 Video. Confira na página de cada modelo a opção de entrada de imagem. Um loop de cinco segundos atrás de um título costuma ser tudo o que uma landing page precisa.
A mesma plataforma também pode fazer o raciocínio. O Claude Sonnet 5 roda no PicassoIA como um modelo de texto que lê imagens, o que o torna uma forma rápida de rascunhar o arquivo de regras a partir de uma captura de tela do seu design system.
low, desativa o pensamento para a resposta mais rápida e mais barata. Use medium ou high quando a saída precisar raciocinar sobre muitos componentes, e xhigh ou max para trabalhos complicados com vários arquivos.💡 Dica: Um raciocínio mais pesado está disponível com o Claude Fable 5 e o Claude Opus 4.7 na mesma plataforma.
Agora você tem o ciclo completo. Conecte o servidor, adicione um arquivo de regras, construa uma seção por vez e mapeie seus componentes com o Code Connect para que a saída continue melhorando.
A parte que é fácil de pular são as imagens. Uma interface pronta precisa de fotos reais e de um pouco de movimento, e o Picasso IA oferece os modelos para os dois em um só lugar. Escolha um modelo de imagem, descreva a imagem de destaque que você quer e veja como ela muda o frame que você acabou de construir. Depois, teste um dos modelos de vídeo com a mesma foto e compare as duas versões lado a lado. Abra o PicassoIA e crie sua primeira imagem de destaque hoje.
Escolha seu idioma
