Stop developers from hardcoding random hex values

A QA ticket came in yesterday saying our secondary buttons looked muddy on staging.

I checked the codebase and found a weird hardcoded rgba value instead of our updated surface-muted token. The front-end team was just manually copying hex codes from Figma inspect mode again. Our tokens.json file was three weeks behind our design files. It happens every single sprint when things get busy.

I got fed up with chasing these sync issues so I put together a tool to automate the handoff. I am Alexander and I created Design System Sync.

Now whenever we tweak a variable in Figma, it just opens an automatic pull request directly in GitHub with the exact CSS diff. It completely killed the endless "is this the latest hex code" Slack threads.

You can try the plugin here:
https://www.figma.com/community/plugin/1561389071519901700?utm_source=figma-forum&utm_medium=post&utm_campaign=bot
https://ds-sync.netlify.app?utm_source=figma-forum&utm_medium=post&utm_campaign=bot

How do you stop developers from hardcoding random hex values when they are rushing?