How to combine Design Tokens, defined in your design tool, with Material-UI using Stratos Tokens App

Published in

Sketch2React

4 min readFeb 10, 2020

TLDR; Design tokens and styling in Material-UI is surprisingly closely related and in this article I’ll explain why and show you how you can benefit from this to super-charge your design-to-code implementation speed!

This is a sequel to my previous article From Design tool to Design Tokens using Stratos App which I strongly suggest you read.

Ok, you didn’t read it? I’ll give you a:

Recap of previous article

Example structure in your design document

You visually represent your design tokens in a design tool (Sketch App, Figma and InVision Studio are supported)

Generated JSON-structure in Stratos Tokens App

Stratos Tokens App reads the raw design file and generates a JSON-structure based on your design data (design tokens)

Download and publish the design tokens as an NPM project. If you want more detailed instructions on how to publish to NPMjs please read my previous article.

Download it and use it in any codebase on any platform!

But Material-UI?

How does Material-UI fit into all of this? Let’s first look at a small demo application. We can call it mysuperapp.

mysuperapp is using https://github.com/syedabuthahirm/react-materialui-boilerplate

Ok, so what do we know?

Design data (design tokens) generated by Stratos Tokens App

We have design data (design tokens) available in JSON format from our design tool via Stratos Tokens App

Styling (theming) in Material-UI is based on passing design data in JSON format to the createMuiTheme-function

All we need to do is structure our design document according to the structure Material-UI expects

Making the magical changes

Let’s head back into our design app and rearrange the layer hierarchy and change the naming of things in our design document to match the structure and naming of Material-UI’s theming (I’ve removed typography since that is not relevant for this demo).

We’re only changing the naming and layer hierarchy. Nothing changes visually in your design document!

Updated design data (design tokens) structure

Now, after we’ve done the required changes to our design document let’s take a look at the generated design data (design tokens).

Connecting all the dots

Your design tokens are now available from within Stratos Tokens App in three places:

Direct copy/paste
As a stand-alone file in the project’s data folder.
Downloadable as NPM-project

Let’s publish our design tokens to NPMjs!

For complete instructions on how to publish your design tokens to NPMjs please read my previous article. To download the demo-package in this article:

npm install --save stratos-materialui-demo

How do I used it?

Install the NPM-package into you application’s root folder by using the Terminal App. Your design tokens are now available to use in your application’s codebase.

Make your themeConfig use the NPM-package

After we’ve made our application, mysuperapp, use our new design tokens as input for Material-UI’s theming, we get the following result! All according to our design document!