Pular para conteúdo

Projeto 12: Conjuntos de Variantes e Propriedades de Componentes 🎛️

Escopo do Projeto

Objetivo: Estruturar conjuntos de componentes avançados (Component Sets) com variantes multi-dimensionais (State, Type, Size) e propriedades modernas (Boolean, Text e Instance Swap).

🎯 1. Contexto & Desafio Prático

Sistemas modernos exigem botões e inputs com dezenas de combinações de estados (Default, Hover, Pressed, Disabled, Loading). Você construirá um Component Set profissional de Botão Corporativo utilizando a matriz de propriedades do Figma.

📋 2. Requisitos Técnicos Obrigatórios

  • R1 (Variantes Multi-Eixo): Criar matriz com propriedades: Variant (Primary, Secondary, Ghost), Size (Small, Medium, Large) e State (Default, Hover, Pressed, Disabled).
  • R2 (Boolean Property): Adicionar propriedade booleana hasIconLeft e hasIconRight permitindo ligar e desligar ícones no painel lateral.
  • R3 (Text Property): Vincular a propriedade de texto label para edição rápida diretamente pelo inspetor de propriedades.
  • R4 (Instance Swap Property): Configurar propriedade de troca de instância vinculada à biblioteca oficial de ícones.

📐 3. Diagrama Conceitual & Fluxo Visual

graph TD
    Set["Component Set: Button Matrix"] --> P1["Propriedade 1: Type (Primary / Secondary / Ghost)"]
    Set --> P2["Propriedade 2: Size (Small 36px / Medium 44px / Large 52px)"]
    Set --> P3["Propriedade 3: State (Default / Hover / Pressed / Disabled)"]
    Set --> P4["Propriedades Modernas: Boolean (hasIcon) + Text (label)"]
    style Set fill:#e1f5fe,stroke:#01579b
    style P1 fill:#fff3e0,stroke:#e65100
    style P2 fill:#f3e5f5,stroke:#7b1fa2
    style P3 fill:#e8f5e9,stroke:#2e7d32
    style P4 fill:#e0f2f1,stroke:#00695c

💻 4. Especificação Técnica & Código de Referência

// variant_matrix.txt
MATRIZ DE VARIANTES:
Type=Primary, Size=Medium, State=Default, hasIcon=true
Type=Primary, Size=Medium, State=Hover, hasIcon=true
Type=Primary, Size=Medium, State=Pressed, hasIcon=true
Type=Primary, Size=Medium, State=Disabled, hasIcon=false
Type=Secondary, Size=Medium, State=Default, hasIcon=true
Type=Ghost, Size=Medium, State=Default, hasIcon=true

📦 5. Critérios de Avaliação e Entrega

  1. Component Set envelopado na moldura pontilhada de variantes.
  2. Controles booleanos e de texto acessíveis no painel direito de instâncias.
  3. Todas as combinações de estados com acessibilidade e contraste garantidos.