We were sitting in a design review on Thursday afternoon. The lead designer wanted to show off the massive token migration we just spent three weeks on. They clicked the primary brand colour variable in Figma. They changed it from sapphire blue to a deep purple. We all leaned in to watch the magic happen.
The main background changed. The primary buttons changed. Every single secondary button, checkbox, and status badge stayed perfectly and stubbornly blue.
The room got very quiet. We realised our massive token migration was basically just a paint job.
The invisible tech debt
This is the dirty secret of design systems right now. Teams spend a month arguing about naming conventions. You finally settle on a beautiful semantic structure. You create your primitive colours. You map them to semantic variables. Everyone claps.
But nobody talks about the manual labour required to actually apply those variables to the hundreds of existing components in your file.
You open a legacy card component. The background looks correct. You check the inspect panel. It says a raw hex code instead of your primary surface variable. The developer sees the hex code and writes the hex code into the codebase.
<!-- What the developer writes because the Figma file lied to them -->
<div class="bg-[#0f172a] border border-[#cbd5e1] rounded-lg p-4">
<p class="text-white">User Name</p>
</div>
Your beautiful token system exists in a vacuum. The developers are building exactly what they see. They are not doing anything wrong.
When a developer pulls down a fresh design, they trust the file. They assume the designer has already done the hard work of mapping the visual choices to the system. If the file is full of raw values, the developer assumes those raw values are intentional overrides. The developer thinks there is a special reason this specific card needs a unique background colour. They do not want to break the design. So they write exactly what they see.
This creates a massive feedback loop of bad data. The design file has a raw value. The codebase gets a raw value. Later, when the design system team updates the core tokens, neither the design file nor the codebase updates. The team thinks the rebrand is done. The users still see the old interface.
The problem scales terribly as the team grows. A junior designer duplicates a frame. They detach an instance to make a quick tweak. They hardcode a new grey border because they can't remember if they should use the subtle border token or the muted border token. Over time your file rots from the inside out. You think you have a single source of truth. You actually have a suggestion box.
It gets even worse with typography. Designers will apply a text style to a paragraph. Then someone decides that specific paragraph needs to be slightly smaller to fit the container. They break the style link and manually set the font size to an absolute pixel value. The developer inspects it and just copies the absolute pixel values.
<!-- The silent killer of responsive design -->
<p class="text-[13px] leading-[18px] font-medium">
Where did our typography tokens go? Nobody knows.
</p>
The discipline myth
I hear the pushback from design ops teams all the time. People say you just need better team discipline and stricter review processes. They argue that a manual audit before every major release catches these detached variables. They claim that regular sync meetings will keep everyone aligned.
That sounds great in a blog post. It never works in reality.
Humans are terrible at spotting a hex code that looks visually identical to the official token. You can't eyeball a missing variable connection. A hardcoded blue looks exactly the same on screen as your primary brand token. You need automation to catch it.
Finding the missing links
This frustrating Thursday afternoon is exactly why I ended up building a tool to solve it. I created Design System Sync. It's a Figma plugin that exports your variables to GitHub. But the newest version has a feature specifically for this exact nightmare.
I built an Unwired detection engine. The plugin scans every single component in your file. It shows you exactly which properties still use hardcoded hex values instead of your system variables. You get a clean report card displaying the total count. You can click right in to see the exact component and property that needs fixing.
We also fixed the code generation side of things. The generated code now outputs real variable references instead of raw hex values. It matches your design system instead of pulling stale cached colours. You can even select multiple variants and generate code for all of them at once. The generated code persists when you switch between tabs.
I also added a new Text Styles tab. It lets you browse all text styles in the file. They are auto-grouped by category like Heading, Body, Label, and Caption. When you export them, the token references are preserved.
If you want to stop manually hunting down hardcoded colours, check out Design System Sync. You can also grab it directly from the Figma Community. The free tier gives you five exports a month to GitHub or Bitbucket.
Design systems are supposed to save us time. If you're manually checking hex codes against a spreadsheet, you're just doing busywork. Stop relying on visual reviews to catch structural problems. Computers are good at checking references. Humans are good at designing interfaces. We should let each do their job.
Be honest with yourself and check your main UI kit today. What percentage of your components are actually wired up to tokens right now?
