Lara Design System
Nexti e Orsegups
Um Design System multimarca
Ano
2021 - 2023
Cliente
Nexti e Orsegups
Papel
Categorias
Design System, acessibilidade, teste de usabilidade, tokens e handoff
Impacto
3
Designers
3
Desenvolvedores
1
Product Owner
Organização
Bibliotecas de design
Priorização
Mapeamento e priorização de componentes
Imersão e definição
Nessa etapa deve-se coletar informações acerca do componente a ser desenvolvido, entendendo suas variações e diferentes aplicações. Com algumas informações sobre o componente, deve-se levar para a equipe Tech e de Design (todos) para que possam avaliar se todos os cenários possíveis de uso foram contemplados. Tal etapa serve para garantir que o componente sofra menos modificações ao longo das etapas.
Desenvolvimento e discussão
O componente é construído a partir das definições extraídas da fase anterior, sempre com o arquivo de Estilos Visuais e Tokens aberto ao lado, porque é dele que saem todos os valores aplicados: padding, spacing, cor, tipografia, opacidade, sombra e borda. Nada é definido no olho, e a construção só fecha quando todas as variantes que o design system vai consumir estão prontas, e não apenas o estado padrão. Em seguida vem o Critical Review, reunião semanal em que quem construiu apresenta o desenvolvimento, os outros designers experimentam o componente por conta própria, as observações vão direto no arquivo e as definições acordadas ficam anotadas para o projeto. Colocar o componente na mão de quem não o desenhou é o que revela cedo aquilo que só faz sentido para quem construiu.
Documentação e revisão técnica
A documentação é construída no Zero Height, retomando as referências levantadas na imersão e organizada em três pilares. O de design cobre as variações do componente e seus tamanhos máximo e mínimo. O de uso é o mais extenso: quando o componente é usado e para quê, como o conteúdo deve ser escrito, um quadro de do e don't vindo do arquivo de suporte, o comportamento em transições e visualização, além de posicionamento e espaçamento. O terceiro pilar é a acessibilidade, com os critérios que se aplicam àquele componente. Fechada a documentação, o arquivo do Figma e a página do Zero Height vão para as líderes de time, e o retorno delas define o que ainda precisa mudar antes da publicação. Só depois disso o componente é anunciado para o time.
Apresentação prévia e final
Antes da publicação, o componente passa por duas exposições ao grupo ampliado. Na apresentação prévia, design e tecnologia visualizam o componente que acabou de sair do review técnico, ainda com espaço para questionar decisões estruturais. Na apresentação final, os dois times veem a versão fechada acompanhada da documentação, que é o que de fato será consumido no dia a dia. Separar os dois momentos evita a situação mais comum em design system, que é o desenvolvimento descobrir o componente só quando ele já está publicado e sem margem para mudança.
Publicação e melhoria contínua
O Design System deve ser adotado como um produto de prática de padronização contínua. O time deve participar ao máximo das escolhas e isso deve refletir no trabalho de todos, gerando menos tempo de desenvolvimento, mais consistência entre os componentes, visão holística do trabalho e melhores práticas.
Acessibilidae
18 critérios de acessibilidade respeitados
Os componentes
Três níveis de complexidade
Tokens
Design Tokens
Saiba mais
