{"id":3267,"date":"2020-02-06T10:24:07","date_gmt":"2020-02-06T09:24:07","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=3267"},"modified":"2020-03-05T11:39:21","modified_gmt":"2020-03-05T10:39:21","slug":"design-tokens-and-cross-platform-coherence","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/design-tokens-and-cross-platform-coherence\/","title":{"rendered":"Design Tokens and Cross Platform Coherence &#8211; Part 1"},"content":{"rendered":"\n<p>\nYou did it! You have exceeded one million <span id=\"urn:enhancement-f672efd7\" class=\"textannotation disambiguated wl-thing\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/user_computing\">users<\/span> and your <span id=\"urn:enhancement-34d27e69\" class=\"textannotation disambiguated wl-thing\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/team\">team<\/span> has grown. Now there are enough teammates to directly and dedicatedly pursue the development of the web platform, smartphone and tablet apps, and smart TV apps, but also to reorganise the workflows to proceed independently for individual features.<\/p>\n\n\n\n<p><strong>When <span id=\"urn:enhancement-d1eee600\" class=\"textannotation disambiguated wl-thing\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/team\">teams<\/span> grow<\/strong>, it is not uncommon for single units to take small steps independently. Over the long haul, those steps might end up invalidating the initial cohesion. Developers know how easy it is to yield to the temptation of copy-and-paste from one codebase to another just to discover, months later, that the original code has changed and it wasn&#8217;t updated in any occurrences. Like single pieces of code, <strong>the style elements that contribute to defining brand identity end up fraying<\/strong>.<\/p>\n\n\n\n<p>The <span id=\"urn:enhancement-6aa0a236\" class=\"textannotation disambiguated wl-thing\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/digital_data\">digital<\/span> world has contributed to multiplying possible touchpoints with <span id=\"urn:enhancement-a351eebb\" class=\"textannotation disambiguated wl-thing\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/user_computing\">users<\/span> and customers, without offering the chance of managing the basic elements of the style in a unified way for all those touchpoints. For example, just think about the diverse ways in which the three main <span id=\"urn:enhancement-21d83627\" class=\"textannotation disambiguated wl-thing\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/digital_data\">digital<\/span> &#8220;platforms&#8221; (web, iOS, and <span id=\"urn:enhancement-3096c24f\" class=\"textannotation disambiguated wl-creative-work\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/android_operating_system\">Android<\/span>) allow you to define the same colour:<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/elleuca\/1612f93d61bace6b8e43f9debfa3e532.js\"><\/script>\n\n\n\n<p>Fortunately, there are several <span id=\"urn:enhancement-8acf80b9\" class=\"textannotation disambiguated wl-thing\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/tool\">tools<\/span> that allow you to keep this potential uncontrolled evolution under direction. It is, therefore, possible to define a coherent and common set of design decisions and rules upstream (the design system) and use these <span id=\"urn:enhancement-96825462\" class=\"textannotation disambiguated wl-thing\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/tool\">tools<\/span> to export these rules to all the platforms you need.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Design Systems and Design Tokens<\/h2>\n\n\n\n<p>Brand identity is not just a notion for marketing but is also the starting point for consistent <span id=\"urn:enhancement-3109aef\" class=\"textannotation disambiguated wl-thing\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/user_computing\">user<\/span> <span id=\"urn:enhancement-e45bdf51\" class=\"textannotation disambiguated wl-thing\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/experience\">experience<\/span> across different channels. In fact, in addition to more immediate benefits such as confidence and learnability, <strong>consistency in <span id=\"urn:enhancement-beebfc5e\" class=\"textannotation disambiguated wl-thing\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/user_experience\">UX<\/span> also affects the trust and credibility of the brand<\/strong>. Customers can recognise as robust and good a company that offers them consistent <span id=\"urn:enhancement-fae804c2\" class=\"textannotation disambiguated wl-thing\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/user_experience\">UX<\/span> across channels.<\/p>\n\n\n\n<p>To facilitate the definition and communication to the various stakeholders of <span id=\"urn:enhancement-a7069f2a\" class=\"textannotation disambiguated wl-thing\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/user_experience\">UX<\/span> and <span id=\"urn:enhancement-4d1e071e\" class=\"textannotation disambiguated wl-thing\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/visual_system\">visual<\/span> guidelines, in recent years <span id=\"urn:enhancement-1e72e479\" class=\"textannotation disambiguated wl-thing\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/designer\">designers<\/span> and <span id=\"urn:enhancement-67809abf\" class=\"textannotation disambiguated wl-thing\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/user_experience\">UX<\/span> experts have relied on a <span id=\"urn:enhancement-a25a38d3\" class=\"textannotation disambiguated wl-thing\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/tool\">tool<\/span> that takes the name of &#8220;design system&#8221;.<\/p>\n\n\n\n<p>A <strong>design system<\/strong> is a collection of <span id=\"urn:enhancement-2873992f\" class=\"textannotation disambiguated wl-thing\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/reusability\">reusable<\/span> <span id=\"urn:enhancement-b79654a8\" class=\"textannotation disambiguated wl-thing\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/component-based_software_engineering\">components<\/span> that can be assembled together to build any number of <span id=\"urn:enhancement-428792ed\" class=\"textannotation disambiguated wl-thing\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/application_software\">applications<\/span>. Examples of design systems include Material <span id=\"urn:enhancement-652e7507\" class=\"textannotation disambiguated wl-thing\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/design\">Design<\/span> from Google, ADG from Atlassian and Lightning <span id=\"urn:enhancement-9a48e68c\" class=\"textannotation disambiguated wl-thing\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/design\">Design<\/span> <span id=\"urn:enhancement-86876a6b\" class=\"textannotation disambiguated wl-thing\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/system\">System<\/span> from Salesforce. <span id=\"urn:enhancement-9fedf791\" class=\"textannotation disambiguated wl-thing\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/design\">Design<\/span> systems may help to enhance brand coherence, to fit <span id=\"urn:enhancement-ba676fe7\" class=\"textannotation disambiguated wl-thing\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/user_computing\">user<\/span> <span id=\"urn:enhancement-3bf8f23a\" class=\"textannotation disambiguated wl-thing\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/experience\">experience<\/span> and to work on a shared library of patterns.<\/p>\n\n\n\n<p>Each element of the design system can be broken down into increasingly independent elements until it reaches the &#8220;atomic&#8221; elements. In this attempt to engineer <span id=\"urn:enhancement-12438167\" class=\"textannotation disambiguated wl-thing\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/visual_system\">visual<\/span> <span id=\"urn:enhancement-8777201f\" class=\"textannotation disambiguated wl-thing\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/component-based_software_engineering\">components<\/span> and <span id=\"urn:enhancement-ff206a06\" class=\"textannotation disambiguated wl-thing\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/user_experience\">UX<\/span>, those entities that store <span id=\"urn:enhancement-97450776\" class=\"textannotation disambiguated wl-thing\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/visual_system\">visual<\/span> design attributes are defined as &#8220;<strong>design tokens<\/strong>&#8220;. Those tokens can and must be defined in a <span id=\"urn:enhancement-533fcb02\" class=\"textannotation disambiguated wl-thing\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/cross-platform\">platform-independent<\/span> format that is readable by both humans and machines.<\/p>\n\n\n\n<p><span id=\"urn:enhancement-c6241f31\" class=\"textannotation disambiguated wl-thing\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/design\">Design<\/span> tokens should be able to <strong>store all the characters that distinguish the <span id=\"urn:enhancement-b611e96f\" class=\"textannotation disambiguated wl-thing\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/user_experience\">UX<\/span>: colours, typographic elements, <span id=\"urn:enhancement-c5456901\" class=\"textannotation disambiguated wl-thing\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/iconography\">iconographic<\/span> elements, movements and animations, dimensions and elevation<\/strong>. So a good design token <span id=\"urn:enhancement-d7943d97\" class=\"textannotation disambiguated wl-thing\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/tool\">tool<\/span> should offer a system that can be agnostic, structured and relational.<\/p>\n\n\n\n<p>At Codemotion <span id=\"urn:enhancement-4103e340\" class=\"textannotation disambiguated wl-place\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/rome\">Rome<\/span> 2019, Danny Banks shared some cues about how to effectively define and manage design tokens to build consistent <span id=\"urn:enhancement-e8dabfcb\" class=\"textannotation disambiguated wl-thing\" itemid=\"http:\/\/data.wordlift.io\/wl01770\/entity\/cross-platform\">cross-platform<\/span> interfaces. We\u2019ll show some in the next article of this series. Stay tuned!<\/p>\n\n\n","protected":false},"excerpt":{"rendered":"<p>To facilitate the UX definition and its communication to stakeholders, designers usually rely on design systems, made up by design tokens.<\/p>\n","protected":false},"author":30,"featured_media":3268,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":2,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_uag_custom_page_level_css":"","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[76],"tags":[4,4257],"collections":[],"class_list":{"0":"post-3267","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-design-ux","8":"tag-codemotion-rome","9":"tag-user-experience","10":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.9 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Design Tokens and Cross Platform Coherence - Part 1 - Codemotion Magazine<\/title>\n<meta name=\"description\" content=\"To facilitate the UX definition and its communication to stakeholders, designers usually rely on design systems, made up by design 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:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/design-tokens-and-cross-platform-coherence\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Design Tokens and Cross Platform Coherence - Part 1\" \/>\n<meta property=\"og:description\" content=\"To facilitate the UX definition and its communication to stakeholders, designers usually rely on design systems, made up by design tokens.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/design-tokens-and-cross-platform-coherence\/\" \/>\n<meta property=\"og:site_name\" content=\"Codemotion Magazine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Codemotion.Italy\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-02-06T09:24:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-03-05T10:39:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/02\/RC_7772.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1013\" \/>\n\t<meta property=\"og:image:height\" content=\"675\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Luca Ferretti\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:site\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Luca Ferretti\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/design-tokens-and-cross-platform-coherence\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/design-tokens-and-cross-platform-coherence\/\"},\"author\":{\"name\":\"Luca Ferretti\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/00344cc4e23bb0758378ab701b57f1a1\"},\"headline\":\"Design Tokens and Cross Platform Coherence &#8211; Part 1\",\"datePublished\":\"2020-02-06T09:24:07+00:00\",\"dateModified\":\"2020-03-05T10:39:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/design-tokens-and-cross-platform-coherence\/\"},\"wordCount\":546,\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/design-tokens-and-cross-platform-coherence\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/02\/RC_7772.jpg\",\"keywords\":[\"Codemotion Rome\",\"User Experience\"],\"articleSection\":[\"Design\/UX\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/design-tokens-and-cross-platform-coherence\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/design-tokens-and-cross-platform-coherence\/\",\"name\":\"Design Tokens and Cross Platform Coherence - Part 1 - Codemotion Magazine\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/design-tokens-and-cross-platform-coherence\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/design-tokens-and-cross-platform-coherence\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/02\/RC_7772.jpg\",\"datePublished\":\"2020-02-06T09:24:07+00:00\",\"dateModified\":\"2020-03-05T10:39:21+00:00\",\"description\":\"To facilitate the UX definition and its communication to stakeholders, designers usually rely on design systems, made up by design tokens.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/design-tokens-and-cross-platform-coherence\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/design-tokens-and-cross-platform-coherence\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/design-tokens-and-cross-platform-coherence\/#primaryimage\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/02\/RC_7772.jpg\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/02\/RC_7772.jpg\",\"width\":1013,\"height\":675,\"caption\":\"danny banks amazon\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/design-tokens-and-cross-platform-coherence\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Design\/UX\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Design Tokens and Cross Platform Coherence &#8211; Part 1\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"name\":\"Codemotion Magazine\",\"description\":\"We code the future. Together\",\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\",\"name\":\"Codemotion\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"width\":225,\"height\":225,\"caption\":\"Codemotion\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Codemotion.Italy\/\",\"https:\/\/x.com\/CodemotionIT\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/00344cc4e23bb0758378ab701b57f1a1\",\"name\":\"Luca Ferretti\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a7c16ad1483e63c6ae25d1370bfab6252a285d959ed68a5e385f98e66f0b420a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a7c16ad1483e63c6ae25d1370bfab6252a285d959ed68a5e385f98e66f0b420a?s=96&d=mm&r=g\",\"caption\":\"Luca Ferretti\"},\"description\":\"Affezionato al caro vecchio C, passato non troppo recentemente alle pi\u00c3\u00b9 arzigogolate frontiere del Web, Luca Ferretti ha da poco scelto il suo motto su Twitter: I break stuff, I build relationships. \u00c3\u02c6 cos\u00c3\u00ac, tra una ispezione del DOM e una apparizione nella stanza accanto per discutere con il team del frontend di un pixel messo storto, tra una traduzione di Ubuntu e un rebuild dei sorgenti di GNOME (rigorosamente di notte), che trascorre le sue giornate nell'incessante ricerca della perfezione ;-)\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/author\/luca-ferretti\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Design Tokens and Cross Platform Coherence - Part 1 - Codemotion Magazine","description":"To facilitate the UX definition and its communication to stakeholders, designers usually rely on design systems, made up by design 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:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/design-tokens-and-cross-platform-coherence\/","og_locale":"en_US","og_type":"article","og_title":"Design Tokens and Cross Platform Coherence - Part 1","og_description":"To facilitate the UX definition and its communication to stakeholders, designers usually rely on design systems, made up by design tokens.","og_url":"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/design-tokens-and-cross-platform-coherence\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2020-02-06T09:24:07+00:00","article_modified_time":"2020-03-05T10:39:21+00:00","og_image":[{"width":1013,"height":675,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/02\/RC_7772.jpg","type":"image\/jpeg"}],"author":"Luca Ferretti","twitter_card":"summary_large_image","twitter_creator":"@CodemotionIT","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"Luca Ferretti","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/design-tokens-and-cross-platform-coherence\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/design-tokens-and-cross-platform-coherence\/"},"author":{"name":"Luca Ferretti","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/00344cc4e23bb0758378ab701b57f1a1"},"headline":"Design Tokens and Cross Platform Coherence &#8211; Part 1","datePublished":"2020-02-06T09:24:07+00:00","dateModified":"2020-03-05T10:39:21+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/design-tokens-and-cross-platform-coherence\/"},"wordCount":546,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/design-tokens-and-cross-platform-coherence\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/02\/RC_7772.jpg","keywords":["Codemotion Rome","User Experience"],"articleSection":["Design\/UX"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/design-tokens-and-cross-platform-coherence\/","url":"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/design-tokens-and-cross-platform-coherence\/","name":"Design Tokens and Cross Platform Coherence - Part 1 - Codemotion Magazine","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/design-tokens-and-cross-platform-coherence\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/design-tokens-and-cross-platform-coherence\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/02\/RC_7772.jpg","datePublished":"2020-02-06T09:24:07+00:00","dateModified":"2020-03-05T10:39:21+00:00","description":"To facilitate the UX definition and its communication to stakeholders, designers usually rely on design systems, made up by design tokens.","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/design-tokens-and-cross-platform-coherence\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/design-tokens-and-cross-platform-coherence\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/design-tokens-and-cross-platform-coherence\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/02\/RC_7772.jpg","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/02\/RC_7772.jpg","width":1013,"height":675,"caption":"danny banks amazon"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/design-tokens-and-cross-platform-coherence\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codemotion.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"Frontend","item":"https:\/\/www.codemotion.com\/magazine\/frontend\/"},{"@type":"ListItem","position":3,"name":"Design\/UX","item":"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/"},{"@type":"ListItem","position":4,"name":"Design Tokens and Cross Platform Coherence &#8211; Part 1"}]},{"@type":"WebSite","@id":"https:\/\/www.codemotion.com\/magazine\/#website","url":"https:\/\/www.codemotion.com\/magazine\/","name":"Codemotion Magazine","description":"We code the future. Together","publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codemotion.com\/magazine\/#organization","name":"Codemotion","url":"https:\/\/www.codemotion.com\/magazine\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","width":225,"height":225,"caption":"Codemotion"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Codemotion.Italy\/","https:\/\/x.com\/CodemotionIT"]},{"@type":"Person","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/00344cc4e23bb0758378ab701b57f1a1","name":"Luca Ferretti","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a7c16ad1483e63c6ae25d1370bfab6252a285d959ed68a5e385f98e66f0b420a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a7c16ad1483e63c6ae25d1370bfab6252a285d959ed68a5e385f98e66f0b420a?s=96&d=mm&r=g","caption":"Luca Ferretti"},"description":"Affezionato al caro vecchio C, passato non troppo recentemente alle pi\u00c3\u00b9 arzigogolate frontiere del Web, Luca Ferretti ha da poco scelto il suo motto su Twitter: I break stuff, I build relationships. \u00c3\u02c6 cos\u00c3\u00ac, tra una ispezione del DOM e una apparizione nella stanza accanto per discutere con il team del frontend di un pixel messo storto, tra una traduzione di Ubuntu e un rebuild dei sorgenti di GNOME (rigorosamente di notte), che trascorre le sue giornate nell'incessante ricerca della perfezione ;-)","url":"https:\/\/www.codemotion.com\/magazine\/author\/luca-ferretti\/"}]}},"featured_image_src":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/02\/RC_7772-600x400.jpg","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/02\/RC_7772-600x600.jpg","author_info":{"display_name":"Luca Ferretti","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/luca-ferretti\/"},"uagb_featured_image_src":{"full":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/02\/RC_7772.jpg",1013,675,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/02\/RC_7772-150x150.jpg",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/02\/RC_7772-300x200.jpg",300,200,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/02\/RC_7772-768x512.jpg",768,512,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/02\/RC_7772.jpg",1013,675,false],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/02\/RC_7772.jpg",1013,675,false],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/02\/RC_7772.jpg",1013,675,false],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/02\/RC_7772.jpg",100,67,false],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/02\/RC_7772-180x128.jpg",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/02\/RC_7772-896x504.jpg",896,504,true],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/02\/RC_7772-400x225.jpg",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/02\/RC_7772-600x400.jpg",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2020\/02\/RC_7772-600x600.jpg",600,600,true]},"uagb_author_info":{"display_name":"Luca Ferretti","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/luca-ferretti\/"},"uagb_comment_info":0,"uagb_excerpt":"To facilitate the UX definition and its communication to stakeholders, designers usually rely on design systems, made up by design tokens.","lang":"en","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/3267","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/users\/30"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=3267"}],"version-history":[{"count":3,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/3267\/revisions"}],"predecessor-version":[{"id":3546,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/3267\/revisions\/3546"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/3268"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=3267"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=3267"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=3267"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=3267"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}