{"id":1183,"date":"2021-04-07T13:22:14","date_gmt":"2021-04-07T11:22:14","guid":{"rendered":"https:\/\/sketch2react.io\/blog\/?p=1183"},"modified":"2021-04-26T16:31:40","modified_gmt":"2021-04-26T14:31:40","slug":"working-with-design-tokens-just-got-easier","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/working-with-design-tokens-just-got-easier\/","title":{"rendered":"Working with design tokens just got easier"},"content":{"rendered":"\r\n
\r\n
\r\n
\r\n
\r\n

Remember when version tracking was perplexing to us designers? Then came Abstract, Plant, and other great apps & services that solved that issue in a way that mere normal humans without engineering degrees would actually understand how it worked. Hang on to this reasoning.<\/p>\r\n

Understanding how design tokens work<\/strong>, how you can create them and how they will transform and impact your teams workflow<\/strong> is the next big thing<\/em> as we in Team Sketch2React<\/a> see it.<\/p>\r\n

Today we\u2019re very proud to launch the brand new, totally reworked Stratos Tokens 2021<\/a> to the world. After more than one year in development we have taken all the findings from our pre-release versions, rebuilt it from scratch and we are very proud to finally offer it to the design and developer community.<\/p>\r\n

Available now<\/a> for both Mac and Windows.<\/p>\r\n

I will assume you know nothing about Stratos Tokens so here we go.<\/p>\r\n

What is Stratos Tokens for Sketch?<\/h2>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n
\r\n
\r\n
\r\n
\r\n
\"\"<\/a>
Hey ho let\u2019s go<\/figcaption><\/figure>\r\n
\r\n

It\u2019s an easy-to-use companion app (Mac & Windows) for Sketch (and soon also Figma) that autogenerates design token data<\/strong> in realtime directly from your design app.<\/p>\r\n<\/blockquote>\r\n

Longer explanation<\/h3>\r\n

What we are doing is moving the whole creation of design tokens from an overly complex and technical environment to the designer’s environment \u2014 the design application. This way you can use a more visual way of trying to reach the elusive one single source of truth,<\/em> at least when it comes to creating & managing design tokens for things such as styling.<\/p>\r\n

\"We<\/p>\r\n

Basically, you use built-in tools in Sketch like rectangles, lines, and text nodes to output real design token data<\/strong>. That your developers can consume in many ways.<\/p>\r\n

How you set this up is totally up to you, go freestyle or use our built-in Style Dictionary\u2019s<\/a> structure & naming conventions support.<\/p>\r\n

What is Style Dictionary?<\/h2>\r\n

Style Dictionary<\/strong> is a build system that allows you to define styles once, in a way for any platform or language to consume. A single place to create and edit your styles, and a single command exports these rules to all the places you need them\u200a\u2014\u200aiOS, Android, CSS, JS, HTML, sketch files, style documentation, or anything you can think of.<\/p>\r\n

So of course we thought, this is awesome\u200a\u2014\u200alet\u2019s build in support for it! Important note: <\/strong>For Style Dictionary<\/a> to do its magic you will need to follow their naming and structure conventions.<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n

\r\n
\r\n

\"The<\/p>\r\n

The many ways you can create design tokens with Stratos Tokens \u2014 a great way of building your design system<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n
\r\n
\r\n
\r\n
\r\n

What is new in Stratos Tokens 2021?<\/h2>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n
\r\n
\r\n

\"\"<\/p>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n

\r\n
\r\n
\r\n
\r\n

We\u2019ve added so many things but here\u2019s the geist of this epic release:<\/p>\r\n