Ficha 02 · Navegação, fluxo, prototipagem e handoff

a) Tab bar inferior (mobile) — 4-5 itens, sempre visível, troca rápida entre secções principais. b) Top nav horizontal + dropdowns/megamenu (desktop) e hamburger/drawer (mobile). c) Master-detail (lista + detalhe lado a lado) — usa o espaço do ecrã grande; em mobile colapsa para 2 ecrãs.

Quando as secções principais são poucas (3-5) e usadas com frequência — esconder atrás de hamburger reduz descoberta e aumenta cliques. Para mobile com poucas secções principais, usa tab bar. Hamburger faz sentido para secções secundárias (definições, ajuda, sobre) ou quando há muitas categorias e o espaço é mesmo escasso.

Sim: sites/apps com hierarquia profunda (e-commerce com categorias/subcategorias; documentação; intranets). Ajudam orientação e permitem subir um nível. Não: apps lineares ou planas (login → home → 2 cliques); apps mobile pequenas; quando o utilizador entra direto via pesquisa sem hierarquia significativa.

[Página produto] → [Adicionar ao carrinho] → [Carrinho] → [Checkout: dados]
        ↓                  ↓                                      ↓
    sem stock         confirmação                          [Pagamento]
        ↓             (toast/badge)                          ↙       ↘
   [Avisar quando                                       sucesso     falha
    voltar]                                               ↓           ↓
                                                  [Confirmação]  [Tentar de
                                                                  novo / outro
                                                                  método]

Avaliar: existência de caminho feliz claro, erros previstos (sem stock, pagamento falha), estado intermédio (loading entre passos), confirmação final.

1. Campo vazio — mensagem inline ("Indica o email"), botão desativado.
2. Formato inválido (email sem @, password curta) — validação imediata + dica.
3. Credenciais erradas — mensagem genérica ("Email ou password incorretos") para não revelar se o email existe.
4. Rede indisponível — "Sem ligação. Tenta de novo." + retry; manter dados preenchidos.

Bónus: 5) Conta bloqueada/2FA com instruções claras.

• Consistência: estilos uniformes em todo o ficheiro; mudança num lado propaga a todos.
• Variantes (size: sm/md/lg; type: primary/secondary; state: default/hover/disabled) num único componente com properties — alternas no painel direito.
• Manutenção: alterar a cor primária = 1 token, não 200 botões.
• Handoff: o developer vê a estrutura e mapeia 1-para-1 para um componente em código.

É o sistema de Figma que disposiciona elementos automaticamente (horizontal/vertical/grid) com gap, padding, resizing e alinhamento — equivalente a Flexbox em CSS.

Exemplo: card de produto com imagem + título + preço + botão. Com auto-layout vertical, ao mudar o texto do título o card expande sozinho; ao adicionar uma badge nova, empurra o conteúdo seguinte. Sem auto-layout, terias de reposicionar tudo manualmente cada vez que algo muda.

a) Em Prototype: tap no botão → Open overlay (a frame "Toast") com animação Move in / Smart animate → After delay 2s → Close overlay.

b) Criar duas variantes do ecrã (Home/Home-badge2); ao tocar no botão, Navigate to Home-badge2 com Smart animate (Figma anima o número como se fosse um contador). Para fluxos reais, isto é "fingir" — o estado em código viria do carrinho real.

1. Ficheiro Figma organizado — frames por ecrã, componentes publicados, tokens/variables nomeados.
2. Modo Dev ativo: o developer extrai valores CSS, tokens, medidas, assets (SVG/PNG @1x/@2x).
3. Especificações dos estados — não só "default": hover/focus/disabled/loading/erro/vazio.
4. Comportamento responsivo — pelo menos 2 breakpoints (mobile/desktop) desenhados; regras claras.
5. Tipografia — escala definida (tokens) e mapeamento para CSS/Tailwind.
6. Animações — duração/easing das transições principais (ou Lottie exportado).
7. Conteúdo real — não "Lorem ipsum"; textos finais ou com tamanhos representativos.
8. Decisões abertas registadas num comentário / notion/Linear.

:root {
  --color-primary: #2D6CDF;
  --color-text: #1A1A1A;
  --space-sm: 8px;
  --space-md: 16px;
  --radius-md: 12px;
}

.btn {
  background: var(--color-primary);
  color: white;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  border: 0;
  cursor: pointer;
}

.btn:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }

(Bónus: mapear os mesmos tokens para tailwind.config ou ficheiro tokens.css partilhado entre projetos.)