{"id":1380,"date":"2021-05-12T18:00:37","date_gmt":"2021-05-12T16:00:37","guid":{"rendered":"https:\/\/sketch2react.io\/blog\/?p=1380"},"modified":"2021-05-21T09:57:54","modified_gmt":"2021-05-21T07:57:54","slug":"lets-get-practical-with-design-tokens-part-1","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/lets-get-practical-with-design-tokens-part-1\/","title":{"rendered":"Let&#8217;s get practical with design 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<h4 class=\"wp-block-heading\">A hands-on practical guide on how to get started working with design tokens and Stratos Tokens \u2014 the designer\u2019s perspective<\/h4>\r\n<p class=\"\">In this tutorial we\u2019re going to do something different, we\u2019re going to divided this practical guide into two articles:<\/p>\r\n<ul class=\"\" style=\"padding: 0px 0px 16px 40px;\">\r\n<li>The designer&#8217;s perspective (this one)<\/li>\r\n<li>The developer&#8217;s perspective (Fredriks upcoming tutorial)<\/li>\r\n<\/ul>\r\n<p class=\"\">I\u2019ll be creating the design tokens needed to control the styling that we use in both Sketch2React and Stratos Tokens apps straight from within Sketch. Then later, in part two, Fredrik is going to use these design tokens (autogenerated SCSS from Stratos Tokens) and implement them in code. Fun!<\/p>\r\n<h2>Follow the project<\/h2>\r\n<p class=\"\">If you\u2019re interested in following our process of building a minimal design system make sure to <a href=\"https:\/\/github.com\/sketch2react\/exos-design-system\" target=\"_blank\" rel=\"noopener\">follow our project<\/a> on Github \ud83c\udfcb\ufe0f\u200d\u2640\ufe0f<\/p>\r\n<div class=\"row bg-editor-hr-wrap\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\"><hr><\/div>\r\n<\/div>\r\n<h2 class=\"\">First some basics<\/h2>\r\n<p class=\"\"><strong>Design tokens are design decisions right? <\/strong>Let\u2019s take a basic example, so we understand each other from the get go:<\/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<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\">\r\n<p class=\"mod-reset\"><img loading=\"lazy\" decoding=\"async\" width=\"2312\" height=\"558\" class=\"wp-image-1376\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/designdecisions-tokens-2.png\" alt=\"A simple button and the design decisions we have made\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/designdecisions-tokens-2.png 2312w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/designdecisions-tokens-2-300x72.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/designdecisions-tokens-2-1024x247.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/designdecisions-tokens-2-768x185.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/designdecisions-tokens-2-1536x371.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/designdecisions-tokens-2-2048x494.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/designdecisions-tokens-2-250x60.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/designdecisions-tokens-2-550x133.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/designdecisions-tokens-2-800x193.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/designdecisions-tokens-2-746x180.png 746w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/designdecisions-tokens-2-1243x300.png 1243w\" sizes=\"auto, (max-width: 2312px) 100vw, 2312px\" \/><\/p>\r\n<figcaption>A simple button and the design decisions we have made<\/figcaption>\r\n<\/figure>\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=\"\">Take the above <strong>simple button<\/strong> as an example. Without even noticing we have already made these design decisions:<\/p>\r\n<ol class=\"\" style=\"padding: 0px 0px 16px 40px;\">\r\n<li>Color<\/li>\r\n<li>Border color, weight, and radius<\/li>\r\n<li>Typography<\/li>\r\n<li>Padding<\/li>\r\n<\/ol>\r\n<p>As a designer you are actually already working with design tokens but, most likely, without being conscious about it, without having a methodology.<\/p>\r\n<p class=\"\">Practically working with design tokens is about <strong>deconstructing these design decisions into different parts<\/strong>, a bit like looking into the blueprints of a classic Volvo V70 engine.<\/p>\r\n<p class=\"\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/volvo-engine-1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1371\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/volvo-engine-1.jpg\" alt=\"\" width=\"906\" height=\"573\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/volvo-engine-1.jpg 906w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/volvo-engine-1-300x190.jpg 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/volvo-engine-1-768x486.jpg 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/volvo-engine-1-250x158.jpg 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/volvo-engine-1-550x348.jpg 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/volvo-engine-1-800x506.jpg 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/volvo-engine-1-285x180.jpg 285w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/volvo-engine-1-474x300.jpg 474w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/volvo-engine-1-791x500.jpg 791w\" sizes=\"auto, (max-width: 906px) 100vw, 906px\" \/><\/a><\/p>\r\n<h2 class=\"\">Sketch2React Style Guide<\/h2>\r\n<p class=\"\">For this tutorial, I created a simple <strong>style guide for our apps<\/strong>, it looks like this \ud83d\udc47This is the first time I take a general look upon the styles that we are using. Not all of them are used everywhere, which is the whole purpose of style guides. They are guided, not mandatory.<\/p>\r\n<p class=\"\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/s2r-styleguide-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1365\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/s2r-styleguide-1.png\" alt=\"\" width=\"3728\" height=\"2314\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/s2r-styleguide-1.png 3728w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/s2r-styleguide-1-300x186.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/s2r-styleguide-1-1024x636.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/s2r-styleguide-1-768x477.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/s2r-styleguide-1-1536x953.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/s2r-styleguide-1-2048x1271.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/s2r-styleguide-1-250x155.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/s2r-styleguide-1-550x341.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/s2r-styleguide-1-800x497.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/s2r-styleguide-1-290x180.png 290w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/s2r-styleguide-1-483x300.png 483w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/s2r-styleguide-1-806x500.png 806w\" sizes=\"auto, (max-width: 3728px) 100vw, 3728px\" \/><\/a><\/p>\r\n<h2 class=\"\">The strong use case for Team Sketch2React<\/h2>\r\n<p class=\"\"><a href=\"https:\/\/sketch2react.io\" target=\"_blank\" rel=\"noopener\">Team Sketch2React<\/a> is a small team consisting of one designer (me) and one developer (Fredrik). We have full-time jobs on the side of running our little software company, so we really need to be smart on what we work on, and how.<\/p>\r\n<p class=\"\">You could call us a <strong>100% remote software company<\/strong> since we don\u2019t even see each other in person anymore. <em>Damn you Covid-19!<\/em><\/p>\r\n<p class=\"\">We talk though, several times a week, of course. On one of these talks Fredrik suddenly said:<\/p>\r\n<blockquote class=\"wp-block-quote\">\r\n<p>\u201d Juan, wouldn\u2019t it be a really cool demo for Stratos Tokens to actually update the styling for our apps with it?\u201d<\/p>\r\n<\/blockquote>\r\n<p class=\"\"><strong>Now this is getting interesting! <\/strong>Not only can we use this as learning material, we will also benefit from this setup. I can create &amp; update the design tokens straight from Sketch, send Fredrik a neat little package of styling data (in our case autogenerated SCSS via Style Dictionary) and boom, he consumes them in both our apps. Is it Christmas already? \ud83c\udf84 \ud83c\udf85<\/p>\r\n<h2 class=\"\">Theming!<\/h2>\r\n<p class=\"\">Not only will I, in my role as designer, be able to get nitty-gritty about all those petty small details I care far too much about. We have also talked about creating <strong>several themes<\/strong> for our apps, both for dark mode and the default light one.<\/p>\r\n<p>Now instead of bugging the hell out of poor overworked Fredrik I can style everything myself, experimenting with different themes, and he can focus on building support for switching between them in our apps settings.<\/p>\r\n<h2>Design tokens can be used for anything<\/h2>\r\n<p>I think that many designers think design tokens is something to solely be used together with and within design systems. This is a <strong>dangerous misconception<\/strong> holding many teams away from ever implementing them.<\/p>\r\n<p class=\"\"><strong>You don\u2019t need to have an entire design system at hand<\/strong> for it to be worth the little extra time and effort it takes to set this up. Even handling visual updates between two apps (Sketch2React and Stratos Tokens) is time-consuming.<\/p>\r\n<p class=\"\"><em>What if I could, as a designer, do some heavy lifting and take care of the styling? <\/em><\/p>\r\n<p>You already know the answer. So, how do we start?<\/p>\r\n<h2>Step 1 \u2014 Design token audit<\/h2>\r\n<p>The first thing we need to do is to look at our apps and do a <strong>design token audit<\/strong>. Not all things need to be updated via design tokens. As a kind of MVP for this new workflow we decided to create <strong>color tokens<\/strong> for:<\/p>\r\n<ul class=\"\" style=\"padding: 0px 0px 16px 40px;\">\r\n<li>Fonts \ud83d\udc49Light &amp; Dark Mode<\/li>\r\n<li>Icons \ud83d\udc49Light &amp; Dark Mode<\/li>\r\n<li>Backgrounds \ud83d\udc49Light &amp; Dark Mode<\/li>\r\n<li>Buttons \ud83d\udc49Light &amp; Dark Mode<\/li>\r\n<li>Panels \ud83d\udc49Light &amp; Dark Mode<\/li>\r\n<\/ul>\r\n<p class=\"\">The best thing here is, if we need to create new design tokens for new components, we just add them to our design file Sketch or Figma \ud83d\udc49Stratos Tokens \ud83d\udc49Style Dictionary Magic \ud83d\udc49Export \u2705<\/p>\r\n<p class=\"\">Anyone heard someone scream S C A L A B L E outside my window? No?<\/p>\r\n<p class=\"\">Okey I need to cry tears of joy now.<\/p>\r\n<h2 class=\"\">Step 2 \u2014 Get the current styling code from Fredrik<\/h2>\r\n<p class=\"\">Both our apps are built with Electron, so we use SCSS for all the styling. Currently, we have three SCSS files \ud83d\udd75\ufe0f\u200d\u2640\ufe0f<\/p>\r\n<div class=\"wc-gallery\"><div class='wcflexslider-container wc-gallery-bottomspace-default wc-gallery-clear'><div id='gallery-1' class='gallery wc-gallery-captions-onhover gallery-link-post wcslider wcflexslider' data-reflections='false' data-gutter-width='5' data-columns='3' data-hide-controls='false'><ul class='slides'>\n\t\t\t\t<li class='gallery-item gallery-item-position-1 gallery-item-attachment-1370 wcflex-slide-item'>\n\t\t\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t\t\t<a href=\"https:\/\/sketch2react.io\/blog\/lightmode-scss-png-2\/\" target=\"_blank\"><img src='https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/lightmode-scss-1.png' width='3135' height='2087' alt='' \/><\/a>\n\t\t\t\t\t<\/div><\/li>\n\t\t\t\t<li class='gallery-item gallery-item-position-2 gallery-item-attachment-1368 wcflex-slide-item'>\n\t\t\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t\t\t<a href=\"https:\/\/sketch2react.io\/blog\/variables-scss-png-2\/\" target=\"_blank\"><img src='https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/variables-scss-1.png' width='3135' height='2087' alt='' \/><\/a>\n\t\t\t\t\t<\/div><\/li>\n\t\t\t\t<li class='gallery-item gallery-item-position-3 gallery-item-attachment-1373 wcflex-slide-item'>\n\t\t\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t\t\t<a href=\"https:\/\/sketch2react.io\/blog\/darkmode-scss-png-2\/\" target=\"_blank\"><img src='https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/darkmode-scss-1.png' width='3135' height='2087' alt='' \/><\/a>\n\t\t\t\t\t<\/div><\/li><\/ul><\/div>\n<\/div>\n<\/div>\r\n<ol class=\"\" style=\"padding: 0px 0px 16px 40px;\">\r\n<li>variables.scss<\/li>\r\n<li>dark-mode.scss<\/li>\r\n<li>light-mode.scss<\/li>\r\n<\/ol>\r\n<p class=\"\">As you probably can see Fredrik has already done an impressive job for us, everything organized into the same CTI (Category, Type, Item) that is the base of how Style Dictionary works.<\/p>\r\n<p class=\"\">Just a quick comparison of the three SCSS files teaches us these important things:<\/p>\r\n<ul class=\"\" style=\"padding: 0px 0px 16px 40px;\">\r\n<li>All important stuff is inside variables.scss<\/li>\r\n<li>The other ones use references to variables.scss<\/li>\r\n<\/ul>\r\n<p class=\"\">This means we only need to create the <strong>color tokens that are used inside varibles.scss in Sketch<\/strong>. Let\u2019s do that now!<\/p>\r\n<h2>Step 3 \u2014&nbsp;Lets recreate the variables inside Sketch<\/h2>\r\n<p class=\"\"><em>Side note \ud83d\udc49 These steps will be the same when we release our Figma support, which is coming later in Q2. <\/em><\/p>\r\n<p class=\"\">In my not so humle opinion one of the top features in the new <a href=\"https:\/\/marketplace.sketch2react.io\/product\/stratos-tokens\/\" target=\"_blank\" rel=\"noopener\">Stratos Tokens 2021 <\/a>is the way we handle what comes out in code and not. Everything that is not wrapped with {curly brackets} will be ignored in our app. This opens up for a cleaner output and enhances your workflow inside Sketch (and later also Figma).<\/p>\r\n<h2 class=\"\">In Sketch<\/h2>\r\n<ol class=\"\">\r\n<li>Let\u2019s create a new artboard inside our Style Guide and name it <strong>{color}<\/strong>.<\/li>\r\n<li>You can jump ahead and study the <a href=\"https:\/\/www.dropbox.com\/s\/amt4g5hvpc609u2\/Sketch2ReactStyleGuide.sketch?dl=0\" target=\"_blank\" rel=\"noopener\">final Sketch file<\/a><\/li>\r\n<\/ol>\r\n<p class=\"\">How did I know what to call the artboard? I studied Fredrik\u2019s nicely organized SCSS. \u2705<\/p>\r\n<h2 class=\"\">What if my developer hasn\u2019t organized it like this in code?<\/h2>\r\n<p class=\"\"><strong>Doesn\u2019t matter at all.<\/strong> If you follow Style Dictionary\u2019s <a href=\"https:\/\/amzn.github.io\/style-dictionary\/#\/properties?id=category-type-item\">CTI structure<\/a> and naming conventions what comes out in code from our app will work everywhere. Upon building these tokens, thanks to the genius of how this works in the back-end, all your {artboards} and {tokens} will merge into a single SCSS file.<\/p>\r\n<p class=\"\">Style Dictionary also exports by default to iOS and Android without you needing to do a single extra thing (if you set it up correctly of course).<\/p>\r\n<p class=\"\">When you have become accustomed to how <a title=\"How to get started with Style Dictionary &amp; Stratos Tokens\" href=\"https:\/\/sketch2react.io\/blog\/how-to-get-started-with-style-dictionary-stratos-tokens\/\" target=\"_blank\" rel=\"noopener\">Style Dictionary works<\/a> and what CTI is, it\u2019s a piece of cake to build this inside your design app.<\/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\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=\"wp-block-image\">\r\n<figure class=\"aligncenter\">\r\n<p class=\"mod-reset\"><img loading=\"lazy\" decoding=\"async\" width=\"1436\" height=\"656\" class=\"wp-image-1374\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/code-example-2.png\" alt=\"\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/code-example-2.png 1436w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/code-example-2-300x137.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/code-example-2-1024x468.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/code-example-2-768x351.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/code-example-2-250x114.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/code-example-2-550x251.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/code-example-2-800x365.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/code-example-2-394x180.png 394w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/code-example-2-657x300.png 657w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/code-example-2-1095x500.png 1095w\" sizes=\"auto, (max-width: 1436px) 100vw, 1436px\" \/><\/p>\r\n<\/figure>\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=\"wp-block-heading\">The hierarchy in Sketch<\/h2>\r\n<ol class=\"\">\r\n<li><strong>{color}<\/strong> name of the artboard<\/li>\r\n<li><strong>{base}<\/strong> name of parent group<\/li>\r\n<li><strong>{grey}<\/strong> name of child group, in this case all the grey colors we use<\/li>\r\n<li><strong>{1}<\/strong> name of child group, in this case it refers to this color #f7f7f7<\/li>\r\n<li>\ud83d\udc49For colors <strong>you use rectangles<\/strong>, call them <strong>{value}<\/strong> and fill it with the color code<\/li>\r\n<li>\ud83d\ude80 \u2705<\/li>\r\n<\/ol>\r\n<h2>Looks like this<\/h2>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\">\r\n<p class=\"mod-reset\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/cti-structure-sketch-2.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1377\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/cti-structure-sketch-2.png\" alt=\"See? Logical friends, logical\" width=\"3727\" height=\"2275\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/cti-structure-sketch-2.png 3727w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/cti-structure-sketch-2-300x183.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/cti-structure-sketch-2-1024x625.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/cti-structure-sketch-2-768x469.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/cti-structure-sketch-2-1536x938.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/cti-structure-sketch-2-2048x1250.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/cti-structure-sketch-2-250x153.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/cti-structure-sketch-2-550x336.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/cti-structure-sketch-2-800x488.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/cti-structure-sketch-2-295x180.png 295w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/cti-structure-sketch-2-491x300.png 491w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/cti-structure-sketch-2-819x500.png 819w\" sizes=\"auto, (max-width: 3727px) 100vw, 3727px\" \/><\/a><\/p>\r\n<figcaption>See? Logical friends, logical<\/figcaption>\r\n<\/figure>\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=\"wp-block-heading\">Use a prefix<\/h2>\r\n<p class=\"\">To <strong>better separate the design tokens<\/strong> that you create from the original styling code we strongly advise you to <strong>use a prefix<\/strong>. The coolest thing is, you only need to add a single line of code to your default config.json that we automatically create for you for new Stratos Tokens projects:<\/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<pre class=\"wp-block-code\"><code>\"prefix\": \"token\",\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 class=\"\">This will make more sense when we add this Sketch file to Stratos Tokens. Let\u2019s do that right now.<\/p>\r\n<h2 class=\"\">In Stratos Tokens 2021<\/h2>\r\n<p class=\"\"><strong class=\"iw la\">Side note <\/strong>\u270d\ufe0f Since we\u2019re only using <strong class=\"iw la\">one artboard<\/strong> that renders design tokens, for this tutorial you can use the <em class=\"mb\">free demo<\/em> of <a class=\"cd jy\" href=\"https:\/\/marketplace.sketch2react.io\/product\/stratos-tokens-demo\/\" rel=\"noopener nofollow\">Stratos Tokens 2021<\/a> \ud83d\ude3a\ud83d\udcaa<\/p>\r\n<p class=\"\">You add <em>design token artboards<\/em> by using<strong class=\"iw la\"> {curly brackets}<\/strong> \u2026 That means you can have unlimited regular artboards in your document.<\/p>\r\n<div style=\"width: 1200px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-1380-1\" width=\"1200\" height=\"703\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/drag-sketch-file-tokens.mp4?_=1\" \/><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/drag-sketch-file-tokens.mp4\">https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/drag-sketch-file-tokens.mp4<\/a><\/video><\/div>\r\n<ol class=\"\" style=\"padding: 0px 0px 16px 40px;\">\r\n<li>Download <a href=\"https:\/\/www.dropbox.com\/s\/amt4g5hvpc609u2\/Sketch2ReactStyleGuide.sketch?dl=0\" target=\"_blank\" rel=\"noopener\">my Sketch file<\/a> for this tutorial<\/li>\r\n<li>Drag and drop it onto the Sketch file loader (that animated Sketch logo thingie)<\/li>\r\n<li>Save Stratos project<\/li>\r\n<li>Done! \u2705<\/li>\r\n<\/ol>\r\n<p class=\"\">So let\u2019s look at what we have created for you:<\/p>\r\n<figure id=\"attachment_1357\" aria-describedby=\"caption-attachment-1357\" style=\"width: 3158px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/design-token-view-stratos-1.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1357 size-full\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/design-token-view-stratos-1.png\" alt=\"\" width=\"3158\" height=\"2120\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/design-token-view-stratos-1.png 3158w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/design-token-view-stratos-1-300x201.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/design-token-view-stratos-1-1024x687.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/design-token-view-stratos-1-768x516.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/design-token-view-stratos-1-1536x1031.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/design-token-view-stratos-1-2048x1375.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/design-token-view-stratos-1-250x168.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/design-token-view-stratos-1-550x369.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/design-token-view-stratos-1-800x537.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/design-token-view-stratos-1-268x180.png 268w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/design-token-view-stratos-1-447x300.png 447w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/design-token-view-stratos-1-745x500.png 745w\" sizes=\"auto, (max-width: 3158px) 100vw, 3158px\" \/><\/a><figcaption id=\"caption-attachment-1357\" class=\"wp-caption-text\">The artboard we have in Sketch named {color} and all its glorious design tokens<\/figcaption><\/figure>\r\n<p>Looks good. Let\u2019s jump right into our config.json file and do these two things:<\/p>\r\n<ul class=\"\">\r\n<li>add a prefix called <code>tokens<\/code><\/li>\r\n<li>change the name of the destination from <code>_variables.scss<\/code> to be instead <code>variables.scss<\/code><\/li>\r\n<\/ul>\r\n<h3 class=\"\">Why change the destination name?<\/h3>\r\n<p class=\"\">If we look at one of the SCSS files that Fredrik sent to me, it looks like this:<\/p>\r\n<figure id=\"attachment_1366\" aria-describedby=\"caption-attachment-1366\" style=\"width: 1436px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/light-mode-scss-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1366\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/light-mode-scss-1.png\" alt=\"\" width=\"1436\" height=\"1448\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/light-mode-scss-1.png 1436w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/light-mode-scss-1-298x300.png 298w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/light-mode-scss-1-1016x1024.png 1016w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/light-mode-scss-1-150x150.png 150w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/light-mode-scss-1-768x774.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/light-mode-scss-1-48x48.png 48w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/light-mode-scss-1-250x252.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/light-mode-scss-1-550x555.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/light-mode-scss-1-800x807.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/light-mode-scss-1-179x180.png 179w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/light-mode-scss-1-496x500.png 496w\" sizes=\"auto, (max-width: 1436px) 100vw, 1436px\" \/><\/a><figcaption id=\"caption-attachment-1366\" class=\"wp-caption-text\">Since I want to replicate Fredrik&#8217;s setup I remove the underscore in my config.json<\/figcaption><\/figure>\r\n<p class=\"\">See right on top it says <code>@import '.\/variables.scss';<\/code> with no underscore. It actually doesn\u2019t matter much since your developer can relink things anyway, but I want to keep this demo 1:1 with how Fredrik\u2019s styling code looks.<\/p>\r\n<h4>Original config.json<\/h4>\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<pre class=\"wp-block-code\"><code>\"platforms\":{\r\n\"scss\":{\r\n\"transformGroup\":\"scss\"\r\n\"buildPath\":\"styledictionary\/build\/scss\/\"\r\n\"files\":[\r\n0:{\r\n\"destination\":\"_variables.scss\"\r\n\"format\":\"scss\/variables\"\r\n}\r\n]\r\n},\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<div style=\"width: 1200px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-1380-2\" width=\"1200\" height=\"694\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/edit-config-json.mp4?_=2\" \/><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/edit-config-json.mp4\">https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/edit-config-json.mp4<\/a><\/video><\/div>\r\n<h4 class=\"\">Updated config.json<\/h4>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>\"platforms\":{\r\n\"scss\":{\r\n\"transformGroup\":\"scss\"\r\n\"buildPath\":\"styledictionary\/build\/scss\/\"\r\n\"prefix\":\"token\"\r\n\"files\":[\r\n0:{\r\n\"destination\":\"variables.scss\"\r\n\"format\":\"scss\/variables\"\r\n}\r\n]\r\n},\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>Make sure you open up the config.json in an external text editor, we always use Visual Studio Code for obvious reasons. It owns.<\/p>\r\n<p class=\"\">Awesome! Let\u2019s take a \u2615break, if you have made it this far, you must be pretty tired by now. I know I am \ud83e\udd23<\/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<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=\"wp-block-heading\">Let\u2019s do some Style Dictionary magic<\/h2>\r\n<p class=\"\">Now that we have worked really hard for 30 minutes or so, let\u2019s see what all the fuzz about that damn Style Dictionary is about.<\/p>\r\n<ol class=\"\" style=\"padding: 0px 0px 16px 40px;\">\r\n<li>In Stratos Tokens app \ud83d\udc49View \ud83d\udc49Project in Terminal<\/li>\r\n<li>In Terminal app \ud83d\udc49<code>npm install<\/code> and hit Enter\u21a9\ufe0e<\/li>\r\n<li>In Terminal app \ud83d\udc49 <code>npm run build<\/code> and hit Enter\u21a9\ufe0e<\/li>\r\n<li>Now go back to Stratos Tokens app, press the <strong>little refresh icon<\/strong>:<\/li>\r\n<\/ol>\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<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\">\r\n<p class=\"mod-reset\"><img loading=\"lazy\" decoding=\"async\" width=\"3158\" height=\"2120\" class=\"wp-image-1378\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/refresh-after-build-2.png\" alt=\"\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/refresh-after-build-2.png 3158w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/refresh-after-build-2-300x201.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/refresh-after-build-2-1024x687.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/refresh-after-build-2-768x516.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/refresh-after-build-2-1536x1031.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/refresh-after-build-2-2048x1375.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/refresh-after-build-2-250x168.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/refresh-after-build-2-550x369.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/refresh-after-build-2-800x537.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/refresh-after-build-2-268x180.png 268w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/refresh-after-build-2-447x300.png 447w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/refresh-after-build-2-745x500.png 745w\" sizes=\"auto, (max-width: 3158px) 100vw, 3158px\" \/><\/p>\r\n<\/figure>\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<ol class=\"wp-block-list\" style=\"padding: 0px 0px 16px 40px;\" start=\"5\">\r\n<li>Done! \u2705 We have just autogenerated all the SCSS, added a prefix to each token name and all is well, looking good.<\/li>\r\n<\/ol>\r\n<p class=\"\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/variables-created.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1404 size-full\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/variables-created.png\" alt=\"\" width=\"3158\" height=\"2120\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/variables-created.png 3158w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/variables-created-300x201.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/variables-created-1024x687.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/variables-created-768x516.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/variables-created-1536x1031.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/variables-created-2048x1375.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/variables-created-250x168.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/variables-created-550x369.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/variables-created-800x537.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/variables-created-268x180.png 268w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/variables-created-447x300.png 447w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/variables-created-745x500.png 745w\" sizes=\"auto, (max-width: 3158px) 100vw, 3158px\" \/><\/a><\/p>\r\n<p class=\"\">It\u2019s now that the real fun begins. Let\u2019s add a few new design tokens shall we?<\/p>\r\n<h2 class=\"\">How our apps look today<\/h2>\r\n<p class=\"\">In both Sketch2React and Stratos Tokens the selected section icon colors look like this:<\/p>\r\n<div class=\"wc-gallery\"><div class='wcflexslider-container wc-gallery-bottomspace-default wc-gallery-clear'><div id='gallery-2' class='gallery wc-gallery-captions-onhover gallery-link-post wcslider wcflexslider' data-reflections='false' data-gutter-width='5' data-columns='3' data-hide-controls='false'><ul class='slides'>\n\t\t\t\t<li class='gallery-item gallery-item-position-1 gallery-item-attachment-1356 wcflex-slide-item'>\n\t\t\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t\t\t<a href=\"https:\/\/sketch2react.io\/blog\/s2r-dark-mode-png-2\/\" target=\"_blank\"><img src='https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/s2r-dark-mode-1-1024x848.png' width='1024' height='848' alt='' \/><\/a>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<div class='wp-caption-text gallery-caption' style='width:1024px;'>\n\t\t\t\t\t<p>\n\t\t\t\t\tOrange is used in dark mode\n\t\t\t\t\t<\/p>\n\t\t\t\t\t<\/div><\/li>\n\t\t\t\t<li class='gallery-item gallery-item-position-2 gallery-item-attachment-1351 wcflex-slide-item'>\n\t\t\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t\t\t<a href=\"https:\/\/sketch2react.io\/blog\/s2r-light-mode-png\/\" target=\"_blank\"><img src='https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/s2r-light-mode-1024x848.png' width='1024' height='848' alt='' \/><\/a>\n\t\t\t\t\t<\/div><\/li><\/ul><\/div>\n<\/div>\n<\/div>\r\n<p>I\u2019m not 100% happy with this even if I\u2019m the one who actually chose them from the very beginning. No problems since now we have a very fast way of updating this. \ud83d\ude80<\/p>\r\n<p>I want to try out two new colors, two different blues.<\/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<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\">\r\n<p class=\"mod-reset\"><img loading=\"lazy\" decoding=\"async\" width=\"2604\" height=\"568\" class=\"wp-image-1375\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/new-styles-2.png\" alt=\"Let's create two new design tokens, two shades of blue\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/new-styles-2.png 2604w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/new-styles-2-300x65.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/new-styles-2-1024x223.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/new-styles-2-768x168.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/new-styles-2-1536x335.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/new-styles-2-2048x447.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/new-styles-2-250x55.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/new-styles-2-550x120.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/new-styles-2-800x175.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/new-styles-2-825x180.png 825w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/new-styles-2-1375x300.png 1375w\" sizes=\"auto, (max-width: 2604px) 100vw, 2604px\" \/><\/p>\r\n<figcaption>Let&#8217;s create two new design tokens, two shades of blue<\/figcaption>\r\n<\/figure>\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>Since it makes no sense changing the colors of <code>color-base-pink-1 <\/code>and <code>color-base-orange-1<\/code> I will instead do this:<\/p>\r\n<h2>In Sketch<\/h2>\r\n<ol class=\"\" style=\"padding: 0px 0px 16px 40px;\">\r\n<li>Duplicate the layer groups containing above design tokens<\/li>\r\n<li>Rename them to something that actually makes sense (blue-something)<\/li>\r\n<li>Change the {value} to the two new shades of blue<\/li>\r\n<\/ol>\r\n<p class=\"\">Since I also want to show Fredrik what I have changed, I\u2019m going to add them right beside the current color used in our apps. Maybe I\u2019ll add some explanation texts also? Hmm, let me see.<\/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<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\">\r\n<p class=\"mod-reset\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/new-colors-2.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1379\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/new-colors-2.png\" alt=\"The new colors added right beside the old ones, for clarification\" width=\"3728\" height=\"2314\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/new-colors-2.png 3728w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/new-colors-2-300x186.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/new-colors-2-1024x636.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/new-colors-2-768x477.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/new-colors-2-1536x953.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/new-colors-2-2048x1271.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/new-colors-2-250x155.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/new-colors-2-550x341.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/new-colors-2-800x497.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/new-colors-2-290x180.png 290w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/new-colors-2-483x300.png 483w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/new-colors-2-806x500.png 806w\" sizes=\"auto, (max-width: 3728px) 100vw, 3728px\" \/><\/a><\/p>\r\n<figcaption>The new colors added right beside the old ones, for clarification<\/figcaption>\r\n<\/figure>\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>I have a confession to make. I\u2019m really terrible at coming up with names for my colors. So, I just picked the name&#8217;s auto-created by my neat little color tool called <a href=\"https:\/\/sipapp.io\">Sip<\/a>. Really, I recommend it. \ud83e\udde1<\/p>\r\n<h2>In Stratos Tokens<\/h2>\r\n<p class=\"\">Let\u2019s rebuild everything again, but this time we don\u2019t need to do the installation command.<\/p>\r\n<ol class=\"\" style=\"padding: 0px 0px 16px 40px;\">\r\n<li>In Stratos Tokens app \ud83d\udc49View \ud83d\udc49Project in Terminal<\/li>\r\n<li>In Terminal app \ud83d\udc49 <code>npm run build<\/code> and hit Enter\u21a9\ufe0e<\/li>\r\n<li>Now go back to Stratos Tokens app, press the <strong>little refresh icon<\/strong><\/li>\r\n<\/ol>\r\n<p class=\"\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/refresh-after-build-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1378\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/refresh-after-build-2.png\" alt=\"\" width=\"3158\" height=\"2120\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/refresh-after-build-2.png 3158w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/refresh-after-build-2-300x201.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/refresh-after-build-2-1024x687.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/refresh-after-build-2-768x516.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/refresh-after-build-2-1536x1031.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/refresh-after-build-2-2048x1375.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/refresh-after-build-2-250x168.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/refresh-after-build-2-550x369.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/refresh-after-build-2-800x537.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/refresh-after-build-2-268x180.png 268w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/refresh-after-build-2-447x300.png 447w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/refresh-after-build-2-745x500.png 745w\" sizes=\"auto, (max-width: 3158px) 100vw, 3158px\" \/><\/a><\/p>\r\n<p class=\"\">Voil\u00e0 look at our delicious <strong>color tokens<\/strong>!<\/p>\r\n<figure id=\"attachment_1358\" aria-describedby=\"caption-attachment-1358\" style=\"width: 3158px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/new-tokens-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1358\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/new-tokens-1.png\" alt=\"\" width=\"3158\" height=\"2120\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/new-tokens-1.png 3158w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/new-tokens-1-300x201.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/new-tokens-1-1024x687.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/new-tokens-1-768x516.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/new-tokens-1-1536x1031.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/new-tokens-1-2048x1375.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/new-tokens-1-250x168.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/new-tokens-1-550x369.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/new-tokens-1-800x537.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/new-tokens-1-268x180.png 268w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/new-tokens-1-447x300.png 447w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/new-tokens-1-745x500.png 745w\" sizes=\"auto, (max-width: 3158px) 100vw, 3158px\" \/><\/a><figcaption id=\"caption-attachment-1358\" class=\"wp-caption-text\">Look at this, just like that we have two new design token values in SCSS \ud83e\ude84<\/figcaption><\/figure>\r\n<h3 class=\"\">ProTip! \ud83e\udd16 \ud83d\udcaa<\/h3>\r\n<p class=\"\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/sketch-color-variables-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1359\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/sketch-color-variables-1.png\" alt=\"\" width=\"3728\" height=\"2314\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/sketch-color-variables-1.png 3728w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/sketch-color-variables-1-300x186.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/sketch-color-variables-1-1024x636.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/sketch-color-variables-1-768x477.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/sketch-color-variables-1-1536x953.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/sketch-color-variables-1-2048x1271.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/sketch-color-variables-1-250x155.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/sketch-color-variables-1-550x341.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/sketch-color-variables-1-800x497.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/sketch-color-variables-1-290x180.png 290w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/sketch-color-variables-1-483x300.png 483w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/sketch-color-variables-1-806x500.png 806w\" sizes=\"auto, (max-width: 3728px) 100vw, 3728px\" \/><\/a><\/p>\r\n<p class=\"\">I\u2019m saving all my different colors as variables in Sketch. That way, if and when I update any of them, it will also update my design tokens if in use. Talk about neat feature.<\/p>\r\n<h2>Let\u2019s send this to Fredrik aka The Developer<\/h2>\r\n<p class=\"\">That\u2019s it! Now we are ready to send this too Fredrik and see what he does with it.<\/p>\r\n<ol class=\"\">\r\n<li>Zip my entire Stratos Tokens project folder, in this case mine is called <em>Sketch2ReactStyleGuide<\/em><\/li>\r\n<li>Send it to him via Slack in a PM<\/li>\r\n<li>Let him take care of everything from now on \u2705<\/li>\r\n<\/ol>\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<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>That\u2019s all folks, hope you enjoyed this practical guide, I had a blast. It\u2019s going to be fascinating to read the follow-up article from Fredrik\u2019s perspective, the developer.<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n","protected":false},"excerpt":{"rendered":"<p>A hands-on practical guide on how to get started working with design tokens and Stratos Tokens \u2014 the designer\u2019s perspective In this tutorial we\u2019re going to do something different, we\u2019re going to divided this practical guide into two articles: The designer&#8217;s perspective (this one) The developer&#8217;s perspective (Fredriks upcoming tutorial) I\u2019ll be creating the design&hellip;&nbsp;<a href=\"https:\/\/sketch2react.io\/blog\/lets-get-practical-with-design-tokens-part-1\/\" class=\"\" rel=\"bookmark\">Read More &raquo;<span class=\"screen-reader-text\">Let&#8217;s get practical with design tokens<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":1398,"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,18,194,165,191],"class_list":["post-1380","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-design-system","tag-design-tokens","tag-sketch-app","tag-stratos-tokens-2021","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>Let&#8217;s get practical with design tokens | Sketch2React Blog<\/title>\n<meta name=\"description\" content=\"Practically working with design tokens is about deconstructing these design decisions into different parts, a bit like looking into the blueprints of a classic Volvo V70 engine.\" \/>\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\/lets-get-practical-with-design-tokens-part-1\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Let&#039;s get practical with design tokens - Sketch2React Blog\" \/>\n<meta property=\"og:description\" content=\"Practically working with design tokens is about deconstructing these design decisions into different parts, a bit like looking into the blueprints of a classic Volvo V70 engine.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sketch2react.io\/blog\/lets-get-practical-with-design-tokens-part-1\/\" \/>\n<meta property=\"og:site_name\" content=\"Sketch2React Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-05-12T16:00:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-05-21T07:57:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/practical-designtokens-1.png\" \/>\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\/png\" \/>\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=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/sketch2react.io\/blog\/lets-get-practical-with-design-tokens-part-1\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/lets-get-practical-with-design-tokens-part-1\/\"},\"author\":{\"name\":\"Juan Maguid\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e\"},\"headline\":\"Let&#8217;s get practical with design tokens\",\"datePublished\":\"2021-05-12T16:00:37+00:00\",\"dateModified\":\"2021-05-21T07:57:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/lets-get-practical-with-design-tokens-part-1\/\"},\"wordCount\":2141,\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/lets-get-practical-with-design-tokens-part-1\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/practical-designtokens-1.png\",\"keywords\":[\"Design system\",\"Design tokens\",\"Sketch App\",\"Stratos Tokens 2021\",\"Style Dictionary\",\"Tutorials\"],\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sketch2react.io\/blog\/lets-get-practical-with-design-tokens-part-1\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/lets-get-practical-with-design-tokens-part-1\/\",\"name\":\"Let's get practical with design tokens - Sketch2React Blog\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/lets-get-practical-with-design-tokens-part-1\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/lets-get-practical-with-design-tokens-part-1\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/practical-designtokens-1.png\",\"datePublished\":\"2021-05-12T16:00:37+00:00\",\"dateModified\":\"2021-05-21T07:57:54+00:00\",\"description\":\"Practically working with design tokens is about deconstructing these design decisions into different parts, a bit like looking into the blueprints of a classic Volvo V70 engine.\",\"breadcrumb\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/lets-get-practical-with-design-tokens-part-1\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sketch2react.io\/blog\/lets-get-practical-with-design-tokens-part-1\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/lets-get-practical-with-design-tokens-part-1\/#primaryimage\",\"url\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/practical-designtokens-1.png\",\"contentUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/practical-designtokens-1.png\",\"width\":1920,\"height\":1080},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sketch2react.io\/blog\/lets-get-practical-with-design-tokens-part-1\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sketch2react.io\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Let&#8217;s get practical with 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\/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":"Let&#8217;s get practical with design tokens | Sketch2React Blog","description":"Practically working with design tokens is about deconstructing these design decisions into different parts, a bit like looking into the blueprints of a classic Volvo V70 engine.","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\/lets-get-practical-with-design-tokens-part-1\/","og_locale":"en_US","og_type":"article","og_title":"Let's get practical with design tokens - Sketch2React Blog","og_description":"Practically working with design tokens is about deconstructing these design decisions into different parts, a bit like looking into the blueprints of a classic Volvo V70 engine.","og_url":"https:\/\/sketch2react.io\/blog\/lets-get-practical-with-design-tokens-part-1\/","og_site_name":"Sketch2React Blog","article_published_time":"2021-05-12T16:00:37+00:00","article_modified_time":"2021-05-21T07:57:54+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/practical-designtokens-1.png","type":"image\/png"}],"author":"Juan Maguid","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Juan Maguid","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sketch2react.io\/blog\/lets-get-practical-with-design-tokens-part-1\/#article","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/lets-get-practical-with-design-tokens-part-1\/"},"author":{"name":"Juan Maguid","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e"},"headline":"Let&#8217;s get practical with design tokens","datePublished":"2021-05-12T16:00:37+00:00","dateModified":"2021-05-21T07:57:54+00:00","mainEntityOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/lets-get-practical-with-design-tokens-part-1\/"},"wordCount":2141,"publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/lets-get-practical-with-design-tokens-part-1\/#primaryimage"},"thumbnailUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/practical-designtokens-1.png","keywords":["Design system","Design tokens","Sketch App","Stratos Tokens 2021","Style Dictionary","Tutorials"],"articleSection":["Tutorials"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/sketch2react.io\/blog\/lets-get-practical-with-design-tokens-part-1\/","url":"https:\/\/sketch2react.io\/blog\/lets-get-practical-with-design-tokens-part-1\/","name":"Let's get practical with design tokens - Sketch2React Blog","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/lets-get-practical-with-design-tokens-part-1\/#primaryimage"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/lets-get-practical-with-design-tokens-part-1\/#primaryimage"},"thumbnailUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/practical-designtokens-1.png","datePublished":"2021-05-12T16:00:37+00:00","dateModified":"2021-05-21T07:57:54+00:00","description":"Practically working with design tokens is about deconstructing these design decisions into different parts, a bit like looking into the blueprints of a classic Volvo V70 engine.","breadcrumb":{"@id":"https:\/\/sketch2react.io\/blog\/lets-get-practical-with-design-tokens-part-1\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sketch2react.io\/blog\/lets-get-practical-with-design-tokens-part-1\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/lets-get-practical-with-design-tokens-part-1\/#primaryimage","url":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/practical-designtokens-1.png","contentUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/practical-designtokens-1.png","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/sketch2react.io\/blog\/lets-get-practical-with-design-tokens-part-1\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sketch2react.io\/blog\/"},{"@type":"ListItem","position":2,"name":"Let&#8217;s get practical with 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\/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\/1380","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=1380"}],"version-history":[{"count":10,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/1380\/revisions"}],"predecessor-version":[{"id":1413,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/1380\/revisions\/1413"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media\/1398"}],"wp:attachment":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media?parent=1380"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/categories?post=1380"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/tags?post=1380"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}