{"id":547,"date":"2020-10-03T14:57:44","date_gmt":"2020-10-03T12:57:44","guid":{"rendered":"https:\/\/sketch2react.io\/blog\/?p=547"},"modified":"2020-10-16T13:43:06","modified_gmt":"2020-10-16T11:43:06","slug":"design-tokens-are-designer-shortcuts","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/design-tokens-are-designer-shortcuts\/","title":{"rendered":"Design tokens are designer shortcuts"},"content":{"rendered":"\r\n
\r\n
\r\n
\r\n
\r\n

So welcome to my latest obsession, design tokens! When I become obsessed about something it\u2019s usually because I don\u2019t understand it fully. So when I\u2019m not busy doing things I really need to do (fill in the blank here with imagination) I think quite a lot about above subject. Why? Here\u2019s a couple of reasons.<\/p>\r\n

The name is really confusing<\/h2>\r\n

What the heck is a token? I\u2019ve never seen one in reality. Is it some kind of coin? Does it has to do something with casinos? Can you pay for a subway ride with them? I vaguely remember somebody talking about tokens in a movie I saw one million years ago.<\/p>\r\n

See? So confusing.<\/p>\r\n

Design system<\/strong> I can understand. It contains two things I can totally relate to. Design is what I do every single day, system is something I wish I had. See? Want proof?<\/p>\r\n

\"\"<\/a>
99% of all things I have ever designed for us are in this chaotic doc?<\/figcaption><\/figure>\r\n

Just googling it doesn\u2019t make it any easier. I love Brad Frost but hey man:<\/p>\r\n

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

Whaaaaaaaaaaaaaat? <\/em><\/p>\r\n

On an intellectual level I can understand this. But on the dirty construction floor, sitting on my kids IKEA chairs doing WFH stuff for what now feels like an Eternity, I totally don\u2019t get it.<\/p>\r\n

To make I need to understand. Let\u2019s try doing that.<\/p>\r\n

Renaming time!<\/h2>\r\n

Let\u2019s rename them! For this very article we are now going to refer to them as designer shortcuts<\/strong>. Because that\u2019s exactly what they are. Who doesn\u2019t love and understand a shortcut? Cmd+X that thought out of existence if you don\u2019t agree with me ?<\/p>\r\n

If you prefer you could also call them design to code shortcuts<\/em> but that is way to long so let\u2019s just stick to things we can remember. My mind is old and it\u2019s not getting any younger ? Also whenever the word code<\/em> comes up half the room of designers runs out the front door, the other half are just to polite to do so.<\/p>\r\n

The how is quite confusing<\/h2>\r\n

So okey then, we now kind of understand the what, but hey come on let\u2019s not stop just yet, we still don\u2019t understand the important how the hell do I work with them then?<\/em><\/p>\r\n

Here\u2019s when things tend to fall apart for most people. I\u2019ve done a few presentations about design tokens and our Stratos Tokens app. Everyone is amazed about the power designers can have when it comes to input (Sketch, Figma) and output (code yo) but when it comes to the actual doing, questions like these pop up:<\/p>\r\n