Across 30+ production apps at Xenotix Labs (https://www.xenotixlabs.com) we've used the same design-token pipeline to keep products visually consistent. Different brands, different designers, different platforms, one system. Here is what works.
The problem
Figma designers want to iterate fast. Engineers want a stable contract. If the designer changes a button's hover color and the engineer doesn't know, production breaks. If engineers hardcode colors in their components, the designer loses control of the brand. The only scalable solution is a shared source of truth.
The pipeline
Step 1: designers define tokens in Figma using Variables (scoped by mode: light, dark, brand). Colors, typography, spacing, radii, elevation. Every token has a semantic name (color/primary/500, space/md, radius/sm), never a literal (#3B82F6, 16px).
Step 2: a Figma plugin (we use Tokens Studio) exports the tokens to JSON on commit. The JSON lives in a dedicated git repo (tokens-monorepo) with branches per design system version.
Step 3: Style Dictionary transforms the JSON into platform-specific outputs. For Flutter: Dart constants and a ThemeData extension. For Next.js: Tailwind config and CSS custom properties. For native iOS and Android (when we touch them): .swift and .xml resources.
Step 4: the tokens-monorepo publishes to a private npm registry. Each app installs @xenotix/tokens-{brand}@x.y.z as a dependency. Version bumps flow through dependabot.
What this unlocks
Designers ship brand updates without waiting for engineering. An engineer never has to answer "what color is our primary?" because the answer is always "use the token." Dark mode is free—the same semantic token resolves to different values in dark mode. A/B brand testing is a token-override away.
Where we trip up
Component-level tokens. We learned not to export token names like button/primary/background because the naming explodes and becomes un-maintainable. Instead we keep tokens at the primitive level (color/primary/500) and let component code compose them (button uses color/primary/500 for background, color/neutral/100 for text). This keeps the token count in the low hundreds instead of the low thousands.
Typography is still messy. Figma's text styles don't compose cleanly with programmatic font-weight changes on web. We've settled on shipping 3 font families max per brand (display, body, mono) and letting engineers compose weight + size from primitives. Better than forcing a style token per heading level.
Apps we've shipped this way
Veda Milk D2C subscription platform. Cricket Winner real-time cricket opinion trading. Legal Owl LegalTech super-app with 7 user personas. ClaimsMitra insurance survey platform with 114+ REST APIs. Growara AI WhatsApp automation. 7S Samiti offline-first AI tutor for rural India. Same pipeline, different brands.
About Xenotix Labs
We are a product engineering studio in India building scalable web and mobile platforms for founders. Flutter, Next.js, Node.js on AWS. 30+ products delivered. Figma-to-production in 6 weeks. If you are a founder shipping a product and want design-engineering parity from day one, visit https://www.xenotixlabs.com or email leadgeneration@xenotix.co.in.
Top comments (0)