Pular para conteúdo

Projeto 13: Bibliotecas de Time e Governança de Design Systems 📚

Escopo do Projeto

Objetivo: Conceber uma biblioteca de componentes compartilhada (Team Library), documentar diretrizes de uso (Do's and Don'ts) e estruturar tokens de design para publicação e consumo entre múltiplos arquivos.

🎯 1. Contexto & Desafio Prático

Em empresas com dezenas de designers e squads de produto, a biblioteca centralizada é a fonte da verdade da marca. Você organizará o arquivo de Design System, adicionando descrições formais aos componentes e simulando a publicação e consumo por um arquivo de produto satélite.

📋 2. Requisitos Técnicos Obrigatórios

  • R1 (Documentação de Componentes): Adicionar descrições técnicas no campo de descrição de cada componente com orientações de acessibilidade e quando utilizá-lo.
  • R2 (Diretrizes Visuais Do's and Don'ts): Criar frame de documentação ilustrando exemplos corretos e incorretos de aplicação dos botões e cards.
  • R3 (Consumo em Arquivo Externo): Vincular a biblioteca e instanciar os componentes em uma tela completa de checkout.
  • R4 (Governança de Versão): Registrar changelog com as alterações da versão v1.0.0 para v1.1.0.

📐 3. Diagrama Conceitual & Fluxo Visual

graph TD
    DSFile["Arquivo Raiz: Design System Core"] --> Pub["Publicação da Team Library (v1.1.0)"]
    Pub --> SquadA["Squad Checkout (Consome Tokens & Componentes)"]
    Pub --> SquadB["Squad Conta Digital (Consome Mesmos Componentes)"]
    SquadA & SquadB --> Uniformity["100% de Consistência Visual e Operacional!"]
    style DSFile fill:#e1f5fe,stroke:#01579b
    style Pub fill:#fff3e0,stroke:#e65100
    style SquadA fill:#f3e5f5,stroke:#7b1fa2
    style SquadB fill:#f3e5f5,stroke:#7b1fa2
    style Uniformity fill:#e8f5e9,stroke:#2e7d32

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

// design_system_guidelines.md
# Diretrizes do Botão Primário (Button/Primary)

### ✅ Quando Utilizar (Do)
- Para a ação principal e mais relevante da tela (ex: 'Confirmar Pedido', 'Entrar').
- Limitar a no máximo 1 botão primário por viewport visível.

### ❌ O que Evitar (Don't)
- Não utilizar dois botões primários lado a lado com mesmo peso visual.
- Não alterar as cores base de preenchimento fora das variantes aprovadas.

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

  1. Painel de documentação estruturado com cards de Do e Don't.
  2. Componentes enriquecidos com metadados de descrição no Figma.
  3. Tela completa de produto consumindo exclusivamente componentes da biblioteca.