Pular para conteúdo

Projeto 14: Prototipagem Interativa: Navegação, Overlays e Inputs 🚀

Escopo do Projeto

Objetivo: Conectar telas estáticas em um protótipo funcional no Figma: navegação entre páginas, exibição de janelas modais via Open Overlay, cabeçalhos fixos ao rolar (Fix position when scrolling) e inputs interativos.

🎯 1. Contexto & Desafio Prático

Prototipar é dar vida à interface para testes com usuários reais e validação com partes interessadas. Você construirá o fluxo interativo completo de um aplicativo de entregas, desde a tela inicial, abrindo o modal de carrinho via overlay e navegando para a tela de confirmação.

📋 2. Requisitos Técnicos Obrigatórios

  • R1 (Navegação com Animação): Criar conexões de protótipo (On Click -> Navigate To) com transição Push ou Slide In entre Home e Detalhes.
  • R2 (Modais via Open Overlay): Configurar o carrinho de compras como Open Overlay, centralizado, com fundo semitransparente (Close when clicking outside e Add background behind overlay).
  • R3 (Fixar Elementos no Scroll): Configurar barra de navegação inferior (Bottom Bar) com Fixed (stay in place) ao rolar a lista de produtos.
  • R4 (Ação de Retorno / Back): Adicionar botão 'Voltar' associado à ação inteligente Back.

📐 3. Diagrama Conceitual & Fluxo Visual

graph LR
    Home["Tela Home (Scroll Vertical)"] -->|Click em Produto| Detail["Tela Detalhes do Produto (Slide In)"]
    Home -->|Click no Carrinho| Modal["Carrinho de Compras (Open Overlay com Backdrop)"]
    Modal -->|Click em Fechar / Fora| Home
    Detail -->|Click em Comprar| Checkout["Tela de Sucesso da Compra"]
    style Home fill:#e1f5fe,stroke:#01579b
    style Detail fill:#fff3e0,stroke:#e65100
    style Modal fill:#f3e5f5,stroke:#7b1fa2
    style Checkout fill:#e8f5e9,stroke:#2e7d32

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

// prototype_flow_map.txt
CONEXÕES DE PROTOTIPAGEM:
1. Frame [Home] -> Botão [Card-Item-01]
   - Trigger: On Click | Action: Navigate To [Details] | Animation: Slide In (Right, 300ms Ease-Out)
2. Frame [Home] -> Ícone [Cart-Button]
   - Trigger: On Click | Action: Open Overlay [Cart-Modal]
   - Overlay Settings: Bottom Sheet, Close when clicking outside, Background: #000000 50%
3. Frame [Details] -> Ícone [Back-Arrow]
   - Trigger: On Click | Action: Back

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

  1. Link de protótipo interativo navegável em modo de apresentação do Figma.
  2. Modal de carrinho abrindo perfeitamente sobre a tela de fundo.
  3. Rolagem de tela suave com bottom bar fixada no rodapé.