Pular para conteúdo

Projeto 16: Hand-off para Desenvolvedores, Dev Mode e Exportação 📦

Escopo do Projeto

Objetivo: Preparar especificações técnicas completas para engenharia de software utilizando o Dev Mode do Figma: anotações de design, especificações de padding/margens, tokens CSS/Compose/Swift e exportação de assets em múltiplos formatos.

🎯 1. Contexto & Desafio Prático

O projeto de design só atinge seu objetivo quando é implementado com fidelidade pelo time de desenvolvimento. Você preparará o arquivo final para o hand-off de engenharia, criando documentação de layout, exportando assets gráficos em 1x/2x/3x e anotando comportamentos de tela no Dev Mode.

📋 2. Requisitos Técnicos Obrigatórios

  • R1 (Anotações de Design / Annotations): Inserir anotações no Figma indicando estados de erro, limites de caracteres e regras de negócio para os programadores.
  • R2 (Exportação Multi-Escala de Assets): Configurar configurações de exportação de ícones e ilustrações em SVG, PNG 1x, 2x e 3x para iOS e mdpi/hdpi/xhdpi/xxhdpi para Android.
  • R3 (Inspeção de Código CSS/Tokens): Validar e extrair o código CSS de tipografia, cores e layout gerado no Dev Mode do Figma.
  • R4 (Guia de Hand-off Consolidado): Criar página de checklist final atestando que todas as telas estão prontas para desenvolvimento (Ready for Dev).

📐 3. Diagrama Conceitual & Fluxo Visual

graph TD
    FigmaDesign["Design Concluído no Figma"] --> DevMode["Figma Dev Mode (Inspeção de Código)"]
    DevMode --> Tokens["Export de Tokens CSS / Tailwind / Jetpack / SwiftUI"]
    DevMode --> Assets["Assets Exportados: SVG + PNG (1x, 2x, 3x)"]
    DevMode --> Notes["Anotações de Comportamento e Regras de Negócio"]
    Tokens & Assets & Notes --> DevTeam["Equipe de Desenvolvimento Frontend & Mobile"]
    style FigmaDesign fill:#e1f5fe,stroke:#01579b
    style DevMode fill:#fff3e0,stroke:#e65100
    style Tokens fill:#f3e5f5,stroke:#7b1fa2
    style Assets fill:#e8f5e9,stroke:#2e7d32
    style DevTeam fill:#e0f2f1,stroke:#00695c

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

// dev_mode_specs_export.css
/* Exemplo de Especificação Extraída no Dev Mode */
.header-navigation {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: var(--color-neutral-surface, #F9FAFB);
  border-bottom: 1px solid var(--color-neutral-border, #E5E7EB);
  height: 64px;
}

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

  1. Telas marcadas com o status 'Ready for Dev' no Figma.
  2. Assets exportáveis configurados corretamente com prefixos padronizados.
  3. Presença de notas de design documentando regras de interação para os desenvolvedores.