Tech Lead de um time de 8 - o design system foi adotado por 1000+ pessoas na empresa, em 4 frameworks. Cada time de produto reinventava primitivas entre Angular, React, RN e Vue. Drift regulatório nas entregas de Open Insurance multiplicava a cada release. Unifiquei tudo em uma fonte de verdade com sync bidirecional Figma↔Git.
Caos
Produtos em Angular, React, React Native e Vue. Cada time reimplementando primitivas botões, modais, campos de formulário, padrões de acessibilidade. Drift regulatório nas entregas de Open Insurance se multiplicava a cada release.
Token-first
Padronizar tokens e comportamento em vez de wrappers de framework. Figma Tokens Studio como fonte de verdade do design cor, spacing, raio, tipografia definidos uma vez, consumidos em todo lugar.
Sync Figma↔Git
Sync bidirecional via Azure Pipelines. Designer ajusta token no Figma → cai como commit Git, revisável como qualquer outra mudança. Loop design→dev fecha em minutos, não em sprint.
Compliance
Time de Open Insurance ganhou testes automatizados nas entregas regulatórias prevenindo 90% dos bugs regulatórios. Monorepo + Storybook como documentação viva cortou significativamente o onboarding cross-platform.
- Por que tokens, não wrappers de framework?DS token-firstMudança de token propaga instantaneamente nos 4 frameworks. Wrapping exigiria update de lib por framework na velocidade que marca e regulação se moviam, wrapping nunca alcançaria.
- Por que sync bidirecional (não só Figma → código)?Sync nos dois sentidosDevs às vezes encontram constraint que o Figma não vê (cor falhando contraste AA num fluxo real, spacing quebrando em viewport 320px). Sync nos dois sentidos deixa os dois lados corrigir sem quebrar fonte-de-verdade.
- Por que monorepo?Monorepo + StorybookUma versão, um Storybook, um CI. Devs cross-platform veem mesmos componentes e comportamento sem drift de versão entre times. Onboarding vira self-service.
Backbone da empresa. -90% regressões regulatórias e onboarding cross-platform bem mais curto.