Sobre o Projeto

Por se tratar de um produto SaaS global, com fluxos de navegação complexos e múltiplos perfis de usuário, existiam diversos elementos e componentes que ainda não estavam documentados ou padronizados.

À medida que o produto evoluía e novas funcionalidades eram adicionadas, surgiram desafios relacionados à consistência visual, reutilização de componentes, escalabilidade e velocidade de entrega entre os times.

Problema

As interfaces estavam evoluindo rapidamente, porém sem uma biblioteca compartilhada de componentes, tokens e padrões. Isso gerava inconsistências visuais, duplicação de soluções e aumento do esforço necessário para design e desenvolvimento.

Objetivos

Criar uma base escalável e que acomodasse futuras incorporações no produto de forma responsiva para web e mobile.

• Acelerar o acesso e a utilização de componentes por designers, PMs e engenharia;
• Reduzir atritos no fluxo de trabalho entre times;
• Aumentar consistência e qualidade das interfaces;
• Promover escalabilidade do produto e do sistema;
• Criar uma base de referência para alinhamento entre design e engenharia.

Meu Papel

Atuei como responsável pela iniciativa de Design System dentro do produto. Liderei a condução de uma auditoria completa de elementos de UI, componentes, páginas e assets utilizados em diferentes partes do produto.

A partir dessa análise, defini a taxonomia do sistema e estabeleci convenções de nomenclatura para resolver inconsistências visuais, aumentar a escalabilidade e reduzir atritos na implementação com o time de desenvolvimento.

Também atuei na estruturação da lógica do Design System para suportar tanto as necessidades atuais quanto futuras evoluções do produto. Em colaboração com o time de design, implementei um sistema baseado em tokens para cores, espaçamento e tipografia, reduzindo inconsistências e simplificando atualizações em escala.

Etapas

• Auditoria dos padrões e componentes UI existentes;
• Realização de benchmarking e definição da estratégia do Design System;
• Criação de componentes reutilizáveis e escaláveis;
• Implementação de variáveis e modos;
• Aplicação de variáveis para controle dinâmico em protótipos avançados;
• Definição de convenções e da taxonomia para componentes e tokens;
• Estruturação das fundações e design tokens;
• Criação dos tokens primitivos, semanticos e extensões semânticas;
• Colaboração próxima com times de design e desenvolvimento;
• Criação de um projeto prova de conceito (POC) para incorporação dos tokens nos designs.

Benchmarking

• Uber Base;
• Material Design;
• Shopify Polaris;
• Adobe Spectrum;
• Salesforce Lightning Design System.

Lógica e Arquitetura

Os componentes foram criados usando recursos como Auto-layout e Propriedade de Componentes do Figma para garantir a responsividade dos elementos nos dispositivos web e mobile. As propriedades utilizadas foram Text, Boolean, Instance Swap e Variant.

Para automatizar e acelerar o processo de criação de novos designs, foram utilizadas variáveis em atributos como width, min-width e max-width. As variáveis associadas aos Modes foram pensadas para poder controlar dinamicamente os componentes ao usar os templates desktop e mobile, bem como criar protótipos de alta fidelidade.

Alguns dos Componentes Criados:

• Navegação principal (Sidebar e Navbar);
• Navegação contextual (Page Header);
• Botões;
• Campos de formulário;
• Widgets;
• Cards.

Criação dos Tokens

Taxonomia: O modelo "O quê-Onde-Como"

A estrutura de nomenclatura escolhida para classificar e nomear os tokens de maneira semântica foi a "O quê-Onde-Como".

• O quê (What): A qual elemento ou conceito semântico o valor se refere;
• Onde (Where): Em qual contexto, tela, área ou estado esse elemento está inserido;
• Como (How): Qual é a função exata, variação ou hierarquia.

Resultados Alcançados

Processo de Trabalho:

• Aceleração dos fluxos de trabalho e exploração de soluções de design;
• Reutilização consistente de componentes como inputs, widgets, cards e modais;
• Criação de um changelog para histórico de decisões e evolução do sistema;
• Criação de templates automatizados com variáveis, permitindo adaptação entre dispositivos (ex: geração de layouts mobile a partir de desktop via troca de Modes).

Base Escalável:

• Estabelecimento de fundações escaláveis para evolução do produto e adição das múltiplas variações futuras;
• Implementação de variáveis e modos para controle dinâmico de componentes.

Protótipos Avançados e Testes com Usuários:

• Criação de protótipos avançados de alta fidelidade controlando o conteúdo e a visibilidade dinamicamente;
• Realização de testes com usuários e iterações de projetos;
• Trabalho próximo entre os times de design, produto e pesquisa.

Relação Design e Engenharia:

• Melhoria significativa na colaboração e alinhamento entre design e engenharia;
• Construção de fluxo design-to-code usando base de tokens.

Ferramentas

---

• Figma