Nesse Design System da semana uma empresa brasileira: a VTEX, empresa multinacional focada em cloud commerce.

Ficha técnica

  • Nome: VTEX Styleguide
  • Empresa: VTEX
  • Ano de desenvolvimento: 2018
  • Diferenciais:
    • Exemplos “vivos”
    • Empty states
    • Onboarding tanto para devs quanto para designers
    • Ensina como contribuir e como é o processo do time responsável
    • Maravilhosa parte de brand que inclui até um fluxograma de uso da marca
    • Por de baixo dos panos usaram o React Styleguidist, economizando muito suor técnico
  • Pontos negativos:
    • Acessibilidade em alguns componentes pode ser melhorada, como nas modais
    • Leitura da parte sobre espaçamentos ligeiramente confusa no primeiro momento

Imagens do Design System

home do design system vtex style guide. No meio o titulo introdução. Se destaca o menu na lateral esquerda de uma imagem bem grande chamativa com fundo vermelho com alguns layouts em perspectiva desconstruídos. No menu itens como icones, componentes, estilos, card, etc.
Parte de cores destacando-se os usos das cores de sucesso e alerta, verde e amarelo respectivamente
parte de brand mostrando a matriz de decicao de marca em um fluxograma
instrucoes de como implementar o box da vtex

O Cristiano Dalbem escreveu esse excelente artigo sobre a morte e a vida de um Design System, vale a pena conferir.

Que tal receber dicas de UX direto no seu e-mail?

Receba a newsletter que eu escrevo pessoalmente, com práticas de usabilidade, insights do mercado de UX e dicas do Figma