{"id":240,"date":"2020-02-03T11:29:24","date_gmt":"2020-02-03T10:29:24","guid":{"rendered":"https:\/\/sketch2react.wordpress.com\/2020\/02\/03\/from-design-tool-to-design-tokens-using-stratos-app\/"},"modified":"2021-05-17T11:07:18","modified_gmt":"2021-05-17T09:07:18","slug":"from-design-tool-to-design-tokens-using-stratos-app","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/from-design-tool-to-design-tokens-using-stratos-app\/","title":{"rendered":"From Design tool to Design Tokens using Stratos App"},"content":{"rendered":"

TLDR; <\/strong>Stratos <\/em>Tokens App<\/em> reads the raw design file (no plugins) and generates a design token file (JSON-format). This file can then be either stored directly in your codebase or uploaded to repositories like NPMjs<\/em> to be consumed by any codebase on any platform. And it\u2019s 1:1 with your design file!<\/p>\n

So, do I need to sell my soul or sacrifice a unicorn in order to achieve this?<\/p><\/blockquote>\n

No! Rest assured. Team Sketch2React<\/em> is not in the soul-trading business and we would never harm anyone, least of all a unicorn. What does a unicorn eat anyway? Magic?<\/p>\n

Back to design tokens\u2026<\/h4>\n

You visually represent your Design Tokens in a design tool. (Sketch App, Figma <\/em>and InVision Studio are <\/em>supported).<\/p>\n

Example structure in your Sketch App document<\/figcaption><\/figure>\n

Stratos Tokens App<\/em> reads your design file (without plugins, yupp, just like that) and generates a file with a JSON structure containing your design data. Then you either save the design data file (Design Tokens) or upload it to a repository like NPMjs<\/em>.<\/p>\n

Generated JSON-structure in Stratos Tokens App<\/figcaption><\/figure>\n

The structure of the output JSON is a direct reflection of the structure in your design document.<\/p><\/blockquote>\n

Please note that above is just an example<\/strong> of how to structure your Design Tokens. It\u2019s up to you to create your own structure.<\/p>\n

What! Rules? Oh man\u2026.<\/h4>\n

There are nine<\/strong> design rules<\/strong> that you need to follow<\/strong> in order to create this kind of magic(\/unicorn food?). You find listed here:<\/p>\n

https:\/\/link.medium.com\/2C8ggbeFU5<\/a><\/p>\n

What do I do next?<\/h3>\n

You open Stratos Tokens<\/em> App<\/em> and create a new project<\/strong>. To this project you link your design token design file. In this example I will name my project stratos-designtokens-demo<\/em>.<\/p>\n

<\/figure>\n

You click on the file explorer<\/em> and select the artboard named Template<\/em>.<\/p>\n

<\/figure>\n

This design data structure is now available from three places<\/strong>:<\/p>\n