Empresa

Revelo

Projeto

Design System

Contexto /

Documentar e manter uma biblioteca de componentes de UI compacta, porém flexível, focando em componentes de fundação, com a intenção de diminuir o número de componentes de uso único ou “locais” dentro dos times a qual o Design System servia.

Família de componentes

Documentação /

Padrão de documentação no Figma

Os componentes foram documentados e centralizados em uma única biblioteca do Figma, seguindo o mesmo checklist de fatores a serem levados em consideração durante o processo de documentação:

  1. Do’s & Don’ts - Boas práticas sobre como utilizar (e não utilizar) os componentes

  2. Anatomy - Todos os elementos visuais dos componentes, com suas funções semânticas descritas

  3. Hierarchy - As variações hierarquicas dos componentes (quando aplicável), por exemplo: Primário, Secundário e Terciário

  4. Variants - As variações de conteúdo e tamanho dos componentes.

  5. Interactions - Os estados de interação dos componentes: Static, Hover, Pressed, etc

  6. Components - Os componentes reutilizáveis que alimentam a biblioteca que os Designers usam diretamente em seus arquivos.

  7. Testing - Área os onde os compontes atômicos são usados em casos reais de aplicação.

  8. Changelog - Registro das mudanças e ajustes feitas nos componentes e em sua documentação ao longo do tempo.

Action-Card.png
Badges.png
Chips.png
Drawer.png
Icons [Extra].png
Link.png
Notification.png
Pagination.png
Progress.png
Tables.png
Tabs.png

Tokens /

Rebranding

Com o rebranding da Revelo, meu papel foi mapear e traduzir todos os tokens existentes do Design System para a nova identidade, preservando a hierarquia visual e considerando as aplicações de cada token nos diferentes contextos de layout e componentes. Alguns tokens novos foram criados para incorporar a nova cor secundária da marca; embora não representem risco para a transição da biblioteca de tokens, foram definidos seguindo a mesma escala e os mesmos valores de saturação e brilho.

Processo e documentações experimentais

Como um Design System ainda dando os seus primeiros passos e passando pelos seus primeiros testes no mundo real, eu busquei muitos caminhos diferentes para documentar as bases e os limites do que o Design System poderia fazer.

Um dos maiores desafios enfrentados pelos times de Design era definir hierarquias de contraste entre o texto e as superfícies de aplicação. Deste desafio nasceu esta documentação experimental, criada para servir como referência e base de consulta.

Naquela época, as ferramentas de IA ainda não eram tão acessíveis; por isso, alguns testes e documentações foram feitos manualmente — como este mapeamento de acessibilidade dos tokens de cor.

Design Ops /

Organização e normas de nomenclatura

Para padronizar os diversos formatos de arquivo existentes, foi criado um sistema de nomenclatura para organizar os arquivos. Com a colaboração de outros designers na manutenção desses arquivos, o objetivo foi garantir que o Design System crescesse de forma escalável e tivesse documentação organizada.