Empresa
Soft house
Otimizando o tempo de entrega e reduzindo o retrabalho em desenvolvimento.
Como a governança de componentes e a arquitetura de design tokens baseada em JSON aceleraram em 4x a velocidade de criação de layouts, eliminando gargalos com a engenharia e o QA em uma soft house.
Papel
Design Lead
Escopo
Design Ops / 2025
Equipe
Design, Engenharia e QA
Desafio
Arquivos sem padronização, ausência de Auto Layout e falta de componentização centralizada inflavam o tempo de desenvolvimento e criavam retrabalho constante entre Design, Engenharia e QA.
Estratégia
Conectar o PRD à stack técnica de cada projeto, espelhando a biblioteca real no Figma e usando tokens, variantes, Auto Layout e JSON como base operacional.
Resultado
Redução de 75% no tempo de tela, handoff mais limpo, mais de 100 componentes reutilizáveis, 90% de adoção nos projetos e maior previsibilidade de entrega.
Contexto
Dívida de design e desalinhamento técnico
Ao assumir a atuação na empresa, encontrei uma alta dívida de design acumulada. Os arquivos do Figma careciam de padronização estrutural: ausência crônica de Auto Layout, falta de componentização centralizada e estilos obsoletos sem variáveis ou tokens.
A operação gerenciava múltiplos projetos simultâneos com stacks variadas, como React, Angular e Chakra UI. Sem um ecossistema de design conectado ao desenvolvimento, a falta de sincronia entre visual e código obrigava os desenvolvedores a recriarem componentes do zero a cada handoff.
Alterações simples de marca, cores ou tipografia exigiam refatoração manual tela por tela. O que deveria ser uma atualização instantânea virava dias de trabalho repetitivo.
O vaivém com QA também era constante por quebras de layout responsivo e inconsistências de propriedades visuais. A meta foi reduzir atrito sem criar mais processo que o necessário.
Estratégia
Alinhamento técnico entre design, engenharia e QA
Para estancar o desperdício de tempo e estruturar governança de design sem gerar atrito cultural, a estratégia foi dividida em três frentes.
Antes do início de qualquer novo projeto, design e engenharia passaram a alinhar a stack diretamente no PRD. O Figma deixava de ser folha em branco e passava a espelhar a biblioteca real que seria usada no código.
A mudança foi sustentada por três pilares operacionais:
Imersão e respeito ao processo legado
Como reduzir dívida de design sem gerar atrito cultural no time?
Dor
A fragmentação existia dentro de uma rotina ativa. Uma imposição rígida aumentaria resistência e custo de adoção.
Decisão
Um período inicial de observação e escuta ativa foi conduzido para entender o fluxo de trabalho do time de design e mapear onde as maiores fricções técnicas aconteciam.
Sincronização de stacks no PRD
Como impedir que o design nasça desconectado da stack que será implementada?
Dor
Projetos em React, Angular e Chakra UI recebiam layouts sem correspondência direta com suas bibliotecas de código.
Decisão
Antes do início de qualquer novo projeto, o alinhamento com engenharia passou a acontecer diretamente no PRD para mapear a stack técnica escolhida e espelhar no Figma a biblioteca correspondente ao código.
Capacitação prática e mudança cultural
Como tornar Auto Layout, variantes e variáveis parte do dia a dia sem burocracia?
Dor
O time via padronização como etapa extra, não como economia de tempo.
Decisão
Foram conduzidos workshops focados nas vantagens pragmáticas de produtividade ao usar Auto Layout, variantes estruturadas e variáveis nativas do Figma.
Solução
Estruturando um ecossistema White Label em torno de bibliotecas de mercado como o shadcn/ui e de uma camada proprietária de tokens que adapta a base a cada cliente sem romper a lógica do sistema.
PRD
Tokens
Entrega
QA
Diagnóstico
O raio-x do caos
Evidência do fluxo anterior: ausência de padrões globais, camadas desorganizadas e desalinhamento técnico que inflavam o tempo de desenvolvimento e o vaivém com o QA.
Governança
Fluxo contínuo de governança
A introdução do PRD como etapa inicial antes da fase de design garantiu que as restrições de engenharia e os requisitos de produto governassem diretamente a fundação técnica dos arquivos.
Tokens
Governança co-criada de Design Tokens
Liderei rituais de definição conjunta entre design e desenvolvimento para estruturar uma camada central de Design Tokens proprietários. Essa matriz traduziu propriedades técnicas complexas em uma nomenclatura semântica unificada, estabelecendo um vocabulário comum que todo o time compreendia e utilizava com consistência.
White Label
Design System White Label e customização dinâmica
Essa arquitetura isolou as propriedades visuais variáveis, como marcas, cores, tipografia e cantos arredondados, da estrutura lógica dos componentes. Isso permitiu que a mesma base estrutural assumisse múltiplas identidades visuais de forma automatizada para diferentes clientes, centralizando a governança global e eliminando o retrabalho técnico no handoff.
Resultado
Eficiência na prática: como a arquitetura White Label acelera a entrega.
A verdadeira escalabilidade da nossa operação ocorreu quando consolidamos a governança e os padrões em uma arquitetura White Label descentralizada. O time estruturou componentes-base totalmente parametrizados, integrando uma camada semântica de tokens co-criada diretamente com a engenharia. Essa maturidade garante a flexibilidade necessária para personalizar e adaptar o ecossistema a múltiplos produtos em minutos, trazendo consistência visual imediata, eliminando o craft manual e liberando as equipes para focarem na resolução de problemas estratégicos de produto.
Resultado
A virada de chave no processo reduziu a dívida de design e acelerou a operação da soft house.
4x
velocidade de criação
Tarefas repetitivas de layout passaram de 2 horas para 30 minutos.
+100
componentes reutilizáveis
Componentes padronizados com propriedades, variantes e estados reais de código.
90%
adoção nos projetos
Modelo implementado em projetos ativos e novos pela flexibilidade das bibliotecas.
-75%
tempo por tela
Manutenção e criação de telas ficaram drasticamente mais rápidas com tokens e componentes.
QA & Dev
retrabalho reduzido
A conformidade técnica dos componentes reduziu refatoração no handoff e ciclos de correção no QA.
PRD
previsibilidade de escala
O alinhamento técnico desde a especificação permitiu estimativas mais seguras.
Próximos passos: infraestrutura preparada para IA.
Evoluindo o ecossistema White Label de telas estáticas para interfaces adaptativas e contextuais.
Com a consolidação da arquitetura White Label e a maturidade da camada semântica de tokens, o ecossistema foi preparado para a integração de IA generativa e assistida. A engenharia já consome essa estrutura através de um MCP Server (Model Context Protocol), permitindo que ferramentas de IA acessem e puxem os componentes-base parametrizados e os tokens diretamente no ambiente de desenvolvimento. O objetivo futuro é utilizar essa mesma fundação técnica para criar experiências contextuais que se adaptam em tempo real. Em vez de construir fluxos rígidos manualmente, a base estruturada servirá para que sistemas inteligentes configurem layouts dinamicamente, eliminando o atrito e escalando o desenvolvimento de ponta a ponta.
Principais Aprendizados
O projeto reforçou que escala em design nasce quando arquivo, processo e stack técnica deixam de competir entre si.
- Design Ops em soft houses não se faz impondo um Design System único e rígido. A melhor escala acontece quando a organização do arquivo trabalha para o designer e para o desenvolvedor, e não o contrário.
Veja também
UX/UI Design
Reduzindo gargalos operacionais e aumentando a detecção de cargas suspeitas.
Como o redesign do fluxo de inspeção garantiu mais eficiência e conformidade regulatória para o negócio.
Ver case
Sistema web e mobile app
Acelerando o tempo de resposta e reduzindo o risco operacional em campo.
Como a construção de um ecossistema unificado e o uso de voz (IA) eliminaram gargalos de comunicação e garantiram a segurança dos agentes.
Ver case