Each product team was reinventing primitives across Angular, React, RN and Vue. Regulatory drift on Open Insurance deliveries multiplied with every release. I unified everything into one source of truth with bidirectional Figma↔Git sync.
Chaos
Products in Angular, React, React Native and Vue. Each team reimplementing primitives buttons, modals, form fields, accessibility patterns. Regulatory drift on Open Insurance deliveries multiplied with every release.
Token-first
Standardize tokens and behavior instead of framework wrappers. Figma Tokens Studio as the design source of truth colors, spacing, radii, typography all defined once, consumed everywhere.
Figma↔Git sync
Bidirectional sync via Azure Pipelines. Designer adjusts a token in Figma → it lands as a Git commit, reviewable like any other change. The design→dev loop closes in minutes, not sprints.
Compliance
Open Insurance team got automated tests on regulatory deliveries preventing 90% of regulatory bugs. Monorepo + Storybook as living documentation cut cross-platform onboarding significantly.
- Why tokens, not framework wrappers?Token-first DSA token change propagates instantly across all 4 frameworks. Wrapping would require a library update per framework at the speed brand and regulatory rules moved, wrapping would never catch up.
- Why bidirectional sync (not just Figma → code)?Two-way syncDevs sometimes find a constraint Figma can't see (a color failing AA contrast in a real flow, a spacing breaking on a 320px viewport). Two-way sync lets both sides correct without breaking source-of-truth.
- Why monorepo?Monorepo + StorybookOne version, one Storybook, one CI. Cross-platform devs see the same components and behavior no version drift between teams. Onboarding becomes self-service.
Company backbone. -90% regulatory regressions and significantly shorter cross-platform onboarding.