{"id":36,"date":"2020-05-12T21:02:44","date_gmt":"2020-05-12T19:02:44","guid":{"rendered":"https:\/\/sketch2react.wordpress.com\/2020\/05\/12\/how-to-work-with-design-tokens-straight-from-your-design-app\/"},"modified":"2021-07-16T10:49:18","modified_gmt":"2021-07-16T08:49:18","slug":"how-to-work-with-design-tokens-straight-from-your-design-app","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/how-to-work-with-design-tokens-straight-from-your-design-app\/","title":{"rendered":"How to work with design tokens straight from your design app"},"content":{"rendered":"
\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n

\"\"<\/a><\/p>

Sketch, Figma or InVision Studio? You choose, we support all three <\/figcaption><\/figure>\n
\n
\n
\n
\n

Too Long Didn\u2019t Read<\/h4>\n

This article is about a couple of things. Design tokens and what they are. It\u2019s also about Stratos Tokens, an easy to use design token Mac app from the folks behind Sketch2React that support Sketch, Figma & InVision Studio files.<\/p>\n

Since you\u2019re reading this here you probably use Sketch. We still have \u2764\ufe0ffor Sketch. Proof? We now support using Sketch Cloud and Sketch Shared Libraries for a remote way of controlling & distributing your design token data.<\/p>\n

Still here? Well read on dear reader <\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

\n
\n
\n
\n
\n
\n
\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n

From day one as Team Sketch2React<\/a>, me and Fredrik<\/a> have been working towards the very same goal\u200a\u2014\u200ato be able to let designers do more directly from where designers spend most of their time\u200a\u2014\u200ain the design tool.<\/p>\n

Everything we develop as a team has that thinking inside its DNA. We felt the time was right to apply our philosophy of better work<\/em> to the topic of design tokens. That\u2019s why we created Stratos Tokens for Mac<\/a>.<\/p>\n

Oddly not many designers even know what design tokens are, more less work with them. Why? We may know why. Let us explain.<\/p>\n

What are design tokens anyway?<\/h3>\n

This is one of the best quotes I have found for describing design tokens?<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

\n

<\/p>

That\u2019s a really great quote, it really nails it. Great job Kyle!<\/figcaption><\/figure>\n
\n
\n
\n
\n

I found it in Kyle Gach\u2019s epic article<\/a> about design tokens here on Medium from back in 2018. Awesome read, highly recommended!<\/p>\n

Fun thing is, all that setting up that he does in code in his article\u200a\u2014\u200ayou will do all of that straight from Sketch (or Figma\/InVision Studio).<\/p><\/blockquote>\n

Using a good old Sketch2React technique. \u2705<\/p>\n

But more on that later.<\/em><\/p>\n

Design tokens are design decisions<\/h3>\n

So now we have learned that design tokens are design decisions<\/em>. Who should own these decisions? Designers of course. That\u2019s why we built Stratos Tokens<\/em> in the first place.<\/p>\n

You should be able to handle and distribute all of your design decisions in the same apps that those decisions are made in. Really elementary actually.<\/p>\n

We already use our design applications for things like ideation, crafting user experiences, building prototypes, UI\u2019s, co-working with other designers & deciding this and that. So why then separate design from code? Exactly, makes no sense.<\/p>\n

With Stratos Tokens you get that much sought after but seldom reached \u201done single source of truth\u201d for all your styles, straight from your preferred design tool.<\/p>\n

Basic design tokens<\/h3>\n

Here\u2019s a list of what I call basic design tokens<\/strong> taken from how Duet Design System<\/a> lists them:<\/p>\n