Dark mode broke staging and I blamed the developers

There was a Slack message in our dev channel at 9am saying our new dark mode was literally unreadable.

I checked the staging build and saw #FFFFFF text sitting directly on top of #F8FAFC. The front-end team had accidentally mapped the wrong CSS variable to our surface token during the handoff. We spent two hours tracking down a tiny typo in globals.css instead of actually doing our jobs.

I am Alexander and I got so fed up with this that I built a plugin to fix it. It exports Figma variables directly into GitHub pull requests automatically.

Now our token updates happen with a single click. We have not had a single contrast failure in staging for four months because the code always matches the design perfectly.

You can try Design System Sync 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 guys catch token mapping errors before they hit production?