Tutorial — How to work with Google Material UI, design tokens & Sketch app

 

Wow that was many awesome things cramped up into one single headline. Also it creates pretty great SEO for this very article hehehe ??

What the heck are design tokens?

In the words of the great Brad Frost:

“In the world of UI, design tokens are subatomic particles.”

So there you have it. Small tiny particles that in context of a design system are everywhere. You tokenize things like colors, spacing, grids, fonts, the basic core elements of any design system.

You can go even further than the basics and create per component design tokens, something that is greatly explained in this awesome article.

How to do this from Sketch app

The more I learn about design tokens, and how they can help me in my job as a designer, the more excited I get.

So I figured why keep this joy to myself? Here’s a brand new video tutorial where I teach you all these amazing things:

  1. How to create design tokens in Sketch
  2. How to name them correctly accordingly to what I want the output to be
  3. How to export these from Stratos app out to code
  4. How to test them in code

Important notice before you watch

I use Material UI in the tutorial. You can use whatever framework, popular library, design system that you prefer or that you already are using. The best thing about our implementation of design tokens in Sketch is that you create the structure 100% yourselfs, no limits what so ever.

What do I need to do before creating my structure?

You need to talk to your developers and come up with a naming structure, what to call everything. That is what takes most time when you never have worked with design tokens before. Once that’s done you’ll do what I do in the tutorial ✅


How to test your MUI design tokens

I use this brilliant site for trying out my design tokens in my tutorial:

https://cimdalli.github.io/mui-theme-generator/

Sketch Tutorial File

https://cimdalli.github.io/mui-theme-generator/

How to implement in code

Fredrik Ward has written two great articles about how you take the next steps, namely uploading your tokens to NPM, installing a demo project etc.

Part 1

https://cimdalli.github.io/mui-theme-generator/

Part 2

https://cimdalli.github.io/mui-theme-generator/


All the best
Juan Maguid, Team Sketch2React

Leave a Reply