🧱 Styleguide 2.0 e Evolução para Design System – Juntos Somos Mais

🏢 Empresa

Juntos Somos Mais

🎯 Resultados

• 100% dos designers utilizando componentes do Styleguide 2.0

• 100% dos desenvolvedores utilizando o Design System como referência de código

• Todos os componentes mapeados, documentados e organizados com status atualizados

• Time de tecnologia engajado, passando a desenvolver tokens e componentes validados pelo design

• Leonardo se tornou referência interna e assumiu a coordenação de Design Ops e Design System

🗓️ Duração

Início em janeiro de 2021 (projeto contínuo e produto vivo)

🧩 Papel

Especialista e posteriormente Coordenador de Design Ops e Design System.

Como especialista em UX Design, atuei com protagonismo e iniciativa desde os primeiros meses na empresa.

Liderei a reformulação visual e estrutural do Styleguide, contribuí com a criação e validação de dezenas de componentes e tokens e influenciei diretamente a maturidade do time com relação à construção e uso de um Design System vivo e funcional..

📋 Principais tarefas

• Reestruturação completa da paleta de cores com foco em acessibilidade

• Criação e padronização de componentes com variantes, auto layout e naming consistente

• Facilitação e orientação de boas práticas no Figma para o time de design

• Alinhamento contínuo com desenvolvedores sobre tokens e implementação de código

• Documentação mínima e objetiva para designers, devs e QAs

• Mapeamento e categorização dos componentes em planilha compartilhada com status

🔍 Contexto

Ao ingressar na Juntos Somos Mais, encontrei um styleguide 1.0 com muitos problemas: componentes incompletos, ausência de padronização, cores não acessíveis e falta de documentação.

O objetivo era transformar esse material em um Design System completo, útil e escalável, promovendo alinhamento entre design e desenvolvimento e acelerando a criação de interfaces com consistência e eficiência.

❓Problema a ser resolvido

Como evoluir um styleguide visual inconsistente em um Design System estruturado, acessível e funcional, mesmo sem dedicação exclusiva e com a colaboração sob demanda de designers e desenvolvedores?

✅ Soluções entregues

• Correções iniciais:

  • Mapeamento e redução de cores duplicadas

  • Ajuste de contraste para acessibilidade (especialmente laranja e cinza)

  • Estabelecimento da paleta final com participação do time

• Criação e padronização de tokens e componentes:

  • Tipografia (desktop, mobile e app)

  • Grid de espaçamento e múltiplos de 4

  • Tokens de cor e estrutura de design escalável

• Criação e padronização de tokens e componentes:

  • Botões, badges, accordions, tabs, steppers

  • Inputs, formulários, breadcrumbs, cards, chips, modais

  • Tooltip, snackbar, paginação, banners, menu mobile

  • Validação de componentes como timeline, data table, date picker, rich tooltip, tag, etc.

• Processo e cultura:

  • Organização dos componentes em planilha de status

  • Validação com desenvolvedores e times de QA

  • Atuação em paralelo às entregas de sprint, sem sobrecarregar

  • Suporte ativo a designers no uso correto de componentes

  • Engajamento de lideranças de tecnologia para expandir uso e governança

🔧 Processo e Metodologia

• Auditoria visual e técnica do styleguide anterior

• Redesign de tokens e componentes com base em critérios de acessibilidade e usabilidade

• Criação incremental, conciliando com demandas da squad

• Adoção orgânica, baseada em exemplos práticos, apoio contínuo e documentação leve

• Cultura de colaboração, envolvendo devs na priorização e implementação

• Mapeamento de status em planilha compartilhada (feito, pendente, sem variantes, etc.)

📈 O que aprendemos

• Pequenas melhorias constantes têm grande impacto ao longo do tempo

• A colaboração entre design e tech é essencial para um Design System vivo

• Documentação não precisa ser extensa para ser eficaz — clareza e aplicabilidade vêm primeiro

• Design Systems maduros promovem autonomia, velocidade e consistência para todo o time

🌟 Impacto

A criação do Styleguide 2.0 e sua evolução para Design System mudaram a forma como designers e desenvolvedores trabalham juntos na Juntos Somos Mais.

Com padronização, acessibilidade e colaboração, a entrega de produtos digitais se tornou mais eficiente, escalável e alinhada — consolidando uma cultura de qualidade e excelência em experiência.

Alguns exemplos de tokens

Cores, tipografias e grids que nos ajudavam a ter padrão e consistência nos projetos

Alguns exemplos de componentes

Com a evolução, componentes promoviam grandes ganhos de tempo para desenhar e desenvolver interface para usuários

Exemplo de um componente robusto

Componente do menu que utiliza conceito de Atomic Design, ou seja, construir do menor para o maior.