home/works
preâmbulo tech • design system
na preâmbulo tech, participei da construção e evolução de um design system para os produtos saas jurídicos da empresa, em um contexto de modernização das interfaces e migração do sistema legado cpj-3c para o ambiente web do cpj-connect.
o objetivo era criar uma linguagem visual mais consistente e uma estrutura que pudesse ser reutilizada por diferentes produtos e funcionalidades.
user interface
/desafio/
entendendo o contexto
a partir do crescimento do catálogo de produtos ofertados pela empresa, tornou-se cada vez mais visível a necessidade de uma consistência visual, escalabilidade e eficiência no processo de design. o projeto teve como objetivo estruturar e consolidar um design system capaz de atender diferentes produtos e interfaces, criando uma base reutilizável para designers e desenvolvedores.
/tokens•variáveis/
base da estrutura
o processo prático iniciou a partir da construção das bases do sistema no figma, organizando cores, tipografia, espaçamentos, grid, ícones e demais tokens visuais.
também foram definidas variáveis para facilitar a manutenção e permitir maior consistência entre diferentes contextos de uso.
/nomenclatura/
construção da semântica
as variáveis também foram nomeadas de forma intuitiva e orientada à função, tornando seu propósito compreensível diretamente no figma. essa padronização facilitou a organização da biblioteca, a documentação dos componentes e a comunicação entre design e desenvolvimento.
/componentização/
da variável ao componente
a partir da base de estilos, desenvolvi na sequência uma biblioteca de componentes reutilizáveis, considerando diferentes estados, tamanhos, variações e comportamentos.
a estrutura foi baseada em princípios de componentização e atomic design, buscando tornar os elementos flexíveis e escaláveis para diferentes produtos e necessidades.
/nomenclatura/
aplicação nos produtos
o design system construído nesse projeto contribuiu para uma maior consistência entre os produtos da marca e uma maior agilidade na criação de novas telas através de componentes reutilizáveis. além disso, o sistema também ampliou a ponte entre design e o time de desenvolvimento, facilitando a implementação e manutenção das telas para ambos os setores.
/projetos/
