{"id":241,"date":"2020-02-10T23:03:46","date_gmt":"2020-02-10T22:03:46","guid":{"rendered":"https:\/\/sketch2react.wordpress.com\/2020\/02\/10\/how-to-combine-design-tokens-defined-in-your-design-tool-with-material-ui-using-stratos-tokens\/"},"modified":"2021-05-17T11:06:21","modified_gmt":"2021-05-17T09:06:21","slug":"how-to-combine-design-tokens-defined-in-your-design-tool-with-material-ui-using-stratos-tokens","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/how-to-combine-design-tokens-defined-in-your-design-tool-with-material-ui-using-stratos-tokens\/","title":{"rendered":"How to combine Design Tokens, defined in your design tool, with Material-UI using Stratos Tokens\u2026"},"content":{"rendered":"

TLDR;<\/strong> Design tokens and styling in Material-UI is surprisingly closely related and in this article I\u2019ll explain why and show you how you can benefit from this to super-charge your design-to-code implementation speed!<\/p>\n

This is a sequel to my previous article From Design tool to Design Tokens using Stratos App<\/a> which I strongly suggest you read.<\/p>\n

Ok, you didn\u2019t<\/strong> read it? I\u2019ll give you a:<\/p>\n

Recap of previous article<\/h3>\n
Example structure in your design document<\/figcaption><\/figure>\n

You visually represent your design tokens in a design tool (Sketch App, Figma and InVision Studio are supported)<\/p>\n

Generated JSON-structure in Stratos Tokens App<\/figcaption><\/figure>\n

Stratos Tokens App<\/em><\/a> reads the raw design file and generates a JSON-structure based on your design data (design tokens)<\/p>\n

It\u2019s a big button, you can\u2019t miss it.<\/figcaption><\/figure>\n

Download and publish the design tokens as an NPM project<\/strong>. If you want more detailed instructions on how to publish to NPMjs<\/em> please read my previous article<\/a>.<\/p>\n

<\/figure>\n

Download it and use it<\/strong> in any codebase<\/strong> on any platform<\/strong>!<\/p>\n

But Material-UI?<\/h3>\n

How does Material-UI fit into all of this? Let\u2019s first look at a small demo application. We can call it mysuperapp<\/em>.<\/p>\n

mysuperapp is using https:\/\/github.com\/syedabuthahirm\/react-materialui-boilerplate<\/a><\/figcaption><\/figure>\n

Ok, so what do we know?<\/h4>\n
Design data (design tokens) generated by Stratos Tokens App<\/figcaption><\/figure>\n

We have design data (design tokens) available in JSON format from our design tool via Stratos Tokens App<\/em><\/a><\/p>\n

Small theming example with MaterialUI<\/figcaption><\/figure>\n

Styling (theming<\/em>) in Material-UI is based on passing design data in JSON format to the createMuiTheme<\/em>-function<\/p>\n

All we need to do is structure our design document according to the structure Material-UI expects<\/p><\/blockquote>\n

Making the magical changes<\/h4>\n
<\/figure>\n
<\/figure>\n

Let\u2019s 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\u2019s theming<\/strong> (I\u2019ve removed typography<\/em> since that is not relevant for this demo).<\/p>\n

We\u2019re only changing the naming and layer hierarchy. Nothing changes visually in your design document!<\/p><\/blockquote>\n

Updated design data (design tokens) structure<\/figcaption><\/figure>\n

Now, after we\u2019ve done the required changes to our design document let\u2019s take a look at the generated design data (design tokens).<\/p>\n

Connecting all the dots<\/h3>\n

Your design tokens are now available from within Stratos Tokens App<\/em><\/a> in three places<\/strong>:<\/p>\n