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 aeu ainda não testei 🤔)
apply-design-system: aplica o design system em telas já existentes automaticamente (funciona melhor se você der mais detalhes, ex: “change all base collors using {nome/prefixo das base collor tokens}”)
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.

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: