Design handoff estruturado para desenvolvedores front-end

Crie um guia de design handoff para [NOME DA FUNCIONALIDADE] de [NOME DO PRODUTO], preparando a entrega do Figma para o time de desenvolvimento que usa [FRAMEWORK] com [CSS FRAMEWORK/ABORDAGEM].

**1) Organizacao do Arquivo Figma:**
- Naming convention de pages (ex: "[Feature] 1. Specs", "[Feature] 2. Redlines")
- Estrutura de frames por breakpoint
- Componentes locais vs. biblioteca
- Layer naming padronizado

**2) Especificacoes por Componente:**
Para cada componente novo ou modificado:
- Dimensoes: width, height, padding, margin (em px e rem)
- Tokens utilizados: cor, tipografia, espacamento, border-radius, shadow
- Comportamento responsivo: como se adapta entre breakpoints
- Estados: default, hover, focus, active, disabled, error, loading
- Anotacoes de acessibilidade (role, aria-label, tab order)

**3) Assets e Recursos:**
- Icones: formato de exportacao (SVG), naming convention
- Imagens: aspect ratio, formato (WebP), tamanhos por breakpoint
- Ilustracoes: quando usar SVG inline vs. img tag
- Fontes: weight map (nome -> valor numerico)

**4) Comportamento e Interacao:**
- Mapa de interacoes: o que acontece em cada clique/tap
- Animacoes: propriedade, duracao (ms), easing (cubic-bezier)
- Transicoes entre estados
- Comportamento de scroll (sticky, parallax, infinite scroll)
- Gestos mobile (swipe, pull-to-refresh)

**5) Edge Cases Documentados:**
- Texto longo (overflow, truncation, line-clamp)
- Imagem faltando (fallback)
- Lista vazia (empty state)
- Erro de API (error state)
- Slow connection (skeleton/shimmer)

**6) Checklist de Handoff:**
- [ ] Todos os estados cobertos
- [ ] Tokens mapeados para codigo ([FIGMA TOKEN] -> [CSS VAR/TAILWIND CLASS])
- [ ] Responsividade especificada para [BREAKPOINTS]
- [ ] Assets exportados e nomeados
- [ ] Anotacoes de acessibilidade
- [ ] Prototipo linkado para referencia
- [ ] Criterios de aceite escritos

**7) Template de Dev Review:**
- Como o designer deve revisar a implementacao
- Tolerancia aceitavel (ex: +/-2px)
- Screenshots comparativos (design vs. implementacao)
- Ferramenta de comparacao visual recomendada