Pular para conteúdo

Projeto 11: Componentes Reutilizáveis e Sobrescrita de Instâncias 🧩

Escopo do Projeto

Objetivo: Criar componentes mestres (Main Components) e instâncias no Figma, aplicando sobrescrita de propriedades (Overrides) sem desvincular a conexão estrutural.

🎯 1. Contexto & Desafio Prático

A manutenção de milhares de telas em um produto digital só é viável com componentes mestres centralizados. Você modelará o componente mestre de um card de transação financeira, gerando múltiplas instâncias que representam diferentes tipos de movimentações (Pix, Cartão, Boleto).

📋 2. Requisitos Técnicos Obrigatórios

  • R1 (Criação do Main Component): Construir o componente mestre (❖ Transaction-Item) com ícone, título, categoria, data e valor monetário.
  • R2 (Instanciação e Overrides): Criar 4 instâncias (◇) e sobrescrever textos e ícones mantendo o layout e as regras de estilo intactos.
  • R3 (Swap Instance): Substituir os ícones de cada instância utilizando a ferramenta de troca de instância (Swap Instance) sem quebrar o alinhamento.
  • R4 (Propagação de Atualizações): Alterar a cor de fundo no Main Component e comprovar que todas as instâncias refletem a modificação instantaneamente.

📐 3. Diagrama Conceitual & Fluxo Visual

graph TD
    Master["❖ Main Component: TransactionItem (Estilos e Layout)"] --> Inst1["◇ Instância 1: Pix Recebido (Verde + R$ 150)"]
    Master --> Inst2["◇ Instância 2: Compra Cartão (Vermelho - R$ 85)"]
    Master --> Inst3["◇ Instância 3: Boleto Pago (Laranja - R$ 420)"]
    Update["Atualização no Master (ex: padding ou cantos arredondados)"] -.->|Propagação Imediata| Master
    style Master fill:#e1f5fe,stroke:#01579b
    style Inst1 fill:#e8f5e9,stroke:#2e7d32
    style Inst2 fill:#ffebee,stroke:#c62828
    style Inst3 fill:#fff3e0,stroke:#e65100

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

// component_structure.txt
ESTRUTURA DO COMPONENTE:
❖ TransactionItem
├── [AutoLayout Horizontal | Padding: 12px 16px | Gap: 12px]
│   ├── ❖ Icon-Container (40x40px, Rounded: 8px) -> Swap Instance
│   ├── [AutoLayout Vertical | Fill Container]
│   │   ├── Text: Title (Heading/H3) -> Override Text
│   │   └── Text: Subtitle (Body/Small) -> Override Text
│   └── [AutoLayout Vertical | Alinhamento Direita]
│       ├── Text: Amount (Bold, Cor dinâmica)
│       └── Text: Date (Caption)

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

  1. Main Component devidamente identificado com o ícone de quatro losangos (❖).
  2. Mínimo de 3 instâncias com overrides de dados reais.
  3. Ausência de componentes desvinculados (Detach Component).