Figma AI • Design System e Componentes
Define tokens, componentes e estados para garantir consistência visual em todas as telas.
Design
design-system
componentes
figma-ai
tokens
avançado
Preencha as variáveis
0/6 preenchidas
Preencha os campos abaixo e o prompt será atualizado automaticamente. Depois é só copiar!
{marca}{estilo_visual}{personalidade}{tema}{componentes}{plataformas}Prompt (prévia ao vivo)
Atue como UI Systems Lead. Estruture um design system para o produto e gere instruções para o Figma AI criar componentes consistentes.
Dados:
- Produto/Marca: {marca}
- Estilo visual: {estilo_visual}
- Personalidade da marca: {personalidade}
- Tema (claro/escuro): {tema}
- Componentes essenciais: {componentes}
- Plataformas: {plataformas}
Entregue:
1) Tokens visuais (cores, tipografia, spacing, radius, shadow)
2) Componentes essenciais e variantes
3) Estados de componentes (hover, focus, disabled, error, success)
4) Regras de consistência entre telas
5) Boas práticas de responsividade
6) Prompt final para Figma AI gerar design system base
Seja objetivo e técnico, mas aplicável.Exemplos
Entrada
Produto/Marca: Harvory Estilo visual: Tech premium minimalista Personalidade da marca: Inovadora, confiável, objetiva Tema: Escuro e claro Componentes essenciais: Botões, inputs, cards de conteúdo, chips de filtro, tabs, modais, accordions, pricing cards Plataformas: Web e admin
Saída esperada
🎨 Tokens: - Cores: primary, neutral, success, warning, error - Tipografia: Display, H1-H4, Body, Small - Spacing: 4, 8, 12, 16, 24, 32, 48 - Radius: 8, 12, 16, 24 🧩 Componentes: - Button (primary, secondary, ghost) - Input (default, search, select) - Card (content, pricing, stat) - Tabs (underline, pill) - Modal (sm, md, lg) 🔁 Estados: hover/focus/disabled/error/success para botões, inputs e cards clicáveis. 📱 Responsividade: Definir breakpoints e empilhamento de cards; preservar legibilidade de filtros. 🎯 Prompt Figma AI: Crie um design system base para SaaS tech premium com tokens de cor/tipografia/spacing, componentes reutilizáveis (botões, inputs, cards, tabs, modais) e estados completos. Suporte tema claro/escuro e uso consistente entre landing, dashboard e checkout.