{"id":260,"date":"2020-04-22T23:41:28","date_gmt":"2020-04-22T21:41:28","guid":{"rendered":"https:\/\/sketch2react.wordpress.com\/2020\/04\/22\/the-nine-rules-of-stratos-design-tokens\/"},"modified":"2021-05-17T11:05:08","modified_gmt":"2021-05-17T09:05:08","slug":"the-nine-rules-of-stratos-design-tokens","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/the-nine-rules-of-stratos-design-tokens\/","title":{"rendered":"The Nine Rules of Stratos Design Tokens"},"content":{"rendered":"
<\/div>\n
\n
\n
\n
\n

Finally Team Sketch2React<\/em> has created a design document containing examples of all the rules available in Stratos Tokens App<\/em>!<\/p>\n

We\u2019ve created the demo document<\/a> in Sketch App<\/em>, Figma<\/em> and InVision Studio<\/em> as well.<\/p>\n

Before we start<\/h3>\n

In order for our apps (Sketch2React<\/em>, Stratos Components<\/em> and Stratos Tokens<\/em>) to avoid the Infinite Spinner of Doom (you\u2019ll know it when you see it) your design document needs to have a page<\/strong> named Start here<\/em><\/strong> which contains an artboard\/frame<\/strong> named Start<\/em><\/strong>.<\/p>\n

When you open a project in Stratos Tokens App<\/em> (or any other of our apps), the app\u2019s render engine searches your design document to find an artboard\/frame named Start <\/em>on a page named Start here<\/em>. Always.<\/p>\n

This artboard\/frame is then translated into Stratos Design Tokens and presented to the user.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

\n

\"Image
\u201cStart here\u201d and \u201cStart\u201d<\/figcaption><\/figure>
<\/figcaption><\/figure>\n
\n
\n
\n
\n

Very very important!<\/h4>\n

You need to visit an artboard\/frame within the Stratos Tokens App<\/em> in order for it to be added to the project folder. Just click on the name of the artboard\/frame in the Explorer view<\/em> under the Canvas<\/em> section.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

\n

\"Image
Click on an artboard\/frame name to add it to the project folder<\/figcaption><\/figure>
<\/figcaption><\/figure>\n
\n
\n
\n
\n

Stratos Tokens App<\/em> has a functionality called hot-reload for Sketch<\/em>– and InVision Studio<\/em> files (Stratos Tokens App<\/em> automagically refreshes it\u2019s UI when you make changes to your design document from your design tool!?).<\/p>\n

Figma<\/em> documents does currently not<\/strong> support hot-reload since it\u2019s data is loaded via an api (while Sketch<\/em>– and InVision Studio<\/em> files are read from your computer. Sketch Cloud documents<\/em> also have a \u201clocal representation\u201d on your computer). You need to manually press the refresh-button to load the latest changes made to your design document.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

\n

\"Image
It\u2019s the button at the top right corner of the UI<\/figcaption><\/figure>
<\/figcaption><\/figure>\n
\n
\n
\n
\n

Hooweveeer..<\/strong><\/p>\n

Even if the UI is refreshed and Stratos Tokens App<\/em> has your latest design changes, you still need to revisit<\/strong> the artboard\/frame in order for it to update<\/strong> the files in your project folder!<\/p><\/blockquote>\n

This is done automatically for the artboard named Start<\/em>, because that is always loaded by default.<\/p>\n

Also very very important!<\/h4>\n

For each<\/strong> artboard\/frame you visit within Stratos Tokens App<\/em> you also get two<\/em> additional files, e.g Start<\/em> artboard\/frame creates:<\/p>\n