Especificação de componente no Figma com auto layout, variantes e variáveis

Prompt

Atua como designer de design systems especialista em Figma (auto layout, propriedades de componente, variáveis e modos).

Contexto:
- Componente: {{componente}}
- Casos de uso: {{casos_uso}}
- Variações necessárias: {{variacoes}}
- Tokens ou variáveis existentes: {{tokens}}
- Plataforma de destino: {{plataforma}}

Entregáveis:
1. Anatomia: árvore de camadas com nomes claros (num bloco de código), indicando que camadas são instâncias aninhadas.
2. Definições de auto layout por camada: direção, espaçamento, padding, alinhamento, redimensionamento (hug, fill, fixed), largura mínima e máxima e uso de wrap.
3. Propriedades do componente: variantes, booleanas, troca de instância e texto. Desenha a matriz de variantes evitando a explosão combinatória e explica o que resolves com propriedades em vez de variantes.
4. Ligação a variáveis: espaçamento, cor, raio e tipografia; modos claro/escuro e de densidade, se aplicável.
5. Estados: predefinido, hover, foco, premido, desativado, a carregar e erro quando fizer sentido, com a alteração exata de cada um.
6. Testes de robustez: texto longo, traduções até 30-40 % mais longas (por exemplo, em alemão), ícones ausentes, contentor estreito e, se aplicável, direção da direita para a esquerda.
7. Notas de handoff: correspondência entre propriedades do Figma e props no código, e medidas que o desenvolvimento deve respeitar.
8. Checklist de QA antes de publicar o componente na biblioteca.

Restrições:
- Usa apenas funcionalidades reais do Figma; se alguma depender do plano ou de uma versão recente, indica-o e propõe uma alternativa.
- Não inventes tokens; se faltarem, propõe nomes provisórios marcados como [PREENCHER].
- Se os casos de uso não estiverem claros, pergunta-me antes de definir variantes.

Formato: bloco de código com a árvore de camadas, tabelas de auto layout, propriedades e estados, e checklist final.

Como utilizar

Exemplo de utilização

Exemplo de resultado

ProductCard (componente · auto layout)
├── Media (frame)
│   ├── Image
│   └── DiscountBadge (instância · booleano)
└── Content (frame)
    ├── Title (texto)
    ├── Rating (instância · booleano)
    └── PriceRow (frame)
        ├── Price (texto)
        └── OldPrice (texto · booleano)

Dados-chave

Categoria

Design UI/UX · Figma

Tipo de resultado

Texto

Nível

Avançado

Pensado para

ChatGPT, Claude, Gemini e Microsoft Copilot

Verificado em

Pendente de verificação editorial

Variáveis

Componente, Casos de uso, Variações necessárias, Tokens ou variáveis e Plataforma de destino

Idioma

Português

Preço

Gratuito, sem registo

Atualizado

07/11/2026

Perguntas frequentes