Figma Skills Para MCP:

Seu Claude Code Finalmente Vai Entender Seu Design System!

Se você já tentou usar o MCP do Figma com um LLM e se decepcionou com design tokens ignorados, layout bagunçado, aquele ciclo frustrante de correção. Essa novidade é para você!

O Figma lançou os Figma Skills: um conjunto de instruções estruturadas que orientam como o seu AI Agent deve se comportar ao trabalhar dentro do Figma.

MCP vs. Skills: qual é a diferença?

O MCP já existia e resolve a conexão técnica entre o LLM e o Figma. Mas conexão não é o mesmo que competência.

Skills entram para resolver exatamente isso: são orientações detalhadas de comportamento, como manipular componentes, como respeitar variáveis, como interagir com a biblioteca. Em conjunto, MCP conecta o Skill passa instruções.

O que já está disponível

As skills estão distribuídas entre oficiais do Figma e contribuições da comunidade. Alguns exemplos práticos de uso:

figma-use: skill base, obrigatória para qualquer agente escrever no canvas (criar frames, componentes, variáveis e layouts)
figma-generate-design: gera designs a partir de componentes e variáveis existentes
figma-create-new-file: cria novos arquivos a partir de instruções ( você pode complementar o comando para ditar nome e tipo de arquivo).
figma-implement-design: transforma designs em código
figma-code-connect-components: conecta componentes do Figma ao código real. (esse aqui eu ainda não testei 🤔)
apply-design-system: aplica o design system em telas já existentes automaticamente (funciona melhor se você der mais detalhes, ex: “mude todos os botões usando {nome/prefixo do componente}”)
audit-design-system: faz review entre o que está no código e o que está na sua biblioteca do Figma (se você já usar agentic workflow, considere colocar esse como uma das tarefas de review).

Não pense nesses exemplos como os limites de cada skill, são apenas pontos de partida. As skills que você vai usar dependem da tarefa que está fazendo e confesso que eu não “stressei” ao máxio, pois o recurso acabou de ser lançado.

Usando Figma Skiils para MCP para criar um design system baseado em um code base.

(Imagem acima: Usando Figma Skiils para MCP para criar um design system baseado em um code base.)

Testando Figma Skills para MCP na Prática

Para entender melhor esse novo universo de passibilidades que foi habilitado pelas skill, fiz um teste em um repositório de um projeto e o contexto era o seguinte:

Esse projeto não tinha um design system no Figma (primitivos, tokens, cores, fontes, espaçamentos, bordas, etc), ele tinha um style guide gerando direto no código que usa Tailwindcss como base e com algumas modificançoes visuais.
Eu gerei Skill que detalha esse padrão visual (que só existe em código).
Usei os Skills do Figma para ler as interfaces já criada desse projeto e criar uma Biblioteca de Componentes dentro do meu Figma.

E o resultado inicial, sem fazer nenhuma iteração de refinamento já foi superior a qualquer tentativa anterior:

Arquitetura de tokes com claude code e figma skills mcp.

Consumo de Tokens e Contexto

Apesar da quantidade de elementos que foram criados, na minha opinião (não sou especialista em consumo de tokens), o consumo de tokens do Claude Code foi relativamente baixa.

Acredito que esse baixo consumo seja justamente por ter o skill direcionando o trabalho da LLM através do MCP, ao invés de ler, carregar e gerar arquivos desnecessários. Outro ponto que corrobora para isso é que neste teste em especial, eu não solicitei a criação de telas, fiz apenas a geração dos primitivos, tokens e componentes do DS. Abaixo um print do consumo de tokens.

Por que isso importa

Figma Skills representa uma evolução real no que a gente tinha antes nessa interação entre LLMs e design. Agora o agente tem contexto suficiente para agir com precisão, e não só “tentar algo” no seu arquivo que depois você tem que “iterar” várias vezes (que custa tokens 😅).

Para quem já trabalha com design e está aplicando AI no dia a dia, vale testar agora. E recomendo fazer inicialmeten fora de um projeto grande e mais ainda fora de figma file oficial e code-base de produção.

Entenda, dominar o workflow de trabalho com AI significa:

Comunicar melhor sua ideia/solução;
Prototipar e valiadar com mais velocidade
Se aproximar do time de engenharia;
Ter mais tempo para entender o usuário, o problema e o negócio;

En outras palavras, Gerar mais impacto.

Se vovê quer dominar a aplicação de AI no fluxo de Design & Produto, eu tenho um curso para te ensinar no detalhe, passo a passo em 4k por onde seguir, quais ferramentas usar, e com abordagem prática. Use o cupom “AIUXPM” para aproveitar essa oportunidade.

Links para começar: