{"id":1253,"date":"2021-04-09T13:40:36","date_gmt":"2021-04-09T11:40:36","guid":{"rendered":"https:\/\/sketch2react.io\/blog\/?p=1253"},"modified":"2021-05-17T10:57:14","modified_gmt":"2021-05-17T08:57:14","slug":"how-to-get-started-with-style-dictionary-stratos-tokens","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/how-to-get-started-with-style-dictionary-stratos-tokens\/","title":{"rendered":"How to get started with Style Dictionary &#038; Stratos Tokens"},"content":{"rendered":"\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<h3 class=\"wp-block-heading\">Summary<\/h3>\r\n<p class=\"\">In this tutorial you will learn:<\/p>\r\n<ul class=\"\" style=\"padding: 0px 0px 16px 40px;\">\r\n<li>What <a href=\"https:\/\/amzn.github.io\/style-dictionary\/#\/\" target=\"_blank\" rel=\"noopener\">Style Dictionary<\/a> is<\/li>\r\n<li>How to structure things in Sketch or Figma for it to work its magic of translation via Stratos Tokens and out to iOS, Android and SCSS<\/li>\r\n<li>How to install Style Dictionary into your <a href=\"https:\/\/sketch2react.io\/blog\/working-with-design-tokens-just-got-easier\/\" target=\"_blank\" rel=\"noopener\">Stratos Tokens<\/a> project folder<\/li>\r\n<li>How to run and update your design tokens<\/li>\r\n<\/ul>\r\n<p class=\"\"><strong>Side note:<\/strong> This tutorial is for Sketch but all these steps will be the same for Figma, minus how you create your Stratos Tokens project in our app. For Sketch, we have drag and drop support but for Figma there\u2019s a different workflow. <em>More on this topic when we release our Figma support. <\/em><\/p>\r\n<h3 class=\"\">Tutorial requirements<\/h3>\r\n<ul class=\"\">\r\n<li>Stratos Tokens 2021 Mac or PC (<a title=\"Demo version\" href=\"https:\/\/marketplace.sketch2react.io\/product\/stratos-tokens-demo\/\" target=\"_blank\" rel=\"noopener\">download our free demo<\/a>)<\/li>\r\n<li>Sketch file, you can use <a href=\"https:\/\/www.dropbox.com\/s\/ter66bjupftrtdk\/Get%20started%20with%20Style%20Dictionary.sketch?dl=0\" target=\"_blank\" rel=\"noopener\">this one<\/a><\/li>\r\n<li>Node.js<\/li>\r\n<li>Sketch app (only if you want to add\/change the design tokens)<\/li>\r\n<\/ul>\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<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row bg-editor-hr-wrap\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<div class=\"row bg-editor-hr-wrap\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\"><hr class=\"wp-block-separator\"><\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<p class=\"\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/style-dict-website.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1265\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/style-dict-website.png\" alt=\"\" width=\"3727\" height=\"2275\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/style-dict-website.png 3727w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/style-dict-website-300x183.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/style-dict-website-1024x625.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/style-dict-website-768x469.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/style-dict-website-1536x938.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/style-dict-website-2048x1250.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/style-dict-website-250x153.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/style-dict-website-550x336.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/style-dict-website-800x488.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/style-dict-website-295x180.png 295w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/style-dict-website-491x300.png 491w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/style-dict-website-819x500.png 819w\" sizes=\"auto, (max-width: 3727px) 100vw, 3727px\" \/><\/a><\/p>\r\n<p class=\"\">The main reason we built in extensive support for Style Dictionary is because it\u2019s <em>bloody brilliant<\/em>. First a quick reminder what it actually does:<\/p>\r\n<p class=\"\">\u201cStyle Dictionary 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 \u2014 iOS, Android, CSS, JS, HTML, sketch files, style documentation, or anything you can think of.\u201d<\/p>\r\n<p>The perfect match for design tokens and design systems, right?<\/p>\r\n<p class=\"\">So, we reverse engineered it asking ourselves: How can we support it with the tools we have inside Sketch &amp; Figma?<\/p>\r\n<p class=\"\">Let\u2019s break down <strong>one way of creating design tokens<\/strong> using our tool and apply this for Style Dictionary.<\/p>\r\n<h2 class=\"\">Category! Type! Item!<\/h2>\r\n<p>First let\u2019s talk about something called CTI. It stands for <strong>Category Type Item<\/strong>, and it\u2019s at the very core of Style Dictionary:<\/p>\r\n<p class=\"\">\u201cStyle properties are organized into a <strong>hierarchical tree structure<\/strong> with &#8216;category&#8217; defining the primitive nature of the property. For example, we have the <strong>color category<\/strong> and every property underneath is always a color. As you proceed down the tree, you get more specific about what that color is. Is it a background color, a text color, or a border color? What kind of text color is it? You get the point. It&#8217;s like the animal kingdom classification\u201d.<\/p>\r\n<p class=\"\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/Image.jpeg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1221\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/Image.jpeg\" alt=\"\" width=\"1280\" height=\"850\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/Image.jpeg 1280w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/Image-300x199.jpeg 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/Image-1024x680.jpeg 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/Image-768x510.jpeg 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/Image-250x166.jpeg 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/Image-550x365.jpeg 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/Image-800x531.jpeg 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/Image-271x180.jpeg 271w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/Image-452x300.jpeg 452w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/Image-753x500.jpeg 753w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/a><\/p>\r\n<p class=\"\">Although following this structure is not required you get several benefits:<\/p>\r\n<ul class=\"\" style=\"padding: 0px 0px 16px 40px;\">\r\n<li>It actually makes sense to both designers and developers, it\u2019s paramount we share the same semantics<\/li>\r\n<li>Style dictionary has helpers called <a href=\"https:\/\/amzn.github.io\/style-dictionary\/#\/transforms\">Transforms<\/a> that do all kinds of awesome things automatically when you follow CTI<\/li>\r\n<\/ul>\r\n<h2 class=\"\">How to set up this structure in Sketch or Figma<\/h2>\r\n<p class=\"\">Let&#8217;s now look how to set up this structure directly inside Sketch or Figma so that we get the correct output needed for Style Dictionary to do its translation superpower.<\/p>\r\n<p>For this magic trick to work we\u2019re going to go backwards and look at this basic <strong>design token JSON structure.<\/strong><\/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\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\r\n\r\n<pre class=\"wp-block-code\"><code>{\r\n  \"size\": {\r\n    \"font\": {\r\n      \"small\" : { \"value\": \"0.75\" },\r\n      \"medium\": { \"value\": \"1\" },\r\n      \"large\" : { \"value\": \"1.5\" },\r\n    }\r\n  }\r\n}\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section is-layout-flow wp-block-quote-is-layout-flow\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<blockquote class=\"wp-block-quote\">\r\n<p>Size = <strong>Category<\/strong><\/p>\r\n<p>Font = <strong>Type<\/strong><\/p>\r\n<p>Small, medium &amp; large = <strong>Item<\/strong><\/p>\r\n<\/blockquote>\r\n<p>Now one good thing to know about Stratos Tokens is that we have a default setting in <em>filename.stratosproject<\/em> file that\u2019s called:<\/p>\r\n<p><code> \"baseFontSizeInPx\": 16<\/code><\/p>\r\n<p class=\"\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/basefont-inpixels.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1230 size-full\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/basefont-inpixels.png\" alt=\"\" width=\"1663\" height=\"1196\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/basefont-inpixels.png 1663w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/basefont-inpixels-300x216.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/basefont-inpixels-1024x736.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/basefont-inpixels-768x552.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/basefont-inpixels-1536x1105.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/basefont-inpixels-250x180.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/basefont-inpixels-550x396.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/basefont-inpixels-800x575.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/basefont-inpixels-417x300.png 417w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/basefont-inpixels-695x500.png 695w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/basefont-inpixels-210x150.png 210w\" sizes=\"auto, (max-width: 1663px) 100vw, 1663px\" \/><\/a><\/p>\r\n<p class=\"\">This is the <strong>default value in pixels<\/strong> that we use to calculate how things get multiplied in the backend of things whenever you use <code>{numericvalues}<\/code> for design tokens. Further down this tutorial this will make total sense, for now just trust me on this one. Don\u2019t give up!<\/p>\r\n<p><strong>Important<\/strong> \ud83d\udc49 You can <strong>change this value to something else<\/strong>, but for now, let&#8217;s leave it.<\/p>\r\n<h2>Lets setup this in Sketch \ud83d\udc8e<\/h2>\r\n<p class=\"\">Now to the fun part. Since we in the end would want one .json file per design token category, lets:<\/p>\r\n<ol>\r\n<li>Create a new document<\/li>\r\n<li>Create one artboard\/frame, size doesn\u2019t matter<\/li>\r\n<li>Name that artboard\/frame <code>{size}<\/code><\/li>\r\n<\/ol>\r\n<p class=\"\">Like this \ud83d\udc47<\/p>\r\n<p class=\"\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/style-dict-step-1.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1224 size-full\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/style-dict-step-1.png\" alt=\"\" width=\"3727\" height=\"2275\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/style-dict-step-1.png 3727w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/style-dict-step-1-300x183.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/style-dict-step-1-1024x625.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/style-dict-step-1-768x469.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/style-dict-step-1-1536x938.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/style-dict-step-1-2048x1250.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/style-dict-step-1-250x153.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/style-dict-step-1-550x336.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/style-dict-step-1-800x488.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/style-dict-step-1-295x180.png 295w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/style-dict-step-1-491x300.png 491w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/style-dict-step-1-819x500.png 819w\" sizes=\"auto, (max-width: 3727px) 100vw, 3727px\" \/><\/a><\/p>\r\n<p>And this is how you recreate the JSON from above inside Sketch\ud83d\udc47<\/p>\r\n<p class=\"\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/sketch-sizes.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1228 size-full\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/sketch-sizes.png\" alt=\"\" width=\"2645\" height=\"1556\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/sketch-sizes.png 2645w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/sketch-sizes-300x176.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/sketch-sizes-1024x602.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/sketch-sizes-768x452.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/sketch-sizes-1536x904.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/sketch-sizes-2048x1205.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/sketch-sizes-250x147.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/sketch-sizes-550x324.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/sketch-sizes-800x471.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/sketch-sizes-306x180.png 306w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/sketch-sizes-510x300.png 510w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/sketch-sizes-850x500.png 850w\" sizes=\"auto, (max-width: 2645px) 100vw, 2645px\" \/><\/a><\/p>\r\n<p>What actually comes out in code in this case is:<\/p>\r\n<ul class=\"\" style=\"padding: 0px 0px 16px 40px;\">\r\n<li>The groups and layers that I have added <code>{curly brackets}<\/code> too:<\/li>\r\n<\/ul>\r\n<figure id=\"attachment_1225\" aria-describedby=\"caption-attachment-1225\" style=\"width: 365px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/Detail-1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1225\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/Detail-1.jpg\" alt=\"\" width=\"365\" height=\"213\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/Detail-1.jpg 365w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/Detail-1-300x175.jpg 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/Detail-1-250x146.jpg 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/Detail-1-308x180.jpg 308w\" sizes=\"auto, (max-width: 365px) 100vw, 365px\" \/><\/a><figcaption id=\"caption-attachment-1225\" class=\"wp-caption-text\">This is CTI at its core \u2013 the mighty three structure<\/figcaption><\/figure>\r\n<ul class=\"\" style=\"padding: 0px 0px 16px 40px;\">\r\n<li>The actual text layers that output data needs to be named <code>{value}<\/code> \u2013 this is <strong>super important<\/strong> for getting Style Dictionary to work at all<\/li>\r\n<li>The values that I have added inside curly brackets on the artboard itself:<\/li>\r\n<\/ul>\r\n<figure id=\"attachment_1220\" aria-describedby=\"caption-attachment-1220\" style=\"width: 603px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/Detail-2.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1220\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/Detail-2.jpg\" alt=\"\" width=\"603\" height=\"105\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/Detail-2.jpg 603w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/Detail-2-300x52.jpg 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/Detail-2-250x44.jpg 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/Detail-2-550x96.jpg 550w\" sizes=\"auto, (max-width: 603px) 100vw, 603px\" \/><\/a><figcaption id=\"caption-attachment-1220\" class=\"wp-caption-text\">Remember those values in the JSON further up? These get multiplied by 16 which is the base size. That can be changed.<\/figcaption><\/figure>\r\n<p>As a side note, this is how you create them important curly ones \ud83d\ude3a \ud83e\udde1<\/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\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\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>{curly brackets} = alt + shift + ( )\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<p>The mighty thing about learning all of this is that suddenly you will be able to read code structures in a whole new way. Every time I see a JSON structure I automatically start translating this into groups and layers inside Sketch. Talk about code to design 1:1!<\/p>\r\n<p>This is also the beauty about design tokens, they are readable to mere mortals like me.<\/p>\r\n<p>Now how does this look in code? Let\u2019s find out. \ud83d\udc47 \ud83e\udd16<\/p>\r\n<h2>Let\u2019s create a Stratos Tokens project<\/h2>\r\n<p>Now that we have <strong>saved our Sketch file <\/strong>lets <strong>create a new Stratos Tokens project <\/strong>by just dragging the entire Sketch file onto our animated Sketch logo:<\/p>\r\n<figure id=\"attachment_1232\" aria-describedby=\"caption-attachment-1232\" style=\"width: 2333px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/drag-sketch-here-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1232\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/drag-sketch-here-1.png\" alt=\"\" width=\"2333\" height=\"2241\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/drag-sketch-here-1.png 2333w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/drag-sketch-here-1-300x288.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/drag-sketch-here-1-1024x984.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/drag-sketch-here-1-768x738.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/drag-sketch-here-1-1536x1475.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/drag-sketch-here-1-2048x1967.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/drag-sketch-here-1-250x240.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/drag-sketch-here-1-550x528.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/drag-sketch-here-1-800x768.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/drag-sketch-here-1-187x180.png 187w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/drag-sketch-here-1-312x300.png 312w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/drag-sketch-here-1-521x500.png 521w\" sizes=\"auto, (max-width: 2333px) 100vw, 2333px\" \/><\/a><figcaption id=\"caption-attachment-1232\" class=\"wp-caption-text\">This is the way<\/figcaption><\/figure>\r\n<p class=\"\">This will prompt you to save your new Stratos Tokens project, I always put the project directly where my Sketch file is. This is actually not mandatory, you can create your Stratos project folder anywhere you see fit.<\/p>\r\n<figure id=\"attachment_1227\" aria-describedby=\"caption-attachment-1227\" style=\"width: 2333px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/relink-sketchfile.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1227\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/relink-sketchfile.png\" alt=\"\" width=\"2333\" height=\"2241\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/relink-sketchfile.png 2333w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/relink-sketchfile-300x288.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/relink-sketchfile-1024x984.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/relink-sketchfile-768x738.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/relink-sketchfile-1536x1475.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/relink-sketchfile-2048x1967.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/relink-sketchfile-250x240.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/relink-sketchfile-550x528.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/relink-sketchfile-800x768.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/relink-sketchfile-187x180.png 187w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/relink-sketchfile-312x300.png 312w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/relink-sketchfile-521x500.png 521w\" sizes=\"auto, (max-width: 2333px) 100vw, 2333px\" \/><\/a><figcaption id=\"caption-attachment-1227\" class=\"wp-caption-text\">We&#8217;re here to help<\/figcaption><\/figure>\r\n<p class=\"\">Would you move your Sketch file from the location where it was upon project creation you will see a tiny cute\ud83d\udd75\ufe0f\u200d\u2642\ufe0f detective in Stratos Tokens. If this happens, just relocate the file and you will make him very happy.<\/p>\r\n<h2>Lets look at the JSON code<\/h2>\r\n<figure id=\"attachment_1223\" aria-describedby=\"caption-attachment-1223\" style=\"width: 3155px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/json-code.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1223 size-full\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/json-code.png\" alt=\"\" width=\"3155\" height=\"2265\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/json-code.png 3155w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/json-code-300x215.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/json-code-1024x735.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/json-code-768x551.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/json-code-1536x1103.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/json-code-2048x1470.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/json-code-250x179.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/json-code-550x395.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/json-code-800x574.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/json-code-251x180.png 251w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/json-code-418x300.png 418w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/json-code-696x500.png 696w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/json-code-210x150.png 210w\" sizes=\"auto, (max-width: 3155px) 100vw, 3155px\" \/><\/a><figcaption id=\"caption-attachment-1223\" class=\"wp-caption-text\">What you see here is what you have inside Sketch translated into raw JSON design token data<\/figcaption><\/figure>\r\n<p class=\"\">&nbsp;<\/p>\r\n<p>Go to the Explorer and click on the artboard named <em>size<\/em> \u2013 what you actually have now is a <strong>live link between the Sketch file and Stratos Tokens<\/strong>. Every time that you or anyone else changes in this file all the design tokens will be autogenerated inside Stratos Tokens. Neat as cup cakes we say. Whatever that means it sounds delicious.<\/p>\r\n<h2>Let&#8217;s install Style Dictionary to our project<\/h2>\r\n<p class=\"\">For every new Stratos Tokens project you create you get a nifty <em>README.md<\/em> with all kinds of great instructions and tips. Let&#8217;s look inside it now and find out how to install <strong>Style Dictionary = translate our raw JSON data into SCSS, iOS &amp; Android <\/strong>\ud83c\udf84<\/p>\r\n<figure id=\"attachment_1231\" aria-describedby=\"caption-attachment-1231\" style=\"width: 3155px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/readme-instructions-1.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1231 size-full\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/readme-instructions-1.png\" alt=\"\" width=\"3155\" height=\"2265\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/readme-instructions-1.png 3155w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/readme-instructions-1-300x215.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/readme-instructions-1-1024x735.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/readme-instructions-1-768x551.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/readme-instructions-1-1536x1103.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/readme-instructions-1-2048x1470.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/readme-instructions-1-250x179.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/readme-instructions-1-550x395.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/readme-instructions-1-800x574.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/readme-instructions-1-251x180.png 251w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/readme-instructions-1-418x300.png 418w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/readme-instructions-1-696x500.png 696w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/readme-instructions-1-210x150.png 210w\" sizes=\"auto, (max-width: 3155px) 100vw, 3155px\" \/><\/a><figcaption id=\"caption-attachment-1231\" class=\"wp-caption-text\">Installing and translating your raw JSON is just a few steps away \ud83e\udd16\ud83d\udcaa<\/figcaption><\/figure>\r\n<p class=\"\"><strong>ProTip!<\/strong> You can open this markdown file in any preferred text editor, add your markdown instructions etc.<\/p>\r\n<p class=\"\">To install Style Dictionary the first step is opening up the project in the Terminal. It\u2019s super easy, we have a great shortcut for this:<\/p>\r\n<h3>View \ud83d\udc49Project in Terminal<\/h3>\r\n<figure id=\"attachment_1229\" aria-describedby=\"caption-attachment-1229\" style=\"width: 2860px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/view-project-terminal.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1229 size-full\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/view-project-terminal.png\" alt=\"\" width=\"2860\" height=\"1994\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/view-project-terminal.png 2860w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/view-project-terminal-300x209.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/view-project-terminal-1024x714.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/view-project-terminal-768x535.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/view-project-terminal-1536x1071.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/view-project-terminal-2048x1428.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/view-project-terminal-250x174.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/view-project-terminal-550x383.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/view-project-terminal-800x558.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/view-project-terminal-258x180.png 258w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/view-project-terminal-430x300.png 430w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/view-project-terminal-717x500.png 717w\" sizes=\"auto, (max-width: 2860px) 100vw, 2860px\" \/><\/a><figcaption id=\"caption-attachment-1229\" class=\"wp-caption-text\">Neat shortcut right?<\/figcaption><\/figure>\r\n<ol>\r\n<li>In the Terminal\/Command window type &#8220;<strong>npm install<\/strong>&#8221; and press enter<\/li>\r\n<\/ol>\r\n<p>Voil\u00e0<em> Style Dictionary<\/em> has just been installed. I told you it was easy.<\/p>\r\n<p>Now let\u2019s use its mighty power of code translation:<\/p>\r\n<ol class=\"\" style=\"padding: 0px 0px 16px 40px;\" start=\"2\">\r\n<li>In the very same Terminal\/Command window type &#8220;npm run build&#8221; and press enter<\/li>\r\n<\/ol>\r\n<p class=\"\">You will see that we have created a new folder called <em>styledictionary<\/em> for you, just like that \ud83d\udca5 Now open it up and rejoice \u2014&nbsp;behold the mighty auto-magic that has occurred \ud83e\ude84<\/p>\r\n<p><div class=\"nv-iframe-embed\"><iframe loading=\"lazy\" title=\"Stratos Tokens 2021 \u2013 Style Dictionary translation magic\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/kmicMymIX_M?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div><\/p>\r\n<p class=\"\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/style-magic-3.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1252 size-full\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/style-magic-3.png\" alt=\"\" width=\"3593\" height=\"2179\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/style-magic-3.png 3593w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/style-magic-3-300x182.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/style-magic-3-1024x621.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/style-magic-3-768x466.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/style-magic-3-1536x932.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/style-magic-3-2048x1242.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/style-magic-3-250x152.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/style-magic-3-550x334.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/style-magic-3-800x485.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/style-magic-3-297x180.png 297w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/style-magic-3-495x300.png 495w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/style-magic-3-824x500.png 824w\" sizes=\"auto, (max-width: 3593px) 100vw, 3593px\" \/><\/a><\/p>\r\n<h2 class=\"\">What about updating my design tokens?<\/h2>\r\n<p class=\"\">Each time you change anything inside Sketch our app autogenerates the raw design token JSON for you. That does not apply to Style Dictionary. What you need to do is just hop into the Terminal again and:<\/p>\r\n<p class=\"\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/update-styled-part1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1256\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/update-styled-part1.png\" alt=\"\" width=\"2042\" height=\"1384\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/update-styled-part1.png 2042w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/update-styled-part1-300x203.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/update-styled-part1-1024x694.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/update-styled-part1-768x521.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/update-styled-part1-1536x1041.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/update-styled-part1-250x169.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/update-styled-part1-550x373.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/update-styled-part1-800x542.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/update-styled-part1-266x180.png 266w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/update-styled-part1-443x300.png 443w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/update-styled-part1-738x500.png 738w\" sizes=\"auto, (max-width: 2042px) 100vw, 2042px\" \/><\/a><\/p>\r\n<p><code>npm run build<\/code><\/p>\r\n<p class=\"\">It will run the build again updating the output and everything will be up to date:<\/p>\r\n<figure id=\"attachment_1257\" aria-describedby=\"caption-attachment-1257\" style=\"width: 2042px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/update-styled-part2-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1257\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/update-styled-part2-1.png\" alt=\"\" width=\"2042\" height=\"1384\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/update-styled-part2-1.png 2042w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/update-styled-part2-1-300x203.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/update-styled-part2-1-1024x694.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/update-styled-part2-1-768x521.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/update-styled-part2-1-1536x1041.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/update-styled-part2-1-250x169.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/update-styled-part2-1-550x373.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/update-styled-part2-1-800x542.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/update-styled-part2-1-266x180.png 266w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/update-styled-part2-1-443x300.png 443w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/update-styled-part2-1-738x500.png 738w\" sizes=\"auto, (max-width: 2042px) 100vw, 2042px\" \/><\/a><figcaption id=\"caption-attachment-1257\" class=\"wp-caption-text\">Aaaa look at all those nice \u2705<\/figcaption><\/figure>\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\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\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\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\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row bg-editor-hr-wrap\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<div class=\"row bg-editor-hr-wrap\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\"><hr class=\"wp-block-separator\"><\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<h2 class=\"\">I want to create more design tokens!<\/h2>\r\n<figure id=\"attachment_1274\" aria-describedby=\"caption-attachment-1274\" style=\"width: 2046px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/many-ways.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1274\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/many-ways.png\" alt=\"\" width=\"2046\" height=\"1532\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/many-ways.png 2046w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/many-ways-300x225.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/many-ways-1024x767.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/many-ways-768x575.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/many-ways-1536x1150.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/many-ways-250x187.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/many-ways-550x412.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/many-ways-800x599.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/many-ways-240x180.png 240w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/many-ways-401x300.png 401w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/many-ways-668x500.png 668w\" sizes=\"auto, (max-width: 2046px) 100vw, 2046px\" \/><\/a><figcaption id=\"caption-attachment-1274\" class=\"wp-caption-text\">We support many ways of getting design data out of Sketch \u2013 study our guide and <a href=\"https:\/\/sketch2react.gitbook.io\/sketch2react-io\/v\/stratos-tokens-2021\/develop\/the-basics\" target=\"_blank\" rel=\"noopener\">docs<\/a><\/figcaption><\/figure>\r\n<p class=\"\">Now that you have learned one way of outputting design tokens straight from Sketch app, and how to translate them automagically you maybe asking yourself &#8220;what else&nbsp;can I do?&#8221;<\/p>\r\n<div class=\"mceTemp\"><\/div>\r\n<p class=\"\">You can do whatever you want. Study our handy interactive <a href=\"https:\/\/marketplace.sketch2react.io\/product\/stratos-tokens-quick-start-guide\/\" target=\"_blank\" rel=\"noopener\"><strong>Stratos Tokens Quick Start Guide<\/strong><\/a>, connect it to our app, change things, see what happens directly in our app.&nbsp;<\/p>\r\n<p class=\"\">A note of reference, we are <strong>not using Style Dictionary&#8217;s semantics and structure in our Quick Start Guide<\/strong> since you actually are 100% free to setup and use any naming conventions and structure that fits your workflow. This is one of the strengths with Stratos Tokens.<\/p>\r\n<figure id=\"attachment_1279\" aria-describedby=\"caption-attachment-1279\" style=\"width: 3727px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/add-another-artboard.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1279\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/add-another-artboard.png\" alt=\"\" width=\"3727\" height=\"2275\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/add-another-artboard.png 3727w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/add-another-artboard-300x183.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/add-another-artboard-1024x625.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/add-another-artboard-768x469.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/add-another-artboard-1536x938.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/add-another-artboard-2048x1250.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/add-another-artboard-250x153.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/add-another-artboard-550x336.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/add-another-artboard-800x488.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/add-another-artboard-295x180.png 295w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/add-another-artboard-491x300.png 491w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/add-another-artboard-819x500.png 819w\" sizes=\"auto, (max-width: 3727px) 100vw, 3727px\" \/><\/a><figcaption id=\"caption-attachment-1279\" class=\"wp-caption-text\">This is how you add a new .json file to our app. Important to know, our free demo is restricted to only one artboard per Sketch file<\/figcaption><\/figure>\r\n<p class=\"\"><strong>ProTip! <\/strong>To create a new .json file, say for adding color tokens, you only have to create a <strong>new artboard<\/strong> inside the very same page and Sketch file that you created <em>size<\/em>. Just make sure to call it something else, e.g. <strong>{color}&nbsp;<\/strong>or it will overwrite.<\/p>\r\n<p class=\"\">Huzzah!<\/p>\r\n<p class=\"\">That\u2019s it folks, hope you enjoyed this simple introduction to Stratos Tokens and Style Dictionary. Until next time, have a great one and take care.<\/p>\r\n<p>Next time I&#8217;m going to dig even deeper and show you how to continue building and translating with Stratos Tokens and Style Dictionary. Here&#8217;s a sneak peak:<\/p>\r\n<p><div class=\"nv-iframe-embed\"><iframe loading=\"lazy\" title=\"Stratos Tokens 2021 \u2013 Sketch and Style Dictionary CRA Design Tokens Demo\" width=\"1200\" height=\"900\" src=\"https:\/\/www.youtube.com\/embed\/uuIV_6Asszg?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div><\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n","protected":false},"excerpt":{"rendered":"<p>Summary In this tutorial you will learn: What Style Dictionary is How to structure things in Sketch or Figma for it to work its magic of translation via Stratos Tokens and out to iOS, Android and SCSS How to install Style Dictionary into your Stratos Tokens project folder How to run and update your design&hellip;&nbsp;<a href=\"https:\/\/sketch2react.io\/blog\/how-to-get-started-with-style-dictionary-stratos-tokens\/\" class=\"\" rel=\"bookmark\">Read More &raquo;<span class=\"screen-reader-text\">How to get started with Style Dictionary &#038; Stratos Tokens<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":1269,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"bgseo_title":"","bgseo_description":"","bgseo_robots_index":"index","bgseo_robots_follow":"follow","neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"off","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"categories":[166],"tags":[175,174,138,165,191],"class_list":["post-1253","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-design-system","tag-design-tokens","tag-stratos-tokens","tag-style-dictionary","tag-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to get started with Style Dictionary &#038; Stratos Tokens | Sketch2React Blog<\/title>\n<meta name=\"description\" content=\"This tutorial is about how to get started using Style Dictionary together with Stratos Tokens App for Mac and Windows\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/sketch2react.io\/blog\/how-to-get-started-with-style-dictionary-stratos-tokens\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to get started with Style Dictionary &amp; Stratos Tokens - Sketch2React Blog\" \/>\n<meta property=\"og:description\" content=\"This tutorial is about how to get started using Style Dictionary together with Stratos Tokens App for Mac and Windows\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sketch2react.io\/blog\/how-to-get-started-with-style-dictionary-stratos-tokens\/\" \/>\n<meta property=\"og:site_name\" content=\"Sketch2React Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-04-09T11:40:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-05-17T08:57:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/StratosTokensStyleD-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Juan Maguid\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Juan Maguid\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-get-started-with-style-dictionary-stratos-tokens\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-get-started-with-style-dictionary-stratos-tokens\/\"},\"author\":{\"name\":\"Juan Maguid\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e\"},\"headline\":\"How to get started with Style Dictionary &#038; Stratos Tokens\",\"datePublished\":\"2021-04-09T11:40:36+00:00\",\"dateModified\":\"2021-05-17T08:57:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-get-started-with-style-dictionary-stratos-tokens\/\"},\"wordCount\":1633,\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-get-started-with-style-dictionary-stratos-tokens\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/StratosTokensStyleD-1.jpg\",\"keywords\":[\"Design system\",\"Design tokens\",\"Stratos Tokens\",\"Style Dictionary\",\"Tutorials\"],\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-get-started-with-style-dictionary-stratos-tokens\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/how-to-get-started-with-style-dictionary-stratos-tokens\/\",\"name\":\"How to get started with Style Dictionary & Stratos Tokens - Sketch2React Blog\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-get-started-with-style-dictionary-stratos-tokens\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-get-started-with-style-dictionary-stratos-tokens\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/StratosTokensStyleD-1.jpg\",\"datePublished\":\"2021-04-09T11:40:36+00:00\",\"dateModified\":\"2021-05-17T08:57:14+00:00\",\"description\":\"This tutorial is about how to get started using Style Dictionary together with Stratos Tokens App for Mac and Windows\",\"breadcrumb\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-get-started-with-style-dictionary-stratos-tokens\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sketch2react.io\/blog\/how-to-get-started-with-style-dictionary-stratos-tokens\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-get-started-with-style-dictionary-stratos-tokens\/#primaryimage\",\"url\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/StratosTokensStyleD-1.jpg\",\"contentUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/StratosTokensStyleD-1.jpg\",\"width\":1920,\"height\":1080},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-get-started-with-style-dictionary-stratos-tokens\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sketch2react.io\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to get started with Style Dictionary &#038; Stratos Tokens\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\",\"url\":\"https:\/\/sketch2react.io\/blog\/\",\"name\":\"Sketch2React Blog\",\"description\":\"Articles, tutorials, tips &amp; tricks\",\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/sketch2react.io\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\",\"name\":\"Sketch2React Blog\",\"url\":\"https:\/\/sketch2react.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png\",\"contentUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png\",\"width\":512,\"height\":512,\"caption\":\"Sketch2React Blog\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e\",\"name\":\"Juan Maguid\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g\",\"caption\":\"Juan Maguid\"},\"url\":\"https:\/\/sketch2react.io\/blog\/author\/sketch2react\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to get started with Style Dictionary &#038; Stratos Tokens | Sketch2React Blog","description":"This tutorial is about how to get started using Style Dictionary together with Stratos Tokens App for Mac and Windows","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/sketch2react.io\/blog\/how-to-get-started-with-style-dictionary-stratos-tokens\/","og_locale":"en_US","og_type":"article","og_title":"How to get started with Style Dictionary & Stratos Tokens - Sketch2React Blog","og_description":"This tutorial is about how to get started using Style Dictionary together with Stratos Tokens App for Mac and Windows","og_url":"https:\/\/sketch2react.io\/blog\/how-to-get-started-with-style-dictionary-stratos-tokens\/","og_site_name":"Sketch2React Blog","article_published_time":"2021-04-09T11:40:36+00:00","article_modified_time":"2021-05-17T08:57:14+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/StratosTokensStyleD-1.jpg","type":"image\/jpeg"}],"author":"Juan Maguid","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Juan Maguid","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sketch2react.io\/blog\/how-to-get-started-with-style-dictionary-stratos-tokens\/#article","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-get-started-with-style-dictionary-stratos-tokens\/"},"author":{"name":"Juan Maguid","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e"},"headline":"How to get started with Style Dictionary &#038; Stratos Tokens","datePublished":"2021-04-09T11:40:36+00:00","dateModified":"2021-05-17T08:57:14+00:00","mainEntityOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-get-started-with-style-dictionary-stratos-tokens\/"},"wordCount":1633,"publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-get-started-with-style-dictionary-stratos-tokens\/#primaryimage"},"thumbnailUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/StratosTokensStyleD-1.jpg","keywords":["Design system","Design tokens","Stratos Tokens","Style Dictionary","Tutorials"],"articleSection":["Tutorials"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/sketch2react.io\/blog\/how-to-get-started-with-style-dictionary-stratos-tokens\/","url":"https:\/\/sketch2react.io\/blog\/how-to-get-started-with-style-dictionary-stratos-tokens\/","name":"How to get started with Style Dictionary & Stratos Tokens - Sketch2React Blog","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-get-started-with-style-dictionary-stratos-tokens\/#primaryimage"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-get-started-with-style-dictionary-stratos-tokens\/#primaryimage"},"thumbnailUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/StratosTokensStyleD-1.jpg","datePublished":"2021-04-09T11:40:36+00:00","dateModified":"2021-05-17T08:57:14+00:00","description":"This tutorial is about how to get started using Style Dictionary together with Stratos Tokens App for Mac and Windows","breadcrumb":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-get-started-with-style-dictionary-stratos-tokens\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sketch2react.io\/blog\/how-to-get-started-with-style-dictionary-stratos-tokens\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/how-to-get-started-with-style-dictionary-stratos-tokens\/#primaryimage","url":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/StratosTokensStyleD-1.jpg","contentUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/StratosTokensStyleD-1.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/sketch2react.io\/blog\/how-to-get-started-with-style-dictionary-stratos-tokens\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sketch2react.io\/blog\/"},{"@type":"ListItem","position":2,"name":"How to get started with Style Dictionary &#038; Stratos Tokens"}]},{"@type":"WebSite","@id":"https:\/\/sketch2react.io\/blog\/#website","url":"https:\/\/sketch2react.io\/blog\/","name":"Sketch2React Blog","description":"Articles, tutorials, tips &amp; tricks","publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sketch2react.io\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/sketch2react.io\/blog\/#organization","name":"Sketch2React Blog","url":"https:\/\/sketch2react.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png","contentUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png","width":512,"height":512,"caption":"Sketch2React Blog"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e","name":"Juan Maguid","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g","caption":"Juan Maguid"},"url":"https:\/\/sketch2react.io\/blog\/author\/sketch2react\/"}]}},"_links":{"self":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/1253","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/comments?post=1253"}],"version-history":[{"count":10,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/1253\/revisions"}],"predecessor-version":[{"id":1285,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/1253\/revisions\/1285"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media\/1269"}],"wp:attachment":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media?parent=1253"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/categories?post=1253"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/tags?post=1253"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}