How to work with design tokens straight from Sketch 💎

…and Figma + InVision Studio🤖💪

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.

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

Listing taken from Duet Design System

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 for free.

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:

Introducing Material-UI for Sketch

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 👍

Aaaaaah look at the beautiful UI ❤️

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

Use Adobe XD?

We’ve built a successful POC for Adobe XD for Mac but we’re not ready to release into the wild just yet. Since the XD file format is not “open” in the same way that say Sketch is, we built an actual XD-plugin. More on that topic later. It will be included in future versions of Stratos Tokens.

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

You join our payed Stratos Beta Program (just a mere 2.99USD) and you also get Stratos Components. Joooy!

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

Related video tutorials

Here’s a awesome playlist with all of our Stratos Tokens tutorials in one place.

Related reads

The Nine Rules of Stratos Design Tokens

Styling React Components Using Stratos Design Tokens

Alter Your Stratos Tokens project’s Configuration to Supercharge Your Design Tokens

Tutorial: How to get started with Figma projects and design tokens

Juan Maguid, Team Sketch2React