Figma Generate Library skill

O Claude lê o código do seu site ou app e monta no Figma as cores, espaçamentos e componentes iguais aos do código, prontos pra quem desenha usar.

por FigmaPublicada pela própria empresa

instalações: 4.400
estrelas no GitHub: 2.112
No skills.sh desde: março de 2026
Licença: Sem licença declarada

Atualizada no GitHub em 20 de outubro de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.

Figma
figma-generate-library
O Claude lê o código do seu site ou app e monta no Figma as cores, espaçamentos e componentes iguais aos do código, prontos pra quem desenha usar.OficialAuditada4.400 instalações, grátis

O que ela faz

Ensina o Claude a construir no Figma, pelo servidor MCP do Figma, um design system que bate com o código: coleções de variáveis com modo claro e escuro, estilos de texto e sombra, componentes com variantes e estados, páginas de documentação e ligação com o código pelo Code Connect.

Antes de mexer, fecha o tamanho do trabalho: só os tokens, um componente, a biblioteca inteira ou acertar o Figma com o código. Analisa o código, procura nas bibliotecas que o arquivo já usa pra reaproveitar e, quando código e Figma discordam num valor, pergunta qual vale.

Segue uma ordem fixa, fundações antes dos componentes. Define onde cada variável pode ser usada (fundo, texto, borda, espaço), liga cores e espaçamentos às variáveis em vez de valor solto, guarda os ids criados num arquivo de estado pra retomar depois e confere com print antes de dar por pronto.

Nas palavras de quem fez

Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries,…

Figma, no SKILL.md

Quando usar

Levar as cores e fontes do site pro Figma como variáveis e estilos
Criar um botão no Figma com todas as variantes e estados do código
Montar a biblioteca de componentes inteira de um produto
Atualizar o Figma depois que o código mudou
Pôr no Figma o modo claro e escuro que o código já tem

Depois de instalar, é só pedir assim

Usa a figma-generate-library e cria no meu arquivo do Figma as variáveis de cor e espaçamento do projeto, com modo claro e escuro
Monta o componente de botão no Figma com os tamanhos e estados que estão no código
Compara o Figma com o código e atualiza só o que mudou

Segurança

Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.

Gen Agent Trust HubPassou
SocketPassou
SnykPassou

Perguntas

Como instalar a Figma Generate Library no Claude Code?

Toca em Levar, aqui nesta página, e deixa seu nome, e-mail e WhatsApp (é uma vez só). Aparece uma frase pronta: cola ela no Claude Code, que ele mesmo instala a Figma Generate Library, e a skill passa a valer na próxima conversa. A mesma frase serve no Codex. Se preferir fazer na mão, o passo a passo está em como instalar skills no Claude Code.

O que precisa pra funcionar?

O servidor MCP do Figma conectado ao agente, que é por onde o Claude cria e edita no arquivo, permissão de editar esse arquivo e a skill figma-use carregada junto, que ensina a parte técnica da API de plugins. E o código do projeto pra servir de base.

Ela inventa o visual?

Não. Ela leva pro Figma o que está no código e no arquivo. Quando os dois discordam, ou quando há mais de um caminho razoável, pergunta antes de decidir.

Roda no Codex e no Antigravity?

Roda em qualquer agente que leia skills e tenha o MCP do Figma conectado. Sem o MCP não tem como mexer no arquivo.

Levar essa skill

1x figma-generate-libraryR$ 0,00

TotalR$ 0,00

Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/figma/mcp-server-guide

Aprenda a usar

Claude Design: como usar, até no plano grátis
O Claude Design cria tela de site, protótipo e slide conversando, e agora vem até no plano grátis. Veja onde abrir, como usar e como levar pro Claude Code.