IMPORTANTE!

Devido a questões contratuais do projeto, as informações levantadas serão apresentadas de forma resumida, a fim de ocultar dados sensíveis do projeto.

O projeto tinha um objetivo claro: evoluir o que já existia em direção a um Design System mais robusto, integrado e funcional. A proposta era desenvolver uma solução que atendesse de forma precisa às necessidades tanto dos designers quanto dos desenvolvedores da Trinus.co, garantindo consistência visual e eficiência em todas as frentes — da organização estrutural aos princípios de design e à componentização no Figma.

O resultado foi um sistema unificado, bem documentado e fácil de aplicar no dia a dia dos times. Utilizamos ferramentas como Zero Height e Storybook para garantir a homologação dos componentes, reforçando a governança sobre regras de uso, variações e aplicações práticas. O Design System também se destacou pela integração com outras plataformas e fluxos, elevando o nível de qualidade e refinamento visual da empresa como um todo.

Dados

Indústria: Financeiro
Cliente: Trinus.Co
Duração: 8 semanas
Ano: 2022
Período: 06/03 até 21/04

Equipe

2 Scrum Master
2 Designers UX/UI
1 Tech Lead
2 Devs. React JS
1 Quality Assurance

Sobre o projeto

Desafio

O principal desafio deste Design System foi estruturar uma documentação completa e coesa distribuída em três plataformas distintas: Zero Height, Figma e Storybook. Cada ferramenta atendia a uma parte essencial do processo — desde o visual e a construção dos componentes até a aplicação técnica — e era fundamental garantir que todas estivessem integradas de forma eficiente. Mais do que alinhar ferramentas, o grande foco foi criar uma linguagem comum entre designers e desenvolvedores.

Um sistema que falasse com clareza para ambos os lados, facilitando a comunicação, a manutenção e a evolução do Design System ao longo do tempo. Esse alinhamento entre áreas foi essencial para garantir não só a usabilidade do sistema, mas também sua adoção e relevância dentro da empresa.

PALAVRAS CHAVE

Design Thinking | UX/UI | Design System| Figma | Componentização | Benchmarking | Tokens | Documentação

Página completa de componentes no Figma

Estrutura de uma página de componente

Especificações de cada componente

Entregáveis

07

CORES BASES

TONS DE CORES

145

91

TOKENS CORES

57

ÍCONES

09

ESCALA
DOS ÍCONES

04

SOMBRAS

04

CORNER RADIUS

26

TEXTOS

13

ESPAÇAMENTOS

08

GRIDS

06

BREAKPOINTS

28

COMPONENTES
FIGMA

18

COMPONENTES
NO CÓDIGO

Figma

ZeroHeight

CRIAÇÃO DOS COMPONENTES E TOKENS NO FIGMA

REGISTRO E GUIA DE ESTILOS COM TODO O CONTÉUDO

Resultados do projeto

O cliente elogiou a integração entre Zero Height e Figma, destacando a boa conexão entre design, desenvolvimento e documentação.

INTEGRAÇÃO ZERO HEIGHT E FIGMA

A clareza e consistência dos padrões facilitaram a adoção do Design System por toda a equipe.

VALORIZAÇÃO DA CONSISTÊNCIA

A qualidade do desenvolvimento e criação foi um dos grandes destaques, com tokens, componentes e iconografia muito bem resolvidos.

QUALIDADE E DESENVOLVIMENTO

BOAS PRÁTICAS DE DESIGN

O projeto estabeleceu uma base sólida e escalável, alinhando boas práticas de design e código desde o início.

Outros projetos

DESIGN SYSTEM - AUTOCOMPARA

MUDANÇA DE SEGUROS - PRUDENTIAL

ONECLICK - PRUDENTIAL