Design Tokens Today
There seems to be more movement in the design tokens space lately. If you’re someone who falls between design and development you’ve experienced “the gap” between those two areas. Admittedly, I’ve noticed less friction due to 3rd-party developers. Traditional design tools like Figma and Sketch, in a sense, try to mimic what is possible in CSS, but have only taken us so far. However, upon a closer look, these design tools have been taking strides to bridge said gap.
Today’s Hurdles
One of my hurdles is having the ability to create native design tokens and export/sync them as JSON according to today’s token properties format. Meanwhile other developers have stepped up to provide their own solutions, like Figma Tokens and Design Tokens. Sketch has already started to natively support design tokens; starting with color. This is a very big deal…
This might be an opportunity to mention the Design Friends Into Design Systems YouTube channel as they rap on most things design, many videos about design tokens.
My other pain point with these design apps is their dependability on traditional units. In both Figma and Sketch, they are limited to sizing in pixels and percents. However, in web design, we also rely on rem, em, ch, ex, vh, vw… etc., etc. The px might be the least utilized unit I reach for today since it doesn’t lend itself to be scalable.
The Gatekeeper
In my old-man brain, a visual concept starts with a designer. Generally, all changes are handled by the designer first then passed to the developer. To avoid discrepancies, there should only exist a single source of truth accessible by all parties involved.
Without a git repo, the developers would have to visit the design file each time and look up the corresponding code in some Inspect tab in order to copy/paste each modification.
Not to mention, the results within the Inspect tab are mostly unusable to boot because, again, most units are set as pixels. As mentioned earlier, Figma (and Sketch, and every popular design tool on the market) fails to provide rem units. Meaning, if your developer is using pixels to create your project’s type scale in production – it’s a bowl of sour grapes, especially for accessibility.
The Handoff
As a designer/developer, I’m tired of accepting the tedious part. We already have proven tools like Style Dictionary. In earlier days, I came across this design tokens guide which still holds a lot of merit.
Then there are lesser known ways of dispersing tokens without hurting oneself on javascript.
Design Tokens CLI by Heydon Pickering
Heydon Pickering released a design tokens CLI tool, ideal for smaller projects and only 500ms to set up. It also uses the latest specification. Postscript, can’t get enough of those Webbed Briefs.
TokenCSS by Nate Moore
Nate Moore (hardcore Astro developer) released TokenCSS, which is quite magical. If TokenCSS did nothing more than allow us to write CSS sans all the var sheath, it would still deliver us rainbows. Maybe it warrants an audio playlist? TokenCSS is not just for Astro projects. Wield it wherever PostCSS is used; maybe not in production because it’s very early stages. Although Nate released it back in March 2022, he assured me it still has legs. Watch the video on TokenCSS via Frontend Horse.
Update: As of September 17, 2022, TokenCSS has finally received its first major update since its initial release. Now at version 0.1.0.
Tailwind as used by Andy Bell
Be the browser’s mentor, not its micromanager is an intriguing talk by Andy Bell. He didn’t show much behind-the-scenes setup because the talk could’ve carried on for another couple hours. Long story short, he uses Tailwind in such a smart way to produce just-in-time CSS that also dynamically creates CSS class names and custom properties from the tokens he’s declared. I’m underselling it. Inspect his Glitch to become a true-believer.
PostCSS Design Tokens
Similar to TokenCSS, this library parses your tokens from JSON files. Then, values can be declared like design-token('color.background.primary'). Unlike TokenCSS, the name values are not abstracted. Some developers might like the explicity. On the other hand, I welcome the abstraction TokenCSS provides.
What sets PostCSS Design Tokens apart is its tranform function. By declaring the format as style-dictionary3, it can tranform units like Style Dictionary. Given the following example, design-token('size.spacing.small' to rem), size.spacing.small has a value in pixels but will be rendered as rem.
Out of the box, PostCSS Design Tokens returns hard-coded values. However, it can also render CSS variables.
Open Props by Adam Argyle
A “non-prescriptive” utility, Open-Props offers readily-available tokens to ease project indigestion. Need a way to import Open Props’ properties into Figma via Figma Tokens? Read the instructions found within the Design Tokens section.
Developer as a Designer
Being a developer as well as a designer has its perks. Sometimes it’s easier to work on the code-side first. For this scenario, <div>riots has built, Backlight, a premium platform fit to fill this gap plus more. It’s worth checking out Backlight’s YouTube channel for all things design-system specific.
Article Credits
Photo by phil sheldon ABIPP on Unsplash