{"id":50,"date":"2020-02-15T10:09:40","date_gmt":"2020-02-15T09:09:40","guid":{"rendered":"https:\/\/sketch2react.wordpress.com\/2020\/02\/15\/tutorial%e2%80%8a-%e2%80%8ahow-to-work-with-google-material-ui-design-tokens-sketch-app\/"},"modified":"2021-05-17T11:06:11","modified_gmt":"2021-05-17T09:06:11","slug":"tutorial%e2%80%8a-%e2%80%8ahow-to-work-with-google-material-ui-design-tokens-sketch-app","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/tutorial%e2%80%8a-%e2%80%8ahow-to-work-with-google-material-ui-design-tokens-sketch-app\/","title":{"rendered":"Tutorial\u200a\u2014\u200aHow to work with Google Material UI, design tokens & Sketch app"},"content":{"rendered":"
\n

 <\/p>\n<\/figure>\n

\n
\n
\n
\n

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

What the heck are design tokens?<\/h2>\n

In the words of the great Brad Frost<\/a>:<\/p>\n

\n

\u201cIn the world of UI, design tokens are subatomic particles.\u201d<\/p>\n<\/blockquote>\n

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.<\/p>\n

You can go even further than the basics and create per component design tokens, something that is greatly explained in this awesome article<\/a>.<\/p>\n

How to do this from Sketch app<\/h2>\n

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

So I figured why keep this joy to myself? Here\u2019s a brand new video tutorial where I teach you all these amazing things:<\/p>\n

    \n
  1. How to create design tokens in Sketch<\/li>\n
  2. How to name them correctly accordingly to what I want the output to be<\/li>\n
  3. How to export these from Stratos app<\/a> out to code<\/li>\n
  4. How to test them in code<\/li>\n<\/ol>\n

    Important notice before you watch<\/h2>\n

    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.<\/strong> The best thing about our implementation of design tokens in Sketch<\/strong> is that you create the structure 100% yourselfs, no limits what so ever.<\/p>\n

    What do I need to do before creating my structure?<\/h2>\n

    You need to talk to your developers and come up with a naming structure<\/em>, what to call everything. That is what takes most time when you never have worked with design tokens before. Once that\u2019s done you\u2019ll do what I do in the tutorial \u2705<\/p>\n