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
You visually represent your design tokens in a design tool (Sketch App, Figma and InVision Studio are supported)
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.
Ok, so what do we know?
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!
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.
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!
Extra bonus shortened version
An even shorter code version is possible since we structured our design data (design tokens) exactly as the structure Material-UI expects!
To fully try out this design token magic you’ll need:
- Stratos Tokens App
- Sketch App latest
- MacOS Mojave/Catalina latest
- Admin rights to your computer
Thanks for reading!
Fredrik — Team Sketch2React