Onboarding Design
Bem-vindo ao time de Design! Sua missão é garantir a melhor experiência para nossos usuários e a consistência visual de nossas plataformas.
1. Carta para Você (Obrigatório)
Antes de qualquer coisa, leia a nossa Carta para Você. Ela define o nosso propósito e a importância do trabalho que realizamos aqui.
2. Permissões e Acessos
Antes de iniciar, verifique se você possui acesso às seguintes ferramentas:
- Figma: Acesso aos projetos e ao Design System.
- ClickUp: Acesso às tasks e documentação de produto.
- Plataforma Teleconsulta: Acesso ao ambiente de Dev/Staging para referência.
- Plataforma Telediagnóstico: Acesso ao ambiente de Dev/Staging para referência.
3. Ferramentas
- Figma: Nossa ferramenta principal para design de interface, prototipagem e Design System.
- Whimsical: Usado para fluxogramas e mapeamento de processos.
- Excalidraw: Para diagramas rápidos e rascunhos de arquitetura de informação.
4. Design System (@ptm/design-system)
Nosso Design System é a "fonte da verdade" para componentes e estilos. É obrigatório o conhecimento profundo dos nossos guias de design:
- Design Foundations: Hierarquia, Contraste e Alinhamento.
- Conceitos de UX: Fluxos e Estados de interface.
- Design Tokens: Uso obrigatório de tokens semânticos.
- Variants: Quando usar variantes vs novos componentes.
- Slots e Composição: Flexibilidade sem duplicação.
- Componentes Compostos: Estrutura Leading/Content/Trailing.
- Estados de Componentes: Interatividade e Feedback.
- Tratamento de Erros (UX): Design para falhas.
- Estados de Loading (UX): Skeletons e feedbacks de espera.
- Responsividade: Mobile-first e grid de 8px.
- Regras do Sistema: O que é obrigatório e proibido.
- Design Handoff: Como preparar arquivos para o Front-End.
5. UX Principles
- Acessibilidade: Siga as diretrizes WCAG. Garanta contraste adequado e áreas de toque mínimas de 44x44dp.
- Hierarquia: Mantenha uma hierarquia visual clara para guiar o usuário.
- Consistência: Use os padrões estabelecidos para que o usuário se sinta familiarizado em qualquer parte do sistema.
6. Colaboração com Engenharia
- Handover: Ao finalizar um design, organize as camadas no Figma e deixe anotações claras sobre comportamentos (estados de hover, mensagens de erro, loadings).
- Review: Participe dos reviews de interface para garantir que a implementação está fiel ao design.
7. Primeiros Passos
- Solicite acesso ao time no Figma.
- Explore a biblioteca do
@ptm/design-system. - Leia nosso guia de UX & Design System.
- Agende uma conversa com um desenvolvedor front-end para entender como os componentes são traduzidos para código.
8. Finalização e Feedback
- Prepare um resumo das suas primeiras impressões sobre o Design System e processos.
- Feedback (Obrigatório): Preencha o formulário de feedback seguindo as orientações em * *Feedback de Onboarding**.
Links Importantes:
- Arquitetura e Fluxos (Seção Whimsical/Excalidraw)
- Diretório da Equipe