As Figma Skills são instruções baseadas em markdown que orientam como o Agente de Design de IA se comporta no seu contexto específico. Pense nelas como prompts personalizados reutilizáveis — você as escreve uma vez, e elas codificam as convenções da sua equipe, regras de componentes e padrões de qualidade para que o agente as siga automaticamente todas as vezes.
Qualquer pessoa pode escrever uma skill. Não é necessário código. Não é necessário desenvolvimento de plugin. Não é necessário integração de API. Apenas texto markdown que descreve o que o agente deve fazer e como deve fazer. As Skills são a diferença entre um agente que gera UI genérica e um agente que gera a UI da SUA equipe.
Ponto-Chave
As Skills transformam o Agente de Design de uma IA genérica na IA da SUA equipe. Sem skills, o agente usa convenções padrão e adivinha suas preferências. Com skills, ele segue seu sistema de espaçamento, regras de nomenclatura de componentes, requisitos de acessibilidade e diretrizes de marca automaticamente. 30 minutos escrevendo 3-4 skills economiza horas de correção ao longo de semanas de uso do agente.
O Que Compõe uma Figma Skill?
| Elemento da Skill | O Que Faz | Exemplo |
|---|---|---|
| Nome (com /) | Como você a invoca | /criar-pagina-configuracoes |
| Propósito | O que a skill faz (uma frase) | "Gerar uma página de configurações seguindo nossas convenções de equipe" |
| Passos | Instruções ordenadas que o agente segue | "1. Use Cabeçalho de Seção para cada grupo..." |
| Convenções | Regras que o agente deve seguir | "Sempre use grade de 8px, nunca use posicionamento absoluto" |
| Componentes | Quais componentes publicados usar | "Use Toggle/Switch para configurações booleanas" |
| Variáveis | Quais tokens de design aplicar | "Use color-surface-primary para fundos" |
| Não Faça | O que o agente deve evitar | "Nunca use mais de 3 níveis de cabeçalho por página" |
O Figma foi lançado com 9 skills de exemplo cobrindo: construção de bibliotecas de componentes, geração de novos designs a partir de briefings, produção de especificações de acessibilidade, coordenação de fluxos de trabalho multi-agente e sincronização de tokens de design com código. Explore-as em figma.com/community/skills. A skill fundamental, /use-figma, dá ao agente um entendimento compartilhado de como o Figma funciona estruturalmente. As equipes customizam a partir daí.
Escrevendo Sua Primeira Skill (Com Exemplo)
Comece com sua tarefa de design mais repetida. Se você cria layouts de formulário semanalmente, escreva uma skill /layout-formulario. Aqui está um exemplo completo do mundo real:
Esta skill diz ao agente exatamente como sua equipe constrói formulários. Sem ela, o agente usa as convenções padrão do Figma. Com ela, todo formulário que o agente gera segue seus padrões específicos — consistente entre membros da equipe, consistente entre projetos.
📬 Está obtendo valor disso?
Uma insight acionável de IA por semana. Mais um pacote de prompts gratuito quando você se inscrever.
Inscrever-se grátis →Como as Skills se Comparam a Outras Instruções Personalizadas de IA
As Skills são conceitualmente similares aos sistemas de instruções personalizadas em outras ferramentas de IA:
| Ferramenta | Instruções Personalizadas | Criado Por | Compartilhado? |
|---|---|---|---|
| Figma Skills | Arquivos markdown que orientam o Agente de Design | Manualmente pela equipe | Sim (biblioteca da Comunidade) |
| Instruções Personalizadas do ChatGPT | Texto que molda todas as respostas do ChatGPT | Manualmente pelo usuário | Não (apenas pessoal) |
| Claude Code CLAUDE.md | Instruções de nível de projeto para agente de codificação | Manualmente pela equipe | Sim (via repositório) |
| Hermes Agent Skills | Padrões de tarefas reutilizáveis auto-gerados | Automaticamente do uso | Sim (biblioteca de skills) |
A distinção chave: o Hermes Agent cria skills automaticamente a partir de tarefas completadas — aprendendo conforme você trabalha. O Figma requer criação manual de skills — você o ensina explicitamente. A abordagem do Hermes escala com o uso; a abordagem do Figma te dá mais controle, mas requer investimento inicial. Ambos produzem melhor output de IA do que usar as ferramentas sem instruções personalizadas.
O princípio subjacente é o mesmo em todos esses sistemas: IA performa melhor com contexto explícito sobre suas preferências, convenções e padrões. Seja escrevendo uma Figma Skill, Instruções Personalizadas do ChatGPT, ou um arquivo Claude CLAUDE.md, o framework ICCSSE produz melhores instruções. O Otimizador de Prompts gratuito aplica esta estrutura automaticamente — cole seu rascunho de skill, receba uma versão mais clara de volta.
4 Skills Essenciais Que Toda Equipe de Design Precisa
1. /layout-formulario — Padroniza o design de formulários em toda a equipe. (Exemplo acima.)
2. /layout-pagina — Define suas convenções de estrutura de página: posicionamento do cabeçalho, largura da barra lateral, largura máxima do conteúdo, estrutura do rodapé, padrões de navegação, breakpoints responsivos.
3. /variante-componente — Diz ao agente como criar novas variantes de componente que correspondem ao seu sistema existente: convenções de nomenclatura, definições de estado (padrão, hover, ativo, desabilitado, erro), escala de tamanho (sm, md, lg), e requisitos de documentação.
4. /verificacao-acessibilidade — Define seus padrões de acessibilidade: nível WCAG (AA vs AAA), tamanhos mínimos de área de toque, razões de contraste, regras de hierarquia de cabeçalhos, labels ARIA obrigatórios, e formato de anotação para leitores de tela. Veja nosso guia de especificações de acessibilidade para detalhes.
📬 Quer mais como isso?
Uma insight acionável de IA por semana. Mais um pacote de prompts gratuito quando você se inscrever.
Inscrever-se grátis →Perguntas Frequentes
Quantas skills devo criar?
Comece com 3-4 cobrindo suas tarefas de design mais comuns: uma skill de formulário, uma skill de layout de página, uma skill de variante de componente e uma skill de verificação de acessibilidade. Essas cobrem 80% do trabalho diário de design. Adicione mais skills conforme identificar padrões repetidos que o agente trata de forma inconsistente.
Skills podem chamar outras skills?
Sim — skills podem referenciar outras skills, criando fluxos de trabalho encadeados. Uma skill /nova-funcionalidade poderia invocar /layout-formulario para seções de entrada, depois /verificacao-acessibilidade para revisão de conformidade. Isso permite fluxos de trabalho complexos de múltiplos passos a partir de uma única invocação.
Skills consomem créditos?
A skill em si (as instruções markdown) não consome créditos. As ações do agente que a skill dispara (gerar designs, editar componentes) consomem créditos na taxa normal. Uma skill bem escrita pode na verdade economizar créditos ao produzir melhor output na primeira tentativa — menos iterações significa menos regenerações que consomem créditos.
Posso compartilhar skills com a comunidade Figma?
Sim — a biblioteca de skills da comunidade Figma permite que você publique e navegue por skills. Isso significa que você pode usar skills escritas por outras equipes de design para padrões comuns (layouts de dashboard, fluxos de onboarding, páginas de configurações) sem escrevê-las do zero.
Onde as skills são armazenadas?
Skills são associadas à sua organização Figma ou conta pessoal. Skills de nível de equipe são acessíveis a todos os membros da equipe; skills pessoais são acessíveis apenas a você. Armazene suas skills mais importantes no nível da equipe para que todos os designers se beneficiem das mesmas convenções.
Divulgação: Alguns links neste artigo são links de afiliados. Recomendamos apenas ferramentas que testamos pessoalmente e usamos regularmente. Veja nossa política de divulgação completa.