One of the most frustrating experiences for designers and developers is keeping code in sync with current designs. InVision Design System Manager (DSM) tries to solve this problem by putting the power of design tokens in the hands of designers and developers.

Design tokens act as variables that store your styles so that your color, text, and other style attributes will always be up-to-date. To put DSM’s design tokens to the test, we (Martin, developer) and (Ryan, designer) designed and built two prototype web apps of our favorite to-do list framework, One Big Thing.

“One Big Thing” aka “1-3-5”

In case you’re wondering why this to-do list looks funny, it’s because we modeled it after a framework called One Big Thing, aka “1-3-5.” If that name sounds familiar it’s probably because you follow Jake Knapp, the author of “Sprint” or “Make Time,” who invented the concept.

In this to-do framework, a piece of paper is divided into three sections. The first section should contain your largest and most important to-do item, or your “big thing.” The second section is further divided into three boxes which contain your three medium things. Finally, the last section is for your small things (five are recommended, but I often do more).

The prototype

Here’s a working version of our simple prototype that you can follow along with. We ended up building two prototypes: the one we’re discussing here, and another more advanced prototype that includes the use of an enterprise-level component library (Alibaba’s ANT design component library for Vue, for those interested). Both designs are similar and look something like this:

Let’s get that bread!

Look at our app, now back at me, now back at our app

Want to see something cool? This to-do list application uses 7 design tokens to define all of the colors in the application. Once a color is changed for any of those tokens in DSM, the moment I refresh the page, the change will be reflected LIVE. IN. THE. BROWSER.

That means no handoff. No hunting down individual hex codes. No begging developers to change the shade of blue on a button. A designer can make a change, push that change to DSM, and it will be reflected live in the browser. Check it out below 👇

What is a design token?

Design tokens are the visual design atoms of the design system—specifically, design tokens are named entities that store visual design attributes. They are used in place of hard-coded values, such as hex values for color or pixel values for spacing, to maintain a scalable and consistent visual system for development.

Check them out yourself in InVision’s Design System Manager.

Imagine a world where you can change a color in a Sketch file, and then all a developer needs to do is sync the changes made to that file. This is especially great for designers who don’t code or don’t use a Git/GitHub workflow making it easier to sync up on changes.

This is what the design tokens for color looks like for this project in DSM. Check them out here

Design tokens are versatile and can be used for any number of things including:

Color Palettes (DSM supported)

Font Families (DSM supported)

Icons (DSM supported)

Borders

Breakpoints

Z-index

Sizes

Spacing

Here are some examples of where we’re using them:

The design token ‘—color-primary’ in use as purple in the header.

The tools you’ll need

Here’s what you’ll need to get started building an app as we did:

DSM need-to-knows

To use DSM, just download Craft and send your developer this API link. You can read everything else there is to know about DSM on the website.

Here are some important things to know before you start using DSM:

The sample library 📚

If you have an InVision account then you have access to DSM. It comes with a sample library that you can browse through on the web and in Craft. Additionally, you can download the source Sketch file and see how they set things up. This is your best friend when it comes to learning the ins and outs of DSM.

DSM’s design tokens 🌈

Right now DSM only supports colors, text styles, and icons.

DSM API 👾

This resource is the only documentation out there for DSM’s API. It’s important to know that you can use your design tokens without it, but this just adds a little automation to the process if you want to be fancy.

A step-by-step guide to setting up your design tokens in DSM