Projeto · Fevereiro de 2023

Padronização e Clareza: Definindo regras para a evolução de componentes

Defini um processo de quatro passos (Need, Creation, Validation, Handoff) pra criação e atualização de componentes do Design System.

Este projeto teve como objetivo a definição de regras e diretrizes para a criação e atualização de componentes.

Assumi a responsabilidade de conduzir o projeto devido ao meu grande interesse e habilidades na criação e organização de regras e guias em Design System.

Para compreender melhor o cenário atual, realizei reuniões individuais com cada membro da equipe de design e também com os gerentes dos times de desenvolvimento. Com base nessas conversas, identifiquei dúvidas e suposições, e passei um tempo significativo respondendo, estabelecendo regras e guias, e aprovando cada um dos cinco processos identificados.

Utilizei o Notion como ferramenta principal, centralizando feedbacks e suposições de cada reunião realizada.

Defini um processo em quatro passos: Need, Creation, Validation e Handoff, proporcionando clareza ao designer em cada etapa, desde a identificação da necessidade até a documentação do componente no UI Kit (arquivo do Figma) e na página online do Design System.

1. Need: O designer identifica a necessidade de criar ou modificar um componente.
2. Creation: O designer cria ou modifica o componente, seguindo as guidelines para cada parte que compõe o componente (Skins, States, Sizes, etc).
3. Validation: Após a aprovação do projeto que gerou o componente, o designer organiza o componente para validar com o time de design e desenvolvimento.
4. Handoff: Após a aprovação, é hora de documentar o componente no UI Kit (arquivo do Figma) e na página online do Design System.

No desenvolvimento de cada página do componente, estabeleci uma estrutura robusta para informações obrigatórias e contextuais, agrupadas por Overview, Specs e Manual de Comportamento. Em cada etapa, destaco a importância de o designer apresentar e obter aprovação do status e proposta do componente com o restante do time.

Os resultados são evidentes: o processo tornou-se mais claro para os designers, evitando duplicações e modificações desnecessárias de componentes, proporcionando visibilidade ao time sobre o que está sendo realizado.

Para o time de desenvolvimento, há uma clareza maior sobre o comportamento e atributos dos componentes, indo além de um simples layout estático no Figma para dar inspect.