How to work with design tokens straight from your design app

Sketch, Figma or InVision Studio? You choose, we support all three

Too Long Didn’t Read

This article is about a couple of things. Design tokens and what they are. It’s also about Stratos Tokens, an easy to use design token Mac app from the folks behind Sketch2React that support Sketch, Figma & InVision Studio files.

Since you’re reading this here you probably use Sketch. We still have ❤️for Sketch. Proof? We now support using Sketch Cloud and Sketch Shared Libraries for a remote way of controlling & distributing your design token data.

Still here? Well read on dear reader

From day one as Team Sketch2React, me and Fredrik have been working towards the very same goal — to be able to let designers do more directly from where designers spend most of their time — in the design tool.

Everything we develop as a team has that thinking inside its DNA. We felt the time was right to apply our philosophy of better work to the topic of design tokens. That’s why we created Stratos Tokens for Mac.

Oddly not many designers even know what design tokens are, more less work with them. Why? We may know why. Let us explain.

What are design tokens anyway?

This is one of the best quotes I have found for describing design tokens?

That’s a really great quote, it really nails it. Great job Kyle!

I found it in Kyle Gach’s epic article about design tokens here on Medium from back in 2018. Awesome read, highly recommended!

Fun thing is, all that setting up that he does in code in his article — you will do all of that straight from Sketch (or Figma/InVision Studio).

Using a good old Sketch2React technique. ✅

But more on that later.

Design tokens are design decisions

So now we have learned that design tokens are design decisions. Who should own these decisions? Designers of course. That’s why we built Stratos Tokens in the first place.

You should be able to handle and distribute all of your design decisions in the same apps that those decisions are made in. Really elementary actually.

We already use our design applications for things like ideation, crafting user experiences, building prototypes, UI’s, co-working with other designers & deciding this and that. So why then separate design from code? Exactly, makes no sense.

With Stratos Tokens you get that much sought after but seldom reached ”one single source of truth” for all your styles, straight from your preferred design tool.

Basic design tokens

Here’s a list of what I call basic design tokens taken from how Duet Design System lists them:

Colors
Typography
Effects
Border radius
Spacing
Animation timing
Line height
Z-index
Opacity
Transition
Media query

Advanced design tokens

You can also go totally bananas with the tokens, here’s an example of just one component:

Design Tokens beyond colors, typography, and spacing.

Every design token should be unique & have a unique name

For example, if we follow how MaterialUI names things, primary1Color is always called primary1Color. It doesn’t matter if you change the color of it for using in a dark theme or rebranding the components for your clients.

The example below from Figma is taken from our very simple design tokens demo file for MaterialUI that you can download from here.

**primary1Color** has the same name but of course different value depending on the theme

…and here’s the exact same file but in Sketch. Btw the .zip from our website contains all three demos, one for each design app that we support.

Again, same name but different values… In this case a good old H2

Talking about MaterialUI, they recently released this:

https://medium.com/material-ui/introducing-material-ui-for-sketch-b72f5f79f7f0

Connecting the famous dots yet? We hope so!

ProTip #1 — The power of the Sketch file format

Using both Sketch & Figma? Do yourself a great favour by making them in Sketch since the .sketchfile format can smoothly be imported into the other apps but not vice versa.

ProTip #2 — Style Dictionary support

Make sure you use the power of our built-in support for Amazon’s Style Dictionary right from the get-go. Download our free demo file to get an idea of how things need to be setup. As they say in their catchy slogan:

Style once, use everywhere.

Our free demo for how to get started using our built-in Style Dictionary support

ProTip #3 — Use .dtignore

For all things that you don’t want to end up in your JSON design token data you use the command .dtignore as you can see below in my screenshot. Basically it’s all the visual elements that you use in your documents that are not code. Can be things like all of your components (in symbol form or non-symbol form). It can be things like explanatory headlines that you use to visually guide the consumers of your design token files.

It will all make sense once you study our demos and what comes out in code, trust me on this one.

Put all your non-code-thingies here. Don’t underestimate the power of dtignore

User friendly GUI instead of a Terminal window

Don’t misunderstand me, I’ve grown to really appreciate the Terminal thanks to Sketch2React, but it’s not for everyone. Many designers feel alienated as soon as they are forced to open up and use a CLI (Command Line Interface).

We feel you. That’s why we have developed a gorgeous GUI for design tokens instead. So that all designers can work with design tokens instead of running out screaming in agony every time they see a CLI.

Lets sum it up nicely then

Use Sketch, Figma or InVision Studio to setup and control your design tokens & theming structure
A single place to create and edit your styles
Reads the raw design file (Sketch, Figma or InVision Studio) and generates a JSON-structure based on your design data (design tokens)
You can use any setup you want, you have 100% control over your design token & theming structure
Use Stratos Tokens app (Mac only) to output your code
Supports Sketch, Figma & InVision Studio files natively, no plugins are needed
Use Sketch Cloud & Sketch Shared Libraries to remotely manage and distribute your design token files

We now support Sketch Cloud & Sketch Shared Libraries — perfect way of remotely manage your design tokens

Export to NPM
Export to iOS, Android, CSS via our built-in Style Dictionary support

Prefer using Theo?

Theo is just like Style Dictionary, an abstraction for translating design tokens into several different formats. Since you can setup any structure inside your design application you can instead use Theo for the converting bits. How? Join our Slack, we have a very sound discussion there around the subject of design tokens, a topic that is on the rise.

How to get it

Stratos Tokens is right now available as a pre-release, you purchase it here.

That’s all folks, hope you enjoyed this introduction to design tokens.