Trio | Design System

Principais Desafios

1. Transformar estilos em um sistema

2. Criar consistência em escala

3. Reduzir o trabalho manual

4. Criar flexibilidade sem perder controle

Soluções

Discovery

O trabalho começou com uma análise da estrutura existente no Figma e das necessidades do produto.

• Estilos existentes

• Componentes

• Padrões recorrentes

• Inconsistências

• Necessidades das principais jornadas

• Estruturas que poderiam ser transformadas em componentes reutilizáveis

A partir desse levantamento, organizei a arquitetura do Design System em diferentes camadas.

Foundations

Estruturei as principais variáveis do sistema:

• Color primitives

• Color semantic

• Typography

• Spacing

• Sizing

• Border radius

• Breakpoints

A estrutura passou a permitir que decisões visuais fossem centralizadas e propagadas pelo sistema.

Print da tela de como as variables estão organizadas dentro do Figma:

Design Tokens

Um dos principais trabalhos foi transformar decisões visuais em tokens reutilizáveis.

No Figma, criei collections e variables para representar as principais decisões do sistema.

Por exemplo:

Primitive → Semantic → Component

Em vez de um componente depender diretamente de uma cor específica, ele passa a consumir uma variável semântica.

Isso permite alterar a fundação visual sem precisar revisar componente por componente.

O resultado é um sistema muito mais previsível e sustentável.

Componente "counter" tokenizado na semântica de cores light e dark mode

Tokens aplicados no componente

Componentes

Depois da estrutura de tokens, apliquei essa base em todos os componentes.

Os componentes foram reconstruídos utilizando:

• Variables

• Variants

• Properties

• Boolean properties

• Text properties

• Component properties

• Estados

Isso permitiu criar componentes mais flexíveis sem precisar duplicar versões.

Por exemplo, um mesmo componente pode assumir diferentes configurações de acordo com suas propriedades:

State · Default
Badge · True/False
Suffix · True/False
Helper · True/False
Icon · Light/Dark
Title · Variation

Em vez de criar dezenas de componentes diferentes, o sistema passa a trabalhar com um componente configurável.

Estados booleanos aplicados nas propriedades dos componentes.

Templates & Slots

Uma das evoluções mais importantes foi sair da lógica de “componentes isolados” para uma lógica de templates de produto.

Criei estruturas reutilizáveis para:

• Páginas principais

• Páginas internas

• Dashboards

• Modais

• Feedbacks

• Formulários

• Estados de interação

Utilizando slots do Figma, os templates passaram a funcionar como estruturas prontas para receber diferentes conteúdos.

Tela de "Templates de detalhes" usando booleanos para controlar os princiais itens da página.

IA como parte do processo

Um dos diferenciais desse projeto foi incorporar IA diretamente ao processo de construção e revisão do Design System.

Utilizei principalmente:

• Figma

• Figma AI / Agents

• Claude conectado ao Figma

• Skills para análise e revisão de componentes

A IA foi utilizada em dois momentos principais: aceleração da construção e revisão da qualidade dos componentes.

Na construção, utilizei IA para automatizar tarefas repetitivas, especialmente a aplicação e organização dos tokens nos componentes.

Já com as Skills, foi possível criar uma camada adicional de revisão: os componentes eram analisados para identificar inconsistências, propriedades mal configuradas, oportunidades de padronização e possíveis problemas na estrutura.

Em vez de revisar componente por componente de forma totalmente manual, as Skills ajudavam a encontrar padrões e inconsistências em escala, permitindo concentrar o trabalho manual nas decisões que realmente exigiam julgamento de design.

Exemplo de como as skills criavam arquivos detalhando os componentes.

Delivery

O resultado foi uma estrutura completa de Design System preparada para sustentar a evolução do Internet Banking.

A arquitetura passou a conectar da seguinte forma:

1. Foundations

2. Tokens

3. Components

4. Patterns

5. Templates

6. Product Screens

Essa estrutura permite que novas funcionalidades sejam construídas a partir de padrões existentes, reduzindo a necessidade de criar soluções visuais do zero.