In every product team I’ve led, there’s a silent killer of velocity that nobody talks about enough. It’s not technical debt, and it’s not scope creep. It’s UI Drift.
It usually starts innocently. A designer tweaks a button radius in Figma from 4px to 8px. Maybe they forget to mention it, or they drop a note in a Slack thread that gets buried. Meanwhile, the developer’s code still says border-radius: 4px.
Fast forward three months, and the production app looks like a distorted echo of the design files. You end up maintaining two sources of truth: the visual dream in Figma, and the hard reality in the codebase.
For a long time, the industry’s answer to this was better communication. We added more meetings, more “red lining,” and more manual handoffs.
But honestly? That’s a waste of human talent. As a Lead UI Engineer, I’ve learned that we don’t need better meetings. We need better infrastructure.
We need to automate the handoff until it effectively disappears. Treating Design as Data, Not Pictures. The core issue is that we treat design properties such as colours, spacing, and typography as styles. We should be treating them as data.
In the architecture I implement, a hex code like #0055FF never lives directly in a CSS file, and it certainly doesn’t live solely in a Figma colour picker. It lives in a platform-agnostic data layer. I usually set this up as a JSON schema that sits in the Git repository.
By externalising these decisions into data, we create a single source of truth that exists independently of any specific tool. Figma is just a consumer of this data.
The React codebase is just another consumer. When the data changes, both update.
The Token Pipeline in Practice
This isn’t high-level theory; this is a specific, automated workflow I’ve architected to stop the drift. Here is how the machinery works under the hood:
First, we maintain a tokens.json file in the codebase. It defines the primitives of the system:
JSON
{“color”: {“primary”: {“500”: { “value”: “#0055FF” },”spacing”: {“md”: { “value”: “16px” }
This file is version-controlled. If a stakeholder or designer wants to change the primary brand colour, it requires a Pull Request. It’s treated as a code change, subject to the same rigour and review as a logic update.
Second, we automate the transformation. Raw JSON is useless to a browser or an iOS app. I use Amazon Style Dictionary to transform this data into platform-specific artefacts during the build process. If we are building for the Web (React), the pipeline
generates CSS Variables (–colour-primary-500) and TypeScript theme objects. If we are building for Mobile (React Native), it generates JavaScript objects and strict interfaces.
For the design side, we use plugins like Tokens Studio to sync this JSON directly into Figma’s variable collections. This reverses the traditional flow.
Instead of a designer drawing a box and a developer trying to copy it, the developer exposes a set of valid “tokens” (constraints) that the designer uses. The designer is effectively coding visually.
TypeScript as the Enforcer
Once the tokens are flowing, you need a way to ensure they are used correctly. This is where TypeScript becomes my enforcer.
In scalable UI architectures, I use TypeScript to lock down the system at the compiler level. I don’t trust myself or my team to remember every spacing value.
I want the code to stop us from making mistakes. For example, a Box component shouldn’t accept just any string for a background colour. It should only accept keys from our theme contract:
TypeScript
interface BoxProps {// The compiler will error if you try to use a hex code or a color not in our system bg: keyof typeof theme.colors; p: keyof typeof theme.spacing;}
This creates a “Success Pit”. A developer working on a tight deadline doesn’t have to
look up the style guide. If they try to use a non-standard spacing value, the build simply fails. The system enforces consistency automatically.
Velocity via Automation
When I led the frontend for the MVP of an app, this architectural strictness was a
massive factor in our speed. We launched a complex, cross-platform application in just 7 months. We didn’t waste time debating pixel values or fixing regression bugs where a button looked different on Android vs. iOS. The automation handled the consistency.
The Invisible Handoff moves us away from the fragile, human-dependent processes of the past.
By treating design as data, we build products that are easier to maintain, faster to ship, and mathematically.
The author:
Ayodeji Moses Odukoya is a Frontend UI Developer with a deep passion for UI engineering and a solid foundation in UI design who specializes in creating high-performance, visually appealing, and user-friendly interfaces, delivering seamless and responsive experiences that meet the needs of both users and developers.
[Featured Photo by NordWood Themes on Unsplash.]
