This is the third article in a series on how to implement design tokens for javascript/react developers. In this article, we will talk about some problems with maintaining our consumption friendly-format, and what we could do to make those tokens easy to maintain.

The Problems

In Part 1, we discussed and came up with some criterias for a good consumption friendly token system. In Part 2, we turned those requirements in an exact Consumption-friendly-format. In this post, we identify a few problems with the Consumption-friendly-format when it comes to maintenance.

Maintenance problem 1 — Typos

Because we are attaching the CSS property as plain string in our…


This is a three-part series where I present what I believe is a great way to consume and maintain design tokens. Examples are written in React and styled-components but the ideas in this article could be adapted to any frameworks.

Introduction

In Part 1 of this series, we came up with a set of desired interfaces for consuming design tokens. In this article, we implement the tokens to fit those interfaces. In Part 3, we will look at how to make the tokens more maintainable.

The Process

There will not be a lot of reading/reasoning in this article. I will follow through each…


This is a three part series where I discuss what I believe is the best way to consume and maintain design tokens. React and styled-component are used to illustrate my points but the ideas from this article can be easily adapted to any frameworks.

What Are Design Tokens?

Design Tokens are essentially the tiniest pieces of reusable UI information that makes up your application. Think colors, fonts, and breakpoints.

Your design tokens could be a simple, flat object:

const tokens = {
orange: "#ff9b00",
purple: "#5f259f",
blue: "#0096e6",
red: "#ff0000",
white: "#ffffff",
lightGray: "#b2b2b2",
gray: "#999999",
darkGray: "#333333",
};

And you would use it…

David Xu

Code monkey specializing in React.js

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store