Figma Design skill

O que ela faz

A skill é um manual da API de plugins do Figma. Com ela, o Claude escreve o código de um plugin (manifest, código em TypeScript e uma janelinha opcional em HTML) que roda dentro do Figma e mexe no arquivo aberto: cria quadros, textos, formas, componentes e instâncias.

Cobre o que dá trabalho fazer na mão: auto layout com espaçamento e margem, variáveis de cor e espaçamento com modo escuro, estilos de cor, texto e sombra, variações de componente, cliques de protótipo com transição e exportação de todos os quadros da página em PNG, JPG ou SVG.

Traz os cuidados que evitam erro, como carregar a fonte antes de mexer em texto e buscar camadas pelo tipo sem varrer o arquivo inteiro. Tem uma parte pro FigJam e receitas prontas: design system, biblioteca de botões, exportação em lote e troca de componente em vários lugares.

Nas palavras de quem fez

Quando usar

• Montar de uma vez as variáveis de cor e espaçamento de um design system
• Criar todas as variações de um botão sem desenhar uma por uma
• Exportar todas as telas de uma página em 1x e 2x pro desenvolvedor
• Converter quadros antigos pra auto layout em lote
• Fazer um plugin interno que automatiza uma tarefa repetida do time de design

Depois de instalar, é só pedir assim

• Escreve um plugin do Figma que cria as variáveis de cor da minha marca com modo claro e escuro
• Faz um plugin que exporta todos os quadros da página atual em PNG 1x e 2x
• Cria um componente de botão com as variações primário, secundário e grande, usando auto layout

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