{"id":239,"date":"2020-04-16T12:54:57","date_gmt":"2020-04-16T10:54:57","guid":{"rendered":"https:\/\/sketch2react.wordpress.com\/2020\/04\/16\/alter-your-stratos-tokens-projects-configuration-to-supercharge-your-design-tokens\/"},"modified":"2021-05-17T11:05:31","modified_gmt":"2021-05-17T09:05:31","slug":"alter-your-stratos-tokens-projects-configuration-to-supercharge-your-design-tokens","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/alter-your-stratos-tokens-projects-configuration-to-supercharge-your-design-tokens\/","title":{"rendered":"Alter Your Stratos Tokens project\u2019s Configuration to Supercharge Your Design Tokens"},"content":{"rendered":"<figure class=\"wp-caption\"><img decoding=\"async\" data-width=\"780\" data-height=\"405\" src=\"http:\/\/sketch2react.files.wordpress.com\/2020\/04\/53476-0dhvv8ykv0itth_r6.jpg\"><figcaption class=\"wp-caption-text\">Amazing artwork by <a href=\"https:\/\/insertquarterbin.tumblr.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Rusty&nbsp;Shackles<\/a><\/figcaption><\/figure>\n<p><a href=\"https:\/\/gumroad.com\/l\/stratoswfh\" target=\"_blank\" rel=\"noopener noreferrer\"><em>Stratos Tokens App<\/em><\/a> is shipped with, out of the box support for <a href=\"https:\/\/amzn.github.io\/style-dictionary\/#\/\" target=\"_blank\" rel=\"noopener noreferrer\"><em>Amazon Style Dictionary<\/em><\/a>.<\/p>\n<p>We (<em>Team Sketch2React<\/em>) chose to support<em> Style Dictionary<\/em> out of the box because we found out that <em>Stratos Tokens App<\/em> (once your design file is properly set up) could output the design data structure (design tokens) required as input for <em>Style Dictionary<\/em> ?\u2705<\/p>\n<p><em>Style Dictionary<\/em> also provides great and easy-to-learn boilerplate projects alongside good documentation (Although I\u2019m still missing some code examples marked as todo on their website).<\/p>\n<h3>The configuration possibilities of Style Dictionary<\/h3>\n<p><em>Style Dictionary<\/em> is shipped with two different boilerplate projects: <em>basic <\/em>and <em>complete<\/em> (you can modify and\/or extend these to better suit your own needs).<\/p>\n<p>Included in these boilerplate projects is design data (design tokens) stored as JSON to demonstrate the build process and generate proper example output (and even complete apps!)<\/p>\n<p>In addition to the boilerplate configurations <em>Style Dictionary<\/em> also provides you with the possibility to create your own configurations by writing custom build scripts. This is done in <em>JavaScript<\/em> utilizing the <em>NPM<\/em> package <em>style-dictionary<\/em>.<\/p>\n<p>You can read more about setting up your own custom configuration in <em>Style Dictionary\u2019s<\/em> <a href=\"https:\/\/amzn.github.io\/style-dictionary\/#\/README\" target=\"_blank\" rel=\"noopener noreferrer\">documentation<\/a>.<\/p>\n<h3>Altering your Stratos tokens project configuration<\/h3>\n<p><em>Stratos Tokens App<\/em> initializes all of its projects with<em> Style Dictionary\u2019s<\/em> <em>basic<\/em> configuration file. This gives you, dear reader, a great starting point.<\/p>\n<p>However, eventually you might need to venture past the basic colors and sizes and include things like fonts, icons, and images into your workflow.<\/p>\n<p>This is already supported by <em>Style Dictionary<\/em> and can be utilized in your <em>Stratos Tokens <\/em>project.<\/p>\n<h3>But how?<\/h3>\n<p>There are three ways to do this:<\/p>\n<ul>\n<li>Edit <em>config.json <\/em>in your <em>Stratos Tokens<\/em> project folder. Use <a href=\"https:\/\/amzn.github.io\/style-dictionary\/#\/config\" target=\"_blank\" rel=\"noopener noreferrer\">Style Dictionary\u2019s documententation as reference<\/a>. (This is a road full of trial and error)<\/li>\n<li>Write your own custom <em>Style Dictionary<\/em> build script. Use <a href=\"https:\/\/amzn.github.io\/style-dictionary\/#\/quick_start?id=node\" target=\"_blank\" rel=\"noopener noreferrer\">Style Dictionary\u2019s documententation<\/a> as reference. This is not for the faint of heart!<\/li>\n<li>Initialize a <em>Style Dictionary<\/em> boilerplate project inside your <em>Stratos Tokens<\/em> project folder. (This gives you fully functional configurations straight away)<\/li>\n<\/ul>\n<p>Below I\u2019ll guide you how to setup a <em>Stratos Tokens project <\/em>with <em>Style Dictionary\u2019s<\/em> <strong>complete<\/strong> configuration.<\/p>\n<p>In <a href=\"https:\/\/gumroad.com\/l\/stratoswfh\" target=\"_blank\" rel=\"noopener noreferrer\"><em>Stratos Tokens App<\/em><\/a> click on <em>File<\/em> -&gt;<em> Open project in Terminal<\/em><\/p>\n<figure><img decoding=\"async\" data-width=\"906\" data-height=\"592\" src=\"http:\/\/sketch2react.files.wordpress.com\/2020\/04\/7eec9-1xocp6z0bsrxplzdsdhhm2q.png\"><\/figure>\n<p>Enter <em>style-dictionary init complete<\/em><\/p>\n<p>This will <strong>not<\/strong> override your <em>Stratos<\/em> design tokens data since the default location for <em>Style Dictionary<\/em> design tokens input JSON differs from that of <em>Stratos Tokens<\/em>.<\/p>\n<p><em>Style Dictionary\u2019s<\/em> default input data (design tokens) location is <em>\/properties<\/em><\/p>\n<figure class=\"wp-caption\"><img decoding=\"async\" data-width=\"1646\" data-height=\"1398\" src=\"http:\/\/sketch2react.files.wordpress.com\/2020\/04\/31c71-17oau-fogku80zujt3l6jgg.png\"><figcaption class=\"wp-caption-text\">Style Dictionary input default location is \/properties<\/figcaption><\/figure>\n<p><em>Stratos Tokens\u2019s<\/em> default input data (design tokens) location is <em>\/data\/json<\/em><\/p>\n<figure class=\"wp-caption\"><img decoding=\"async\" data-width=\"1634\" data-height=\"1128\" src=\"http:\/\/sketch2react.files.wordpress.com\/2020\/04\/9bd82-1hog4ed9ufnsjchgb-b29gw.png\"><figcaption class=\"wp-caption-text\">Stratos Tokens\u2019 input default location is \/data\/json<\/figcaption><\/figure>\n<h4>Making Style Dictionary use Stratos Tokens\u2019 design data as&nbsp;input<\/h4>\n<p>If you now start to poke around in the newly generated Style Dictionary output, you\u2019ll notice that it is no longer based on the JSON design data (design tokens) from your design document\u2026!? What you need to do is:<\/p>\n<p><strong>Modify <em>config.json<\/em><\/strong><\/p>\n<ul>\n<li>Open the file <em>config.json<\/em> located in your <em>Stratos Tokens <\/em>project in your favorite code editor (mine\u2019s <em>VS Code<\/em>).<\/li>\n<\/ul>\n<figure><img decoding=\"async\" data-width=\"1004\" data-height=\"446\" src=\"http:\/\/sketch2react.files.wordpress.com\/2020\/04\/61aab-1gvtmzns-m_xaizfl16zqzq.png\"><\/figure>\n<ul>\n<li>On line 3\u2013 change <em>properties<\/em> into <em>data\/json<\/em><\/li>\n<\/ul>\n<figure><img decoding=\"async\" data-width=\"744\" data-height=\"930\" src=\"http:\/\/sketch2react.files.wordpress.com\/2020\/04\/c271a-1zylg-m764faa2fzck4kdeg.png\"><\/figure>\n<ul>\n<li>Save the changes<\/li>\n<li>In Stratos Tokens App click on File -&gt; Open project in Terminal<\/li>\n<\/ul>\n<figure><img decoding=\"async\" data-width=\"906\" data-height=\"592\" src=\"http:\/\/sketch2react.files.wordpress.com\/2020\/04\/7eec9-1xocp6z0bsrxplzdsdhhm2q.png\"><\/figure>\n<ul>\n<li>Enter <em>npm run build <\/em>and press enter<\/li>\n<\/ul>\n<figure><img decoding=\"async\" data-width=\"914\" data-height=\"174\" src=\"http:\/\/sketch2react.files.wordpress.com\/2020\/04\/19ad3-1zcrezydv6g_kc0r4qm2liw.png\"><\/figure>\n<p>Now <em>Style Dictionary<\/em> uses <em>Stratos Tokens\u2019<\/em> generated design data (design tokens) as input!<\/p>\n<figure><img decoding=\"async\" data-width=\"1126\" data-height=\"694\" src=\"http:\/\/sketch2react.files.wordpress.com\/2020\/04\/8b9b2-1fe5wewaqpyiczss642j5bw.png\"><\/figure>\n<h3>What this change to configuration doesn\u2019t&nbsp;do<\/h3>\n<p>I can\u2019t stress this enough \u2013 This change to <em>Stratos Tokens\u2019<\/em> project configuration doesn\u2019t magically attach your icons, fonts and images from your design document to the generated design tokens! It only prepares <em>Style Dictionary<\/em> for handling more advanced input in order to generate more advanced output which in turn enables you, dear reader, to go beyond the border of human imagination and potentially design the best design system ever! (Maybe I exaggerate a tiiiiiny bit, but you get my point)<\/p>\n<p>The design data input structure you still have to set up manually in your design document.<\/p>\n<h4>No worries, help is on it\u2019s&nbsp;way<\/h4>\n<p>I know all of this might seem very confusing and hard to learn, but fear not dear reader, <em>Team Sketch2React<\/em> is here to help you get a flying start! We are finalizing a design document (In <em>Sketch<\/em>, that you can import into <em>Figma<\/em> and\/or <em>InVision Studio<\/em>) which contains an <em>Ant Design Styleguide<\/em>! And better yet! It\u2019s structured in such a way that it works with <em>Style Dictionary\u2019s<\/em> boilerplate projects!<\/p>\n<p>This will be accompanied with a written tutorial explaining the structure and content of the design document.<\/p>\n<p>There will also be a written, as well as a video tutorial, about how you go from Design Tool to iOS app with Stratos Tokens and Style Dictionary (!)<\/p>\n<h3>Related reads<\/h3>\n<p><a href=\"https:\/\/medium.com\/sketch2react\/introducing-stratos-tokens-app-9eaca96d9c22\">https:\/\/medium.com\/sketch2react\/introducing-stratos-tokens-app-9eaca96d9c22<\/a><\/p>\n<p>Thanks for reading!<\/p>\n<p>Fredrik\u200a\u2014\u200aTeam Sketch2React<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Amazing artwork by Rusty&nbsp;Shackles Stratos Tokens App is shipped with, out of the box support for Amazon Style Dictionary. We (Team Sketch2React) chose to support Style Dictionary out of the box because we found out that Stratos Tokens App (once your design file is properly set up) could output the design data structure (design tokens)&hellip;&nbsp;<a href=\"https:\/\/sketch2react.io\/blog\/alter-your-stratos-tokens-projects-configuration-to-supercharge-your-design-tokens\/\" class=\"\" rel=\"bookmark\">Read More &raquo;<span class=\"screen-reader-text\">Alter Your Stratos Tokens project\u2019s Configuration to Supercharge Your Design Tokens<\/span><\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bgseo_title":"","bgseo_description":"","bgseo_robots_index":"","bgseo_robots_follow":"","neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","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":[125,118,116,136,191],"class_list":["post-239","post","type-post","status-publish","format-standard","hentry","category-tutorials","tag-design-systems","tag-design-to-code","tag-stratosapp","tag-token-design","tag-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Alter Your Stratos Tokens project\u2019s Configuration to Supercharge Your Design Tokens | Sketch2React Blog<\/title>\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\/alter-your-stratos-tokens-projects-configuration-to-supercharge-your-design-tokens\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Alter Your Stratos Tokens project\u2019s Configuration to Supercharge Your Design Tokens - Sketch2React Blog\" \/>\n<meta property=\"og:description\" content=\"Amazing artwork by Rusty&nbsp;Shackles Stratos Tokens App is shipped with, out of the box support for Amazon Style Dictionary. We (Team Sketch2React) chose to support Style Dictionary out of the box because we found out that Stratos Tokens App (once your design file is properly set up) could output the design data structure (design tokens)&hellip;&nbsp;Read More &raquo;Alter Your Stratos Tokens project\u2019s Configuration to Supercharge Your Design Tokens\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sketch2react.io\/blog\/alter-your-stratos-tokens-projects-configuration-to-supercharge-your-design-tokens\/\" \/>\n<meta property=\"og:site_name\" content=\"Sketch2React Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-04-16T10:54:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-05-17T09:05:31+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/sketch2react.files.wordpress.com\/2020\/04\/53476-0dhvv8ykv0itth_r6.jpg\" \/>\n<meta name=\"author\" content=\"Fredrik Ward\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fredrik Ward\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/sketch2react.io\/blog\/alter-your-stratos-tokens-projects-configuration-to-supercharge-your-design-tokens\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/alter-your-stratos-tokens-projects-configuration-to-supercharge-your-design-tokens\/\"},\"author\":{\"name\":\"Fredrik Ward\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/d452067d5528ce6cda4be87f136cf664\"},\"headline\":\"Alter Your Stratos Tokens project\u2019s Configuration to Supercharge Your Design Tokens\",\"datePublished\":\"2020-04-16T10:54:57+00:00\",\"dateModified\":\"2021-05-17T09:05:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/alter-your-stratos-tokens-projects-configuration-to-supercharge-your-design-tokens\/\"},\"wordCount\":827,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/alter-your-stratos-tokens-projects-configuration-to-supercharge-your-design-tokens\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/sketch2react.files.wordpress.com\/2020\/04\/53476-0dhvv8ykv0itth_r6.jpg\",\"keywords\":[\"Design Systems\",\"Design To Code\",\"Stratosapp\",\"Token Design\",\"Tutorials\"],\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/sketch2react.io\/blog\/alter-your-stratos-tokens-projects-configuration-to-supercharge-your-design-tokens\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sketch2react.io\/blog\/alter-your-stratos-tokens-projects-configuration-to-supercharge-your-design-tokens\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/alter-your-stratos-tokens-projects-configuration-to-supercharge-your-design-tokens\/\",\"name\":\"Alter Your Stratos Tokens project\u2019s Configuration to Supercharge Your Design Tokens - Sketch2React Blog\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/alter-your-stratos-tokens-projects-configuration-to-supercharge-your-design-tokens\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/alter-your-stratos-tokens-projects-configuration-to-supercharge-your-design-tokens\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/sketch2react.files.wordpress.com\/2020\/04\/53476-0dhvv8ykv0itth_r6.jpg\",\"datePublished\":\"2020-04-16T10:54:57+00:00\",\"dateModified\":\"2021-05-17T09:05:31+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/alter-your-stratos-tokens-projects-configuration-to-supercharge-your-design-tokens\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sketch2react.io\/blog\/alter-your-stratos-tokens-projects-configuration-to-supercharge-your-design-tokens\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/alter-your-stratos-tokens-projects-configuration-to-supercharge-your-design-tokens\/#primaryimage\",\"url\":\"http:\/\/sketch2react.files.wordpress.com\/2020\/04\/53476-0dhvv8ykv0itth_r6.jpg\",\"contentUrl\":\"http:\/\/sketch2react.files.wordpress.com\/2020\/04\/53476-0dhvv8ykv0itth_r6.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sketch2react.io\/blog\/alter-your-stratos-tokens-projects-configuration-to-supercharge-your-design-tokens\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sketch2react.io\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Alter Your Stratos Tokens project\u2019s Configuration to Supercharge Your Design 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\/d452067d5528ce6cda4be87f136cf664\",\"name\":\"Fredrik Ward\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/91605aba05531b0d98ed254dc314b74be1800d1086302db1454b4489c128e3e1?s=96&d=wavatar&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/91605aba05531b0d98ed254dc314b74be1800d1086302db1454b4489c128e3e1?s=96&d=wavatar&r=g\",\"caption\":\"Fredrik Ward\"},\"url\":\"https:\/\/sketch2react.io\/blog\/author\/sewk9wxw3g\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Alter Your Stratos Tokens project\u2019s Configuration to Supercharge Your Design Tokens | Sketch2React Blog","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\/alter-your-stratos-tokens-projects-configuration-to-supercharge-your-design-tokens\/","og_locale":"en_US","og_type":"article","og_title":"Alter Your Stratos Tokens project\u2019s Configuration to Supercharge Your Design Tokens - Sketch2React Blog","og_description":"Amazing artwork by Rusty&nbsp;Shackles Stratos Tokens App is shipped with, out of the box support for Amazon Style Dictionary. We (Team Sketch2React) chose to support Style Dictionary out of the box because we found out that Stratos Tokens App (once your design file is properly set up) could output the design data structure (design tokens)&hellip;&nbsp;Read More &raquo;Alter Your Stratos Tokens project\u2019s Configuration to Supercharge Your Design Tokens","og_url":"https:\/\/sketch2react.io\/blog\/alter-your-stratos-tokens-projects-configuration-to-supercharge-your-design-tokens\/","og_site_name":"Sketch2React Blog","article_published_time":"2020-04-16T10:54:57+00:00","article_modified_time":"2021-05-17T09:05:31+00:00","og_image":[{"url":"http:\/\/sketch2react.files.wordpress.com\/2020\/04\/53476-0dhvv8ykv0itth_r6.jpg","type":"","width":"","height":""}],"author":"Fredrik Ward","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Fredrik Ward","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sketch2react.io\/blog\/alter-your-stratos-tokens-projects-configuration-to-supercharge-your-design-tokens\/#article","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/alter-your-stratos-tokens-projects-configuration-to-supercharge-your-design-tokens\/"},"author":{"name":"Fredrik Ward","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/d452067d5528ce6cda4be87f136cf664"},"headline":"Alter Your Stratos Tokens project\u2019s Configuration to Supercharge Your Design Tokens","datePublished":"2020-04-16T10:54:57+00:00","dateModified":"2021-05-17T09:05:31+00:00","mainEntityOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/alter-your-stratos-tokens-projects-configuration-to-supercharge-your-design-tokens\/"},"wordCount":827,"commentCount":0,"publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/alter-your-stratos-tokens-projects-configuration-to-supercharge-your-design-tokens\/#primaryimage"},"thumbnailUrl":"http:\/\/sketch2react.files.wordpress.com\/2020\/04\/53476-0dhvv8ykv0itth_r6.jpg","keywords":["Design Systems","Design To Code","Stratosapp","Token Design","Tutorials"],"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/sketch2react.io\/blog\/alter-your-stratos-tokens-projects-configuration-to-supercharge-your-design-tokens\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/sketch2react.io\/blog\/alter-your-stratos-tokens-projects-configuration-to-supercharge-your-design-tokens\/","url":"https:\/\/sketch2react.io\/blog\/alter-your-stratos-tokens-projects-configuration-to-supercharge-your-design-tokens\/","name":"Alter Your Stratos Tokens project\u2019s Configuration to Supercharge Your Design Tokens - Sketch2React Blog","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/alter-your-stratos-tokens-projects-configuration-to-supercharge-your-design-tokens\/#primaryimage"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/alter-your-stratos-tokens-projects-configuration-to-supercharge-your-design-tokens\/#primaryimage"},"thumbnailUrl":"http:\/\/sketch2react.files.wordpress.com\/2020\/04\/53476-0dhvv8ykv0itth_r6.jpg","datePublished":"2020-04-16T10:54:57+00:00","dateModified":"2021-05-17T09:05:31+00:00","breadcrumb":{"@id":"https:\/\/sketch2react.io\/blog\/alter-your-stratos-tokens-projects-configuration-to-supercharge-your-design-tokens\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sketch2react.io\/blog\/alter-your-stratos-tokens-projects-configuration-to-supercharge-your-design-tokens\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/alter-your-stratos-tokens-projects-configuration-to-supercharge-your-design-tokens\/#primaryimage","url":"http:\/\/sketch2react.files.wordpress.com\/2020\/04\/53476-0dhvv8ykv0itth_r6.jpg","contentUrl":"http:\/\/sketch2react.files.wordpress.com\/2020\/04\/53476-0dhvv8ykv0itth_r6.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/sketch2react.io\/blog\/alter-your-stratos-tokens-projects-configuration-to-supercharge-your-design-tokens\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sketch2react.io\/blog\/"},{"@type":"ListItem","position":2,"name":"Alter Your Stratos Tokens project\u2019s Configuration to Supercharge Your Design 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\/d452067d5528ce6cda4be87f136cf664","name":"Fredrik Ward","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/91605aba05531b0d98ed254dc314b74be1800d1086302db1454b4489c128e3e1?s=96&d=wavatar&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/91605aba05531b0d98ed254dc314b74be1800d1086302db1454b4489c128e3e1?s=96&d=wavatar&r=g","caption":"Fredrik Ward"},"url":"https:\/\/sketch2react.io\/blog\/author\/sewk9wxw3g\/"}]}},"_links":{"self":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/239","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\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/comments?post=239"}],"version-history":[{"count":1,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/239\/revisions"}],"predecessor-version":[{"id":292,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/239\/revisions\/292"}],"wp:attachment":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media?parent=239"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/categories?post=239"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/tags?post=239"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}