[Voltar](https://eduardoamaral.me/projetos/) Talqui # Como criar uma plataforma que cresça facilmente, seja bem organizada e tenha um visual simples para a Talqui? - Product Design - Design System Desafio ## Criar regras para manter o crescimento da plataforma. A versão anterior da Talqui não tinha padrões de design ou documentação compartilhada. Isso dificultava manter a consistência. Também tornava mais difícil melhorar a interface e crescer o produto. Meu trabalho foi criar essa base comum, do design system até as telas da plataforma. Antes ## A interface antes do design system. As telas antigas de atendimento e configurações mostram o ponto de partida. Elas incluem navegação, listas de conversas, formulários e painéis do cliente que precisavam de padrões comuns. Também faltavam orientações de uso documentadas. 1 / 3 . Fila de conversas e atendimento. Imagem editada para esconder dados pessoais e mensagens. Como resolvemos ## Tokens, componentes e documentação feitos para crescer. O design system foi criado desde o começo pensando em crescer. Variáveis, design tokens, componentes e padrões foram organizados como base do produto. Criei os design tokens com uma nomenclatura personalizada. Aproximei a semântica da marca, a lógica de interface e a implementação. Isso ajuda o time a evoluir o sistema com menos ambiguidade. Os desenvolvedores criaram um repositório próprio para o design system. Eles mantêm esse material sempre atualizado e sincronizam a documentação com o Storybook. Isso torna o projeto mais fácil de ampliar e pronto para receber novas atualizações. Design System ## Das cores e da tipografia aos componentes. ### Cores primitivas como ponto de partida. A coleção Primitive organiza as cores por paleta. O quadro mostra a escala de neutros com níveis numéricos e valores hexadecimais. A imagem foi tirada da gravação do projeto. ### Tokens semânticos ligados à paleta. [Abrir vídeo](https://eduardoamaral.me/assets/talqui-ds-variables-DyB9JPWv.mp4) A gravação passa pelos grupos de fundo da coleção Theme. Depois, abre Primitive. Níveis semânticos como weakest e strongest fazem referência a variáveis da paleta, como talqui/color/blue/400. O vídeo não tem áudio. Dura 9 segundos. ### Estilos tipográficos com propriedades definidas. [Abrir vídeo](https://eduardoamaral.me/assets/talqui-ds-typography-DQFrYRGV.mp4) Os estilos display, heading, label e body organizam a escala tipográfica. A gravação mostra estilos de display para apresentar variáveis de família e peso, tamanho e entrelinha. O exemplo display large usa 44/52 e semibold. O vídeo não tem áudio. Ele dura 11 segundos. ### Montando uma tela com o design system [Abrir vídeo](https://eduardoamaral.me/assets/talqui-ds-using-4x-CW7bJ7lv.mp4) Demonstração no Figma da criação de uma tela com a biblioteca Talqui. Mostra navegação lateral, cards e gráficos. Usa variantes dos componentes e variáveis de espaçamento. O vídeo não tem áudio. Ele está acelerado quatro vezes e dura cerca de 26 segundos. Coleções de variáveis no Figma com os grupos Theme, Style, Typography e Extensions organizam os tokens semânticos da plataforma Talqui. Componente Base Badge está documentado no Figma com uma tabela de propriedades, variantes e exemplos de uso da plataforma Talqui. Storybook do Talqui DS está em design-system.talqui.dev com variantes do componente Badge. Essas variantes incluem cores, contorno e ícones. Tela de cadastro da plataforma Talqui. O componente t-base-button está em uso. Fundações ## Identidade de plataforma A interface deixou de parecer uma adaptação técnica. Agora tem uma linguagem de produto própria para a Talqui. ## Design tokens Variáveis têm nomes que seguem uma lógica própria para facilitar o uso, a manutenção e a ligação com o código. ## Componentes escaláveis Componentes feitos para vários contextos, estados e atualizações, sem precisar criar novos padrões em cada tela. ## Repositório de DS Os desenvolvedores criaram uma base própria para o design system. Eles a mantêm atualizada junto com a plataforma. ## Storybook A documentação técnica está em sincronia com o Storybook. Isso cria uma referência atualizada para o time. ## Novas telas A equipe refez a plataforma com novas telas e fluxos, usando essa base visual e técnica. Processo - 01 Refiz a plataforma usando uma versão antiga que era um fork de uma interface criada pelo time de desenvolvimento. - 02 Criação de uma identidade de plataforma que segue a marca Talqui. Isso conecta o produto, a experiência e a linguagem visual. - 03 Criação do design system com variáveis, design tokens e componentes feitos para crescer e serem mantidos sempre. - 04 Definir um nome personalizado para tokens, aproximando o significado do design e da implementação. Solução Nova plataforma com linguagem própria. Ela combina mais com a marca e está pronta para mudanças no futuro. Sistema de design com versão, repositório próprio, manutenção feita pelo time de desenvolvimento e documentação sempre atualizada. Tokens e componentes organizados para evitar decisões aleatórias. Isso ajuda a criar novas telas mais rápido sem perder a consistência. Base mais fácil de expandir para updates, novos fluxos, novas funções e evolução do produto de atendimento com IA. [Ver Storybook no ar](https://design-system.talqui.dev/) Próximo Case [Petrobras DS v2 Biblioteca de componentes, design tokens e documentação](https://eduardoamaral.me/projetos/petrobras-design-system/) Source: https://eduardoamaral.me/projetos/talqui/ Language: pt-BR