Construindo um Design System White Label

Decisões e estratégias para a criação de um design system multimarcas

Neste período que estive como UI/UX Designer na Plataforma E-Peça, percebi logo de princípio que precisaríamos de um Design System, mas que esse comportasse, pelo menos no chapter de e-commerce diversas marcas e mesmo assim mantivesse o padrão criado para a plataforma.

Assim surgiu o “E-Tools” Design System que além de ser uma ferramenta para nós mostrava a vocação dos nossos e-commerces, venda de peças automotivas.

Como ressaltei o nosso design system iria atender diversos styleguides de diferentes marcas portanto ele deveria ser white label. Para isso usamos dois conceitos: Design Tokens e Components Tokens.

Design tokens para inserir as especificações dos styleguides das marcas (clientes) e Componentes tokens para dizer como seria o componente e este receberia o design token da marca sem perder seus atributos.

Exemplo: Um Tooltip terá no seu tamanho para dispositivos Large e extra-large o font size 20px, background color: neutralcolor/white e fontcolor/primary, independentemente da font family ser Arial ou Hummanist ou a primary color ser Azul ou Verde.

Adotamos em partes o Atomic Design, com átomos, celulas e componentes complexos. E criamos uma variedade de componentes com ‘components tokens’ bem definidos para receber os design tokens.

Exemplo: Botão primário

Hoje não participo mais do projeto, mas sempre que produzíamos uma nova feature, átomos, células e componentes complexos já criados eram reaproveitados, gerando economia de tempo para a equipe e menor esforço para o usuário.

Para documentar o projeto, o styleguide foi criado como uma library no Figma e a o front-end documentado no Storybook.

Para mais detalhes, fico a disposição, pois o projeto é sigiloso e não posso revelar detalhes de componentes e funcionalidades neste documento.

Meu whatsapp é (14) 99722–8401 e meu Linkedin é https://www.linkedin.com/in/uxzeadauto/