Is the goal to be able to change a design token and see that change reflected across all your various UIs? How do you ensure people remember to use the design token instead of hardcoding the value? Won’t you still have to check every nook and cranny of the UI to make sure the change doesn’t break anything?
> Is the goal to be able to change a design token and see that change reflected across all your various UIs?
That's exactly it! (with various degrees of immediacy: depending on the tooling it can be in real time, or deferred via a PR for example)
> How do you ensure people remember to use the design token instead of hardcoding the value?
A combination of great docs, education (onboarding, training), autocomplete, and linting. In design tools, it's baked in to the UI so adoption is less of a problem.
> Won’t you still have to check every nook and cranny of the UI to make sure the change doesn’t break anything?
Yes, and that's where visual regression testing comes in and proves valuable to not just developers, but also designers.
For us the killer feature is being able to build the UI once with design tokens and then transform it radically into different themes. In our case the themes serve different brands (of the media company I work for) but more commonly this is a great way to build out light and dark modes.
Our tokens are integrated into the designer’s tooling and we have a build pipeline that allows them to update the frontend with minimal developer supervision, which has been a huge time saver and QoL improvement for both developers and designers.
> Our tokens are integrated into the designer’s tooling and we have a build pipeline that allows them to update the frontend with minimal developer supervision, which has been a huge time saver and QoL improvement for both developers and designers.
Like did you integrate into figma, or write a gui for them, or something else?
We use a Figma plugin called Tokens Studio, which stores its source of truth a (a big JSON file) in our github repo. Designers manage all of the token values there and push updates to a branch and create their own pull requests which developers then do a minimal review on. Long story short, the tokens are converted to CSS variables, which we consume in our styles (we use Vanilla Extract which makes this very nice). The tokens in Token Studio can also be used in the Figma designs, but its a little clunky.
Figma recently launched their own native solution (called Figma Variables) which is more slick and better integrates into the design tooling, but it is mostly locked behind an enterprise-level plan (which lots of folks aren't happy about)
And if that’s not the goal, what is the goal?