Case 01 · 1Doc
1DS: Design System da 1Doc
Da identidade visual aos tokens no Figma, e de uma biblioteca adaptada do PrimeVue a um sistema que designers e IA evoluem juntos, direto no código.
[Imagem de capa do case]
- Empresa
- 1Doc · Softplan
- Meu papel
- Product Designer
- Período
- [Período]
- Time
- Time de design com 4 pessoas
- Ferramentas
- Figma · Claude Code · GitLab
Contexto
A construção do 1DS aconteceu em paralelo ao redesign da plataforma. Ele começou como uma adaptação da biblioteca do PrimeVue e, depois, os componentes passaram a ser desenvolvidos pelo time de tecnologia com apoio da IA.
Conto um pouco mais sobre a criação e a evolução do 1DS neste artigo (abre em nova aba).
Fundação
Fui responsável pela criação da identidade visual e do nome do 1DS, ajudando a estabelecer sua personalidade e seus padrões de comunicação.
Também estruturei toda a organização das bibliotecas no Figma, criando os tokens e suas relações para garantir consistência e flexibilidade na evolução das interfaces. Entre as principais entregas:
- Organização das cores primitivas (primitive tokens) e criação das variantes semânticas de cor.
- Criação dos tokens tipográficos e de sombras.
- Organização das variantes de tema no Figma, com diferentes paletas de cores e os modos claro e escuro.
- Estruturação das bibliotecas e do padrão de documentação dos componentes.
- Manutenção dos componentes criados inicialmente com base no Vue, adaptando estilos, aplicando os tokens e organizando a estrutura.
Antes do lançamento do 1DS, fiz toda a componentização no Figma, aplicando propriedades e variáveis. Como ainda não existiam os MCPs, toda a documentação dos componentes também foi feita de forma manual.
Essa organização criou uma base consistente para novos componentes e para a manutenção das interfaces. Foi a partir da documentação no Figma que o 1DS passou a ser construído com IA.
Com o tempo, o processo evoluiu: hoje todo o time usa IA e agentes para desenvolver componentes, subir alterações e atualizar a documentação. É isso que permite a um time de design enxuto, de 4 pessoas, manter e escalar o sistema.
Desafio
Com a adoção da IA no desenvolvimento, o time passou a implementar componentes com o Claude Code, por meio de um agente especializado, e a disponibilizar o projeto via GitLab.
Mas, com esse processo concentrado exclusivamente no time de tecnologia, identificamos uma limitação na escalabilidade e na velocidade de evolução do Design System.
Solução
Autonomia para o time de Design
A solução foi ampliar a autonomia do time de Design: os próprios designers passaram a usar os agentes para fazer manutenções nas bibliotecas de código, abrir Merge Requests (MRs) e participar diretamente da revisão e aprovação das alterações.
Uma skill para aproximar código e Figma
Nesse contexto, identifiquei outra lacuna: os componentes implementados em código nem sempre chegavam às bibliotecas do Figma, gerando um descompasso entre o sistema usado no desenvolvimento e o disponível para criar interfaces.
Para resolver isso, desenvolvi uma skill para o Claude Code, adaptada aos padrões visuais e às diretrizes do 1DS. Com ela, é possível:
- Criar interfaces utilizando os componentes existentes.
- Desenvolver novos componentes seguindo as convenções do Design System.
- Organizar a documentação no Figma a partir de uma estrutura predefinida.
A skill fica versionada na pasta do projeto no GitLab e é atualizada a cada sessão de trabalho com o Claude Code, mantendo as instruções alinhadas à evolução do sistema.
Próximos passos
- Revisar e aprimorar os componentes considerando critérios de acessibilidade.
- Aprofundar as orientações de uso, detalhando propriedades, variantes, estados e comportamentos esperados de cada componente.