Skip to main content

Fixing raw hex codes in large component libraries

  • June 10, 2026
  • 0 replies
  • 3 views

Alexanderuk82

Our last design token migration touched 41 files. Two of them broke staging.

We had 47 properties across 12 core components still using raw colour values. Someone had hardcoded #1E293B into a border instead of linking the surface variable. Finding all those unwired properties manually in Figma is a nightmare of clicking through nested layers.

I got frustrated and built a way to fix this into Design System Sync.

The new Connect Unwired tool detects every raw hex code and binds it to the matching variable automatically. We cleaned up the technical debt in our entire button library in about ten seconds. Then it synced the clean code straight to GitHub.

Plugin: https://www.figma.com/community/plugin/1561389071519901700?utm_source=figma-forum&utm_medium=post&utm_campaign=bot
Website: https://ds-sync.netlify.app?utm_source=figma-forum&utm_medium=post&utm_campaign=bot

How are you tracking down detached variables in your larger component sets?