From Figma Tokens to Production Code in One Command
How we automated our design-to-code pipeline so designers push tokens and engineers get production-ready theme code instantly.
The design-engineering handoff problem
Every studio knows this pain: designers update colours in Figma, engineers manually copy hex values into code, someone makes a typo, the app looks wrong, a ticket gets filed. Multiply by 50 design tokens across 3 platforms and you have a full-time job just keeping things in sync.
Token-based design systems
We export design decisions as structured JSON — colours, typography scales, spacing, border radii, shadows — directly from Figma using the Tokens Studio plugin. These JSON files are the single source of truth. Not the Figma file. Not the code. The tokens.
Code generation
We built a custom generator (hex_theme_generator) that reads Figma token JSON exports and generates platform-specific theme code. For Flutter, it outputs ThemeData, ColorScheme, and TextTheme classes. For web, it outputs CSS custom properties and Tailwind config. Same tokens, multiple platforms, zero manual translation.
The workflow
1. Designer updates tokens in Figma (e.g., changes primary-500 from #3B82F6 to #2563EB). 2. Exports token JSON to the design/ directory. 3. Runs the generator (one command). 4. Commits the generated theme code. 5. Apps automatically pick up the new theme on next build.
Why this matters
When a client says "make the accent colour warmer," it’s a 2-minute change that propagates across both mobile apps and the web dashboard simultaneously. No design QA needed. No "is this the right shade?" conversations. The tokens ARE the spec.
Material 3 integration
Our component library (HexUIKit) is built on Material 3 and consumes the generated theme tokens. Components don’t hardcode colours — they reference semantic tokens (surface, onSurface, primary, secondary). Swap the token set and the entire UI updates coherently.