Design System
Como construímos um Design System sem parar o produto.
✺
ui designer
figma
Como construímos um Design System para um cliente tradicional, sem um time dedicado, integrando sua evolução ao desenvolvimento do produto.
A dor
Padrões de interface espalhados por diferentes arquivos e soluções.
Componentes semelhantes eram recriados diversas vezes.
Decisões de design descentralizadas dificultavam a consistência.
A chegada de novos designers aumentou a necessidade de uma fonte compartilhada de padrões.
O desafio
Não havia um time dedicado ao Design System.
Não existiam horas reservadas exclusivamente para sua construção.
Parar o time para criar uma biblioteca completa não era uma opção.
Foi preciso convencer o cliente a investir horas no Design System como parte da evolução do próprio produto.
A estratégia foi construir o Design System enquanto construíamos o produto.
Em vez de tratar o Design System como um projeto paralelo, incorporamos sua construção ao nosso próprio processo de desenvolvimento.
Cada nova feature se tornou uma oportunidade para identificar padrões, transformá-los em componentes reutilizáveis, documentar seus comportamentos e levá-los para o código.
Nova feature
Padrão detectado
Componente no Figma
Código
Reutilização
Essa abordagem nos permitiu construir o sistema gradualmente, sem criar um backlog separado exclusivamente para Design System.
Design & Desenvolvimento lado a lado.
Para cada novo componente, criamos um pequeno ritual de alinhamento com o desenvolvedor responsável pela implementação.
01
DESIGN
Criávamos o componente, seus estados, variantes e comportamentos.
02
ALINHAMENTO
Uma conversa rápida de 15 minutos com desenvolvedores.
03
CÓDIGO
O componente era implementado enquanto a feature avançava.
04
REUTILIZAÇÃO
O componente passava a fazer parte da biblioteca.
Como transformar uma biblioteca em uma prática do time?
Precisávamos criar adesão ao Design. O maior desafio foi mostrar para a empresa por que o Design System importava.
Envolvemos stakeholders e desenvolvimento desde o início, mostrando como uma linguagem compartilhada poderia:
reduzir retrabalho
acelerar desenvolvimento
diminuir inconsistências
facilitar decisões entre Design e Desenvolvimento
Com o tempo, o Design System deixou de ser visto como uma iniciativa do Design e passou a ser entendido como uma ferramenta para o produto inteiro.
Resultado
O impacto das decisões de design
90+ COMPONENTES CONSTRUÍDOS E ORGANIZADOS
BIBLIOTECA COMPARTILHADA
DESIGN E DEV TRABALHANDO EM PARALELO
victoria dias | PRODUCT DESIGNER & no-code developer
© 2026 Victoria Dias. All rights reserved.