{"id":1417,"date":"2021-05-21T09:54:43","date_gmt":"2021-05-21T07:54:43","guid":{"rendered":"https:\/\/sketch2react.io\/blog\/?p=1417"},"modified":"2021-05-21T15:02:34","modified_gmt":"2021-05-21T13:02:34","slug":"the-different-levels-of-design-token-designing","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/the-different-levels-of-design-token-designing\/","title":{"rendered":"The different levels of design token designing"},"content":{"rendered":"<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\"><\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\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=\"\">We in Team Sketch2React believe in empowering designers with choice, so you will always have the ability to choose for yourself. Basically, it comes down too answering these questions:<\/p>\r\n<ul class=\"\" style=\"padding: 0px 0px 16px 40px;\">\r\n<li>Do you design for cross-platform products? (iOS, Android, Web, macOS, Windows)<\/li>\r\n<li>Do you use something like <a href=\"https:\/\/material-ui.com\">Material UI for React<\/a>? (Web)<\/li>\r\n<li>Do you just want to output <strong>raw design tokens<\/strong> (JSON) and let your awesome developers do all the implementation?<\/li>\r\n<li>Do you want to use theming? (JSON)<\/li>\r\n<\/ul>\r\n<p>Thing is, we support all these different scenarios, and they require a different amount of setup and understanding. Let\u2019s take the analogy of game design. In most classic games you have levels. It starts easy but gets a bit more challenging the further into the game you travel.<\/p>\r\n<h2 class=\"\">Level 1 \u2014 Basic setup<\/h2>\r\n<p class=\"\">By just learning how you <a href=\"https:\/\/sketch2react.gitbook.io\/sketch2react-io\/v\/stratos-tokens-2021\/develop\/the-basics\">create and output design tokens<\/a> from Stratos Tokens you will get everything a developer needs to implement it anywhere they need.<\/p>\r\n<figure id=\"attachment_1291\" aria-describedby=\"caption-attachment-1291\" style=\"width: 3727px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/tokens-css-props-rectangles.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1291\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/tokens-css-props-rectangles.png\" alt=\"\" width=\"3727\" height=\"2275\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/tokens-css-props-rectangles.png 3727w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/tokens-css-props-rectangles-300x183.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/tokens-css-props-rectangles-1024x625.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/tokens-css-props-rectangles-768x469.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/tokens-css-props-rectangles-1536x938.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/tokens-css-props-rectangles-2048x1250.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/tokens-css-props-rectangles-250x153.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/tokens-css-props-rectangles-550x336.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/tokens-css-props-rectangles-800x488.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/tokens-css-props-rectangles-295x180.png 295w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/tokens-css-props-rectangles-491x300.png 491w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/04\/tokens-css-props-rectangles-819x500.png 819w\" sizes=\"auto, (max-width: 3727px) 100vw, 3727px\" \/><\/a><figcaption id=\"caption-attachment-1291\" class=\"wp-caption-text\">Here we just listed the many different ways of outputting design token data, no overall structure more than following our framework rules<\/figcaption><\/figure>\r\n<p class=\"\">Let\u2019s take <a href=\"https:\/\/marketplace.sketch2react.io\/product\/stratos-tokens-quick-start-guide\/\">Stratos Tokens 2021 Quick Start Guide<\/a> as an example. Just using common sense we have divided things into categories like:<\/p>\r\n<ul class=\"\" style=\"padding: 0px 0px 16px 40px;\">\r\n<li>color<\/li>\r\n<li>border formatting<\/li>\r\n<li>text<\/li>\r\n<li>breakpoints<\/li>\r\n<li>drop shadows &amp; inner shadows<\/li>\r\n<li>animation transitions<\/li>\r\n<li>fonts<\/li>\r\n<li>padding<\/li>\r\n<li>spacing<\/li>\r\n<li>font weight<\/li>\r\n<li>line height<\/li>\r\n<li>letter spacing<\/li>\r\n<\/ul>\r\n<blockquote>\r\n<p class=\"\">The list can be endless, here\u2019s the thing \ud83d\udc49you can create any design token and structure that you can imagen. <em>You set the limit here.<\/em><\/p>\r\n<\/blockquote>\r\n<h2>Pros<\/h2>\r\n<ul class=\"\" style=\"padding: 0px 0px 16px 40px;\">\r\n<li>The fastest way to get design tokens out to code (JSON)<\/li>\r\n<li>Just learn the basics, and you\u2019re already producing value as a designer, helping your team streamline the process of design token usage<\/li>\r\n<\/ul>\r\n<h2 class=\"\">Cons<\/h2>\r\n<ul class=\"\" style=\"padding: 0px 0px 16px 40px;\">\r\n<li>Will <strong>not be auto-translated also into SCSS, iOS, and Android<\/strong> since you\u2019re not structuring this for our built-in Style Dictionary export<\/li>\r\n<\/ul>\r\n<h3 class=\"\">Ask yourself this essential question<\/h3>\r\n<p class=\"\">If you were to build a <strong>UI kit for your team<\/strong> or even a kit that you would want to sell on say Gumroad to other designers, how would you want to have it structured?<\/p>\r\n<figure id=\"attachment_1435\" aria-describedby=\"caption-attachment-1435\" style=\"width: 1864px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/mui-tokens.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1435\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/mui-tokens.png\" alt=\"\" width=\"1864\" height=\"1158\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/mui-tokens.png 1864w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/mui-tokens-300x186.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/mui-tokens-1024x636.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/mui-tokens-768x477.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/mui-tokens-1536x954.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/mui-tokens-250x155.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/mui-tokens-550x342.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/mui-tokens-800x497.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/mui-tokens-290x180.png 290w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/mui-tokens-483x300.png 483w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/mui-tokens-805x500.png 805w\" sizes=\"auto, (max-width: 1864px) 100vw, 1864px\" \/><\/a><figcaption id=\"caption-attachment-1435\" class=\"wp-caption-text\">Our MUI demo has been setup to follow a part of the exact same structure that you\u2019ll find in their <a href=\"https:\/\/material-ui.com\/customization\/default-theme\/\" target=\"_blank\" rel=\"noopener\">theming file<\/a><\/figcaption><\/figure>\r\n<h2 class=\"\">Level 2 \u2014 Following a set structure<\/h2>\r\n<p class=\"\">In this example we\u2019re going to take it up a notch. We have now learned the basic controls of our game, how the game works. Now we want to do things in a certain way that gives us a certain output. In this case, let\u2019s say your team uses the extremely popular React component library <a href=\"https:\/\/material-ui.com\">Material-UI<\/a>.<\/p>\r\n<p class=\"\">Material-UI has something called theming. Let&#8217;s use their words here, they have nailed the description:<\/p>\r\n<blockquote class=\"wp-block-quote\">\r\n<p>\u201dCustomize Material-UI with your theme. You can change the colors, the typography and much more.\u201d<\/p>\r\n<\/blockquote>\r\n<p class=\"\">Wow, that sounds spectacular you say. It is. Even more, how about you tell your team that you can set up the <strong>entire theming structure<\/strong> (and update all the styles) directly from your design application? That should make them happy.<\/p>\r\n<p>You will never again hear things like:<\/p>\r\n<ul class=\"\" style=\"padding: 0px 0px 16px 40px;\">\r\n<li>\u201dThat takes far too much time, we don\u2019t have that\u201d<\/li>\r\n<li>\u201dWhaaaat are you talking about, that font looks correct to me\u201d<\/li>\r\n<li>\u201dAdding all that spacing and padding will break everything man, everything\u201d<\/li>\r\n<\/ul>\r\n<h2 class=\"\">Pros<\/h2>\r\n<ul class=\"\" style=\"padding: 0px 0px 16px 40px;\">\r\n<li>You can set up entire theming structures directly from your design app<\/li>\r\n<li>Update all the styles from one place<\/li>\r\n<li>Great for creating multiple themes fast<\/li>\r\n<li>Using our built-in NPM export you streamline the delivery of the design tokens<\/li>\r\n<\/ul>\r\n<h2>Cons<\/h2>\r\n<ul class=\"\" style=\"padding: 0px 0px 16px 40px;\">\r\n<li>Higher learning curve, you need to structure this 1:1 with how the theming is structured in code<\/li>\r\n<li>It can be really hard to understand the exact \u201dhow\u201d the theme is set up and structured \ud83d\udc49 Do let your developers help you<\/li>\r\n<\/ul>\r\n<h2 class=\"\">Level 3 \u2014 Style Dictionary magic<\/h2>\r\n<p class=\"\">You have now reached the final level and are ready to beat the game like a boss. If you really want to experience the true power of working with Stratos Tokens you will need to get to this level. It needs to be experienced.<\/p>\r\n<p class=\"\">Actually, in many ways level 3 is like level 2. You need to follow a strict set of rules but in many ways you also have a lot of freedom. Freedom is of course wonderful, but it demands more of you.<\/p>\r\n<p class=\"\">The way I learned Style Dictionary was to study the many <a href=\"https:\/\/github.com\/amzn\/style-dictionary\/tree\/master\/examples\">example projects<\/a> they have published on their Github. By reverse engineering the <a href=\"https:\/\/github.com\/amzn\/style-dictionary\/tree\/master\/examples\/advanced\/create-react-app\">React app<\/a> I created this, a true 1:1 with how the app is setup:<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"wp-block-image\">\r\n<p class=\"mod-reset\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/style-demo.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1414 size-full\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/style-demo.png\" alt=\"\" width=\"1864\" height=\"1158\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/style-demo.png 1864w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/style-demo-300x186.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/style-demo-1024x636.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/style-demo-768x477.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/style-demo-1536x954.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/style-demo-250x155.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/style-demo-550x342.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/style-demo-800x497.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/style-demo-290x180.png 290w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/style-demo-483x300.png 483w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/style-demo-805x500.png 805w\" sizes=\"auto, (max-width: 1864px) 100vw, 1864px\" \/><\/a><\/p>\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=\"\">You can download this from our <a href=\"https:\/\/marketplace.sketch2react.io\/product\/stratos-styling-react-demo\/\">marketplace<\/a> it&#8217;s 100% free.<\/p>\r\n<h2 class=\"\">Pros<\/h2>\r\n<ul class=\"\" style=\"padding: 0px 0px 16px 40px;\">\r\n<li>Style once use everywhere (it\u2019s actually true)<\/li>\r\n<li>Exports by default SCSS, iOS and Android<\/li>\r\n<li>Can be setup to export and translate into many other formats<\/li>\r\n<\/ul>\r\n<h2 class=\"\">Cons<\/h2>\r\n<ul class=\"\" style=\"padding: 0px 0px 16px 40px;\">\r\n<li>Requires more setup<\/li>\r\n<li>Requires a really structured designer mind \ud83d\ude3a<\/li>\r\n<\/ul>\r\n<h2 class=\"\">Don\u2019t forget to talk<\/h2>\r\n<p class=\"\">Setting up design tokens<strong> is not something you do by yourself<\/strong>. It\u2019s a team effort. You have so many dependencies to take into account, but we think once you have agreed upon a structure you will have a very powerful way of organizing, updating and creating design tokens straight from inside the very same environment where the design decisions are made.<\/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<p id=\"db56\" class=\"hx hy fx hz b ia ib ic id ie if ig ih ii ij ik il im in io ip iq ir is it iu fi cr\" data-selectable-paragraph=\"\">That\u2019s it, have a great weekend and don\u2019t forget to download our <a href=\"https:\/\/marketplace.sketch2react.io\/product\/stratos-tokens-demo\/\" target=\"_blank\" rel=\"noopener\">free demo of Stratos Tokens 2021<\/a> available both for macOS and Windows \ud83e\udd16<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n","protected":false},"excerpt":{"rendered":"<p>We in Team Sketch2React believe in empowering designers with choice, so you will always have the ability to choose for yourself. Basically, it comes down too answering these questions: Do you design for cross-platform products? (iOS, Android, Web, macOS, Windows) Do you use something like Material UI for React? (Web) Do you just want to&hellip;&nbsp;<a href=\"https:\/\/sketch2react.io\/blog\/the-different-levels-of-design-token-designing\/\" class=\"\" rel=\"bookmark\">Read More &raquo;<span class=\"screen-reader-text\">The different levels of design token designing<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":1416,"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":[168,166],"tags":[174,187,196,197,138,165,195,191],"class_list":["post-1417","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-miscellaneous","category-tutorials","tag-design-tokens","tag-ios","tag-json","tag-scss","tag-stratos-tokens","tag-style-dictionary","tag-theming","tag-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>The different levels of design token designing | Sketch2React Blog<\/title>\n<meta name=\"description\" content=\"Let&#039;s talk about all the different ways that you can setup design tokens with Stratos Tokens\" \/>\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\/the-different-levels-of-design-token-designing\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The different levels of design token designing - Sketch2React Blog\" \/>\n<meta property=\"og:description\" content=\"Let&#039;s talk about all the different ways that you can setup design tokens with Stratos Tokens\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sketch2react.io\/blog\/the-different-levels-of-design-token-designing\/\" \/>\n<meta property=\"og:site_name\" content=\"Sketch2React Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-05-21T07:54:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-05-21T13:02:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/levels-design-tokens-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"3840\" \/>\n\t<meta property=\"og:image:height\" content=\"2160\" \/>\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=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/sketch2react.io\/blog\/the-different-levels-of-design-token-designing\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/the-different-levels-of-design-token-designing\/\"},\"author\":{\"name\":\"Juan Maguid\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e\"},\"headline\":\"The different levels of design token designing\",\"datePublished\":\"2021-05-21T07:54:43+00:00\",\"dateModified\":\"2021-05-21T13:02:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/the-different-levels-of-design-token-designing\/\"},\"wordCount\":903,\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/the-different-levels-of-design-token-designing\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/levels-design-tokens-1.png\",\"keywords\":[\"Design tokens\",\"iOS\",\"JSON\",\"SCSS\",\"Stratos Tokens\",\"Style Dictionary\",\"Theming\",\"Tutorials\"],\"articleSection\":[\"Miscellaneous\",\"Tutorials\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sketch2react.io\/blog\/the-different-levels-of-design-token-designing\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/the-different-levels-of-design-token-designing\/\",\"name\":\"The different levels of design token designing - Sketch2React Blog\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/the-different-levels-of-design-token-designing\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/the-different-levels-of-design-token-designing\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/levels-design-tokens-1.png\",\"datePublished\":\"2021-05-21T07:54:43+00:00\",\"dateModified\":\"2021-05-21T13:02:34+00:00\",\"description\":\"Let's talk about all the different ways that you can setup design tokens with Stratos Tokens\",\"breadcrumb\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/the-different-levels-of-design-token-designing\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sketch2react.io\/blog\/the-different-levels-of-design-token-designing\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/the-different-levels-of-design-token-designing\/#primaryimage\",\"url\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/levels-design-tokens-1.png\",\"contentUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/levels-design-tokens-1.png\",\"width\":3840,\"height\":2160},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sketch2react.io\/blog\/the-different-levels-of-design-token-designing\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sketch2react.io\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The different levels of design token designing\"}]},{\"@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":"The different levels of design token designing | Sketch2React Blog","description":"Let's talk about all the different ways that you can setup design tokens with Stratos Tokens","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\/the-different-levels-of-design-token-designing\/","og_locale":"en_US","og_type":"article","og_title":"The different levels of design token designing - Sketch2React Blog","og_description":"Let's talk about all the different ways that you can setup design tokens with Stratos Tokens","og_url":"https:\/\/sketch2react.io\/blog\/the-different-levels-of-design-token-designing\/","og_site_name":"Sketch2React Blog","article_published_time":"2021-05-21T07:54:43+00:00","article_modified_time":"2021-05-21T13:02:34+00:00","og_image":[{"width":3840,"height":2160,"url":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/levels-design-tokens-1.png","type":"image\/png"}],"author":"Juan Maguid","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Juan Maguid","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sketch2react.io\/blog\/the-different-levels-of-design-token-designing\/#article","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/the-different-levels-of-design-token-designing\/"},"author":{"name":"Juan Maguid","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e"},"headline":"The different levels of design token designing","datePublished":"2021-05-21T07:54:43+00:00","dateModified":"2021-05-21T13:02:34+00:00","mainEntityOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/the-different-levels-of-design-token-designing\/"},"wordCount":903,"publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/the-different-levels-of-design-token-designing\/#primaryimage"},"thumbnailUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/levels-design-tokens-1.png","keywords":["Design tokens","iOS","JSON","SCSS","Stratos Tokens","Style Dictionary","Theming","Tutorials"],"articleSection":["Miscellaneous","Tutorials"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/sketch2react.io\/blog\/the-different-levels-of-design-token-designing\/","url":"https:\/\/sketch2react.io\/blog\/the-different-levels-of-design-token-designing\/","name":"The different levels of design token designing - Sketch2React Blog","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/the-different-levels-of-design-token-designing\/#primaryimage"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/the-different-levels-of-design-token-designing\/#primaryimage"},"thumbnailUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/levels-design-tokens-1.png","datePublished":"2021-05-21T07:54:43+00:00","dateModified":"2021-05-21T13:02:34+00:00","description":"Let's talk about all the different ways that you can setup design tokens with Stratos Tokens","breadcrumb":{"@id":"https:\/\/sketch2react.io\/blog\/the-different-levels-of-design-token-designing\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sketch2react.io\/blog\/the-different-levels-of-design-token-designing\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/the-different-levels-of-design-token-designing\/#primaryimage","url":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/levels-design-tokens-1.png","contentUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/05\/levels-design-tokens-1.png","width":3840,"height":2160},{"@type":"BreadcrumbList","@id":"https:\/\/sketch2react.io\/blog\/the-different-levels-of-design-token-designing\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sketch2react.io\/blog\/"},{"@type":"ListItem","position":2,"name":"The different levels of design token designing"}]},{"@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\/1417","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=1417"}],"version-history":[{"count":10,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/1417\/revisions"}],"predecessor-version":[{"id":1441,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/1417\/revisions\/1441"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media\/1416"}],"wp:attachment":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media?parent=1417"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/categories?post=1417"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/tags?post=1417"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}