Stop exporting JSON tokens and use CSS variables instead

A designer questioned whether a company should start exporting their brand tokens as JSON files, after reading about complex token pipelines. The reporter disagreed, as they realized their web team only needed simple hex codes for colors in a React application. They were tired of overcomplicated workflows and unnecessary build steps just to use colors.

JSON token exporting often leads to writing scripts to flatten objects and map them to styling solutions like Tailwind or styled-components, adding complexity without much benefit. If a color breaks, it's hard to trace the issue back through the build script. CSS variables, however, are directly understood by the browser and offer a far simpler solution.

CSS variables allow for inspecting values in Chrome DevTools, easy changes during design testing, and scoped styles to specific components. They excel in theming, enabling dark mode toggling with simple data attributes and no JavaScript required. Native apps also have no need for JSON tokens, as the browser handles heavy lifting for them.

The reporter's company stopped using JSON months ago, now pushing CSS variables directly from Figma to their repository. A pull request appears in GitHub with the raw CSS file, allowing developers to review visual changes and merge them easily. The reporter built Design System Sync to automate this process, eliminating the need for build scripts. They recommend checking out the tool at https://ds-sync.netlify.app?utm_source=devto&utm_medium=post&utm_campaign=bot or grabbing the Figma Community plugin.