{"id":36356,"date":"2024-09-05T05:09:21","date_gmt":"2024-09-05T12:09:21","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=36356"},"modified":"2024-09-05T05:09:25","modified_gmt":"2024-09-05T12:09:25","slug":"what-are-design-tokens","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/what-are-design-tokens\/","title":{"rendered":"What Are Design Tokens?"},"content":{"rendered":"\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/R1b3Wl18gWDOAxtTc5I7G8j5iruwtBna9C1VbuiKmowoxweN5N-1bOkMhXMYvZuNbv2ubLUUPACvaM7w5k31BRRprp6oRfxNWCpWpcl4qhaGDklpNODVf9-WYD5QZnqTvTsHKXplsZYfafvnPAtPc5Q\" alt=\"design tokens - what are they?\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>The <a href=\"https:\/\/www.uxpin.com\/create-design-system-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">design system<\/a> revolution of the last decade has brought with it all sorts of tools and strategies to enhance product development workflows.<\/p>\n\n\n\n<p>Design tokens are one of those tools many design systems, including Google&#8217;s <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/an-introduction-to-interactions-with-material-design\/#h-material-design-3\" target=\"_blank\" rel=\"noreferrer noopener\">Material Design 3<\/a> and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-mui\/\" target=\"_blank\" rel=\"noreferrer noopener\">MUI<\/a>, have adopted to make UI elements easier to implement, manage, and update.<\/p>\n\n\n\n<p><em>Announcement: UXPin&#8217;s design tokens for colors are in beta! Sign up to get notified when they will be officially released: <a href=\"https:\/\/www.uxpin.com\/design-tokens\" target=\"_blank\" rel=\"noreferrer noopener\">Design tokens in UXPin<\/a>.<\/em><\/p>\n\n\n\n<p>Optimize your design operations across the entire organizations. Use UXPin Merge, a revolutionary design technology for helping teams use React components in design and development. <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Learn more about Merge<\/a>.<\/p>\n\n\n\n<section class=\"discover-merge\">\n    <div class=\"discover-merge__container\">\n        <div class=\"discover-merge__left\">\n            <p class=\"discover-merge__heading\">Reach a new level of prototyping<\/p>\n            <p class=\"discover-merge__text\">Design with interactive components coming from your team&#8217;s design system.<\/p>\n            <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noopener\">\n                <button class=\"discover-merge__button\">Discover UXPin Merge<\/button>\n            <\/a>\n        <\/div>\n        <div>\n            <img decoding=\"async\" src=\"https:\/\/uxpin.com\/studio\/wp-content\/themes\/uxpin-juggernaut\/img\/cta-banner-merge.png\" class=\"discover-merge__image\" alt=\"\">\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n.discover-merge {\n    margin: 40px 8px;\n}\n\n.discover-merge__container {\n    display: flex;\n    max-width: 690px;\n    height: 200px;\n    padding: 20px;\n    padding-left: 24px;\n    border-radius: 4px;\n    background-color: black;\n    box-shadow: 10px 10px #9999ff;\n    align-items: center;\n    justify-content: space-between;\n}\n\n.discover-merge__left {\n    width: 50%;\n}\n\n.discover-merge__left p {\n    margin: 10px 0px !important;\n    color: white !important;\n    font-size: 18px !important;\n}\n\n.discover-merge__heading {\n    font-weight: bold !important;\n    color: white !important;\n    font-size: 18px !important;\n}\n\n.discover-merge__text {\n    margin: 0 !important;\n    line-height: 22px !important;\n}\n\n.discover-merge__button {\n    width: 174px;\n    height: 44px;\n    margin: 10px 0px;\n    border: none;\n    border-radius: 2px;\n    background: white;\n    color: black;\n    font-size: 16px;\n    text-align: center;\n}\n\n.discover-merge__button:hover {\n    cursor: pointer;\n}\n\n.discover-merge__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -19px;\n}\n\n@media (max-width: 760px) {\n    .discover-merge__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}\n\n@media (max-width: 500px) {\n    .discover-merge__container {\n        flex-direction: column;\n    }\n\n    .discover-merge__left {\n        width: 100%;\n        align-items: normal;\n    }\n}\n\n<\/style>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-is-a-design-token\">What is a Design Token?<\/h2>\n\n\n\n<p>Design tokens contain UI data like colors, fonts, spacing, animations, assets, etc. for styling and building <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/cross-platform-experience\/\" target=\"_blank\" rel=\"noreferrer noopener\">cross-platform user interfaces<\/a>. Instead of hard-coding static values for every operating system, a design token contains multiple formats, allowing front-end developers to use the same variable, whether they&#8217;re building an <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ios-vs-andoid-ui-design-for-mobile\/\" target=\"_blank\" rel=\"noreferrer noopener\">iOS or Android<\/a>, and even <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/mobile-app-vs-web-app\/\" target=\"_blank\" rel=\"noreferrer noopener\">web application<\/a>.<\/p>\n\n\n\n<p>One of the challenges with cross-platform product development is that operating systems use different style properties and formats. For example, UXPin&#8217;s website uses <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/website-checklist-for-web-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">yellow for CTAs<\/a>. The hex code for this yellow is #FCC821, which you can represent in several ways:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>RGB (CSS): rgb(252, 200, 33)<\/li>\n\n\n\n<li>RGBA: rgba(252, 200, 33, 1)<\/li>\n\n\n\n<li>Octal (Android\/Flutter): 77144041<\/li>\n<\/ul>\n\n\n\n<p>Instead of using these static properties, designers and engineers reference a token like <em>&#8220;uxpin.cta.primary,&#8221;<\/em> representing all four color codes. The color will always be the same regardless of the platform or <a href=\"https:\/\/www.uxpin.com\/studio\/collaboration-2\/coding-languages-to-know-in-2020\/\" target=\"_blank\" rel=\"noreferrer noopener\">programming language<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Design tokens within CSS<\/h3>\n\n\n\n<p>To implement design tokens in CSS, they are often converted into CSS variables (also known as custom properties). CSS variables allow you to define reusable values that can be applied throughout your stylesheet, making it easier to maintain and update styles consistently.<\/p>\n\n\n\n<p><strong>Example of Design Tokens as CSS Variables<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n\/* Define Design Tokens as CSS Variables *\/\n:root {\n  --color-primary: #007bff;\n  --color-secondary: #6c757d;\n  --font-size-base: 16px;\n  --font-family-base: &#039;Arial, sans-serif&#039;;\n  --spacing-small: 8px;\n  --spacing-medium: 16px;\n}\n\n\/* Applying Design Tokens in CSS *\/\nbody {\n  font-size: var(--font-size-base);\n  font-family: var(--font-family-base);\n  color: var(--color-primary);\n  padding: var(--spacing-medium);\n}\n\nbutton {\n  background-color: var(--color-primary);\n  color: var(--color-secondary);\n  padding: var(--spacing-small) var(--spacing-medium);\n}\n<\/pre><\/div>\n\n\n<p>Here&#8217;s a section you can add to your blog post about <strong>Design Tokens within CSS<\/strong>:<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Design Tokens within CSS<\/strong><\/h3>\n\n\n\n<p>Design tokens are a crucial part of modern design systems, helping to maintain consistency and scalability across digital products. When used within CSS, design tokens ensure that your styles are cohesive and easy to manage, allowing for a more efficient and streamlined development process.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>What are Design Tokens?<\/strong><\/h4>\n\n\n\n<p>Design tokens are the smallest, repeatable elements of a design system that store visual properties such as colors, typography, spacing, and shadows. They act as a bridge between design and code, providing a single source of truth that can be used across various platforms and technologies.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Using Design Tokens in CSS<\/strong><\/h4>\n\n\n\n<p>To implement design tokens in CSS, they are often converted into CSS variables (also known as custom properties). CSS variables allow you to define reusable values that can be applied throughout your stylesheet, making it easier to maintain and update styles consistently.<\/p>\n\n\n\n<p><strong>Example of Design Tokens as CSS Variables<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n\/* Define Design Tokens as CSS Variables *\/\n:root {\n  --color-primary: #007bff;\n  --color-secondary: #6c757d;\n  --font-size-base: 16px;\n  --font-family-base: &#039;Arial, sans-serif&#039;;\n  --spacing-small: 8px;\n  --spacing-medium: 16px;\n}\n\n\/* Applying Design Tokens in CSS *\/\nbody {\n  font-size: var(--font-size-base);\n  font-family: var(--font-family-base);\n  color: var(--color-primary);\n  padding: var(--spacing-medium);\n}\n\nbutton {\n  background-color: var(--color-primary);\n  color: var(--color-secondary);\n  padding: var(--spacing-small) var(--spacing-medium);\n}\n\n<\/pre><\/div>\n\n\n<p>In this example, design tokens for colors, typography, and spacing are defined as CSS variables. These tokens are then applied throughout the CSS to style elements consistently. If you need to update a style, such as changing the primary color, you only need to update the variable definition, and the change will automatically apply everywhere the token is used.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Types of Design Tokens<\/h2>\n\n\n\n<p>Organizations use these design tokens for many style properties, including <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/choose-color-pallete\/\" target=\"_blank\" rel=\"noreferrer noopener\">color palette<\/a>, size, spacing, assets, and drop shadows, to name a few. When we&#8217;re at it \u2013 here are the primary types of design tokens:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Color Tokens<\/strong>: Define the color palette used in a design system. Examples include primary colors, secondary colors, background colors, text colors, border colors, etc.\n<ul class=\"wp-block-list\">\n<li>Examples:\n<ul class=\"wp-block-list\">\n<li><code>color-primary: #007bff<\/code><\/li>\n\n\n\n<li><code>color-background: #f8f9fa<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Typography Tokens<\/strong>: Specify text-related properties. These include font families, font sizes, line heights, letter spacing, and font weights.\n<ul class=\"wp-block-list\">\n<li>Examples:\n<ul class=\"wp-block-list\">\n<li><code>font-family-body: 'Roboto', sans-serif<\/code><\/li>\n\n\n\n<li><code>font-size-heading: 24px<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Spacing Tokens<\/strong>: Govern the spacing system, including margins, paddings, and gaps. They ensure consistent spacing throughout the design.\n<ul class=\"wp-block-list\">\n<li>Examples:\n<ul class=\"wp-block-list\">\n<li><code>spacing-small: 4px<\/code><\/li>\n\n\n\n<li><code>spacing-large: 16px<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Sizing Tokens<\/strong>: Define sizes for components and elements. These can include widths, heights, and maximum and minimum sizes.\n<ul class=\"wp-block-list\">\n<li>Examples:\n<ul class=\"wp-block-list\">\n<li><code>size-button-height: 48px<\/code><\/li>\n\n\n\n<li><code>size-avatar-small: 32px<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Border Tokens<\/strong>: Specify border properties, such as width, style, and radius.\n<ul class=\"wp-block-list\">\n<li>Examples:\n<ul class=\"wp-block-list\">\n<li><code>border-width-thin: 1px<\/code><\/li>\n\n\n\n<li><code>border-radius-medium: 8px<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Shadow Tokens<\/strong>: Describe the shadow effects used in the design system, including color, offset, blur, and spread.\n<ul class=\"wp-block-list\">\n<li>Examples:\n<ul class=\"wp-block-list\">\n<li><code>shadow-small: 0 1px 2px rgba(0, 0, 0, 0.1)<\/code><\/li>\n\n\n\n<li><code>shadow-large: 0 4px 8px rgba(0, 0, 0, 0.2)<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Opacity Tokens<\/strong>: Define the opacity levels for elements.\n<ul class=\"wp-block-list\">\n<li>Examples:\n<ul class=\"wp-block-list\">\n<li><code>opacity-low: 0.3<\/code><\/li>\n\n\n\n<li><code>opacity-high: 0.9<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Breakpoints Tokens<\/strong>: Specify the breakpoints for responsive design, dictating how the design adapts to different screen sizes.\n<ul class=\"wp-block-list\">\n<li>Examples:\n<ul class=\"wp-block-list\">\n<li><code>breakpoint-mobile: 480px<\/code><\/li>\n\n\n\n<li><code>breakpoint-desktop: 1024px<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Duration Tokens<\/strong>: Govern the timing of animations and transitions.\n<ul class=\"wp-block-list\">\n<li>Examples:\n<ul class=\"wp-block-list\">\n<li><code>duration-short: 200ms<\/code><\/li>\n\n\n\n<li><code>duration-long: 600ms<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Easing Tokens<\/strong>: Define the easing functions for animations and transitions.\n<ul class=\"wp-block-list\">\n<li>Examples:\n<ul class=\"wp-block-list\">\n<li><code>easing-in-out: cubic-bezier(0.4, 0, 0.2, 1)<\/code><\/li>\n\n\n\n<li><code>easing-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55)<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-where-did-design-tokens-come-from\">Where did Design Tokens Come from?<\/h2>\n\n\n\n<p>It is said that design tokens were pioneered by Salesforce. In a 2014 article published in <a href=\"https:\/\/medium.com\/salesforce-ux\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Salesforce Designer<\/a>, Salesforce UX VP S\u00f6nke Rohde described how the company uses design tokens to apply the same design principles across multiple platforms and software.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/screens-prototyping.png\" alt=\"screens prototyping\" class=\"wp-image-35008\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/screens-prototyping.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/screens-prototyping-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p><em>&#8220;At Salesforce, we face this very challenge, and we came up with an agnostic solution: we define our design in a single location and use a system to cascade it down to all platforms. We call it our Single Source of Truth. It&#8217;s basically a set of JSON files which contain name-value pairs describing our design tokens.&#8221; excerpt from <\/em><a href=\"https:\/\/medium.com\/salesforce-ux\/living-design-system-3ab1f2280ef7\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><em>Living Design System<\/em><\/a><em> by S\u00f6nke Rohde.<\/em><\/p>\n\n\n\n<p>Instead of using static style properties, engineers reference the design token, which pulls the correct value, depending on the platform, from a JSON file. To automate this process, <a href=\"https:\/\/github.com\/salesforce-ux\/theo\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Salesforce developed Theo<\/a>\u2013<em>&#8220;an abstraction for transforming and formatting design tokens.&#8221;<\/em><\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">What is the Difference between Atomic Design and Tokens?<\/h2>\n\n\n\n<p>Atomic design and design tokens are both concepts used in <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/best-design-system-examples\/\" target=\"_blank\" rel=\"noreferrer noopener\">design systems<\/a>, but they address different aspects of design consistency and scalability.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/use-atomic-design-improve-ab-testing\/\" target=\"_blank\" rel=\"noreferrer noopener\">Atomic design<\/a> is a methodology for creating design systems developed by Brad Frost. It breaks down user interfaces into smaller, reusable components called atoms, molecules, organisms, templates, and pages (in ascending order of complexity). Atoms are the basic building blocks like <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/button-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">buttons<\/a>, <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/form-input-design-best-practices\/\" target=\"_blank\" rel=\"noreferrer noopener\">input fields<\/a>, <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/use-material-design-icons\/\" target=\"_blank\" rel=\"noreferrer noopener\">icons<\/a>, etc. Molecules are combinations of atoms, organisms are combinations of molecules, and so on.<\/p>\n\n\n\n<p>Design tokens are a set of variables that define design properties such as colors, <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/typography-in-web-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">typography<\/a>, spacing, etc., in a design system. They are abstract representations of visual design decisions. Rather than hardcoding specific values (like a hex code for a color) directly into <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/user-interface-elements-every-designer-should-know\/\" target=\"_blank\" rel=\"noreferrer noopener\">UI components<\/a>, design tokens provide a centralized way to manage and update design properties across an entire design system.<\/p>\n\n\n\n<p>Design tokens deal with the abstraction and management of design properties. They abstract design decisions into variables, allowing for easier maintenance, scalability, and consistency. They provide a single source of truth for design-related values.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">3 Design Tokens Examples<\/h2>\n\n\n\n<p>Here are three examples of design tokens for typography. These tokens help ensure that typography styles are consistent across different components and platforms.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Design Token Example #1: Font Family<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n{\n  &quot;font-family&quot;: {\n    &quot;base&quot;: &quot;Roboto, Arial, sans-serif&quot;,\n    &quot;heading&quot;: &quot;Montserrat, Arial, sans-serif&quot;,\n    &quot;monospace&quot;: &quot;&#039;Courier New&#039;, Courier, monospace&quot;\n  }\n}\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">Design Token Example #2: Font Size<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n{\n  &quot;font-size&quot;: {\n    &quot;base&quot;: &quot;16px&quot;,\n    &quot;small&quot;: &quot;14px&quot;,\n    &quot;large&quot;: &quot;24px&quot;,\n    &quot;heading&quot;: {\n      &quot;h1&quot;: &quot;32px&quot;,\n      &quot;h2&quot;: &quot;28px&quot;,\n      &quot;h3&quot;: &quot;24px&quot;\n    }\n  }\n}\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">Design Token Example #3: Line Hight<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n{\n  &quot;line-height&quot;: {\n    &quot;base&quot;: &quot;1.5&quot;,\n    &quot;tight&quot;: &quot;1.25&quot;,\n    &quot;loose&quot;: &quot;1.75&quot;,\n    &quot;heading&quot;: {\n      &quot;h1&quot;: &quot;1.2&quot;,\n      &quot;h2&quot;: &quot;1.3&quot;,\n      &quot;h3&quot;: &quot;1.4&quot;\n    }\n  }\n}\n<\/pre><\/div>\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-are-design-tokens-right-for-you\">Are Design Tokens Right for You?<\/h2>\n\n\n\n<p>Google&#8217;s <a href=\"https:\/\/m3.material.io\/foundations\/design-tokens\/overview\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Material Design 3 documentation<\/a> offers a list of scenarios where design tokens are most helpful:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>You use a <a href=\"https:\/\/www.uxpin.com\/create-design-system-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">design system<\/a> for more than one platform or product<\/li>\n\n\n\n<li>You want an easy way to maintain and update your product&#8217;s styles<\/li>\n\n\n\n<li>You plan to update your <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/product-redesign\/\" target=\"_blank\" rel=\"noreferrer noopener\">product design<\/a> or build new products and features<\/li>\n<\/ul>\n\n\n\n<p>Material Design also lists two instances where design tokens might be &#8220;less helpful:&#8221;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>You don&#8217;t plan to change your product in the next few years<\/li>\n\n\n\n<li>Your product does not have a design system<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-benefits-of-using-design-tokens\">Benefits of Using Design Tokens<\/h2>\n\n\n\n<p>We&#8217;ve identified three key benefits to using design tokens.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-1-having-a-single-source-of-truth\">1. Having a Single Source of Truth<\/h3>\n\n\n\n<p>Design tokens are most beneficial for creating a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/single-source-truth-benefits\/\" target=\"_blank\" rel=\"noreferrer noopener\">single source of truth<\/a>\u2013which is what drove Salesforce to start using them. Everyone must speak the same design language when multiple product teams, engineers, and UX designers work on the same product.<\/p>\n\n\n\n<p>Design tokens allow teams to speak the same language, no matter their role, platform, programming language, or responsibilities.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-2-maintaining-ui-consistency\">2. Maintaining UI Consistency<\/h3>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/guide-design-consistency-best-practices-ui-ux-designers\/\" target=\"_blank\" rel=\"noreferrer noopener\">UI consistency<\/a> is a significant challenge when designing at scale. It&#8217;s not uncommon for designers to accidentally use slightly different sizing, brand colors, and spacing for a single product! These inconsistencies cause usability issues, increasing engineering and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/3-step-guide-erasing-ux-debt\/\" target=\"_blank\" rel=\"noreferrer noopener\">UX debt<\/a> with every release.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"301\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/code-design-developer.png\" alt=\"code design developer\" class=\"wp-image-35038\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/code-design-developer.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/code-design-developer-700x281.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>Design tokens eliminate these inconsistencies so that every designer uses the same styles and properties\u2013another <em>single source of truth<\/em> benefit!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-3-getting-flexibility-to-scale\">3. Getting Flexibility to Scale<\/h3>\n\n\n\n<p>Design tokens give products and design systems flexibility to make changes and scale. If teams need to add platform-specific properties, they simply update the design token.<\/p>\n\n\n\n<p>For example, Android uses octal color codes instead of HEX or RGB. To adapt a design system to accommodate Android, the DS team can add octal codes to each design token to maintain a single source of truth.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/scaling-process-up-1.png\" alt=\"scaling process up 1\" class=\"wp-image-34874\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/scaling-process-up-1.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/scaling-process-up-1-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>These tokens allow engineers to deliver new projects significantly faster with fewer errors or inconsistencies.<\/p>\n\n\n\n<p>This flexibility is also helpful when making changes. For example, if a product changes its typeface from Montserrat to Roboto, the team only has to update the typography token to implement a product-wide change.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-to-define-a-design-token-structure\">How to define a design token structure<\/h2>\n\n\n\n<p>While there are no rules for defining your design token structure, <a href=\"https:\/\/amzn.github.io\/style-dictionary\/#\/tokens?id=design-token-structure\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">this example from Amazon&#8217;s Style Dictionary<\/a> makes the most sense. Many organizations use a similar format for their design tokens.<\/p>\n\n\n\n<p>Amazon&#8217;s Style Dictionary uses a hierarchical design token structure:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Category (color, time, line-height, size, asset, content, etc.)<\/li>\n\n\n\n<li>Type<\/li>\n\n\n\n<li>Item<\/li>\n\n\n\n<li>Sub-Item<\/li>\n\n\n\n<li>State<\/li>\n<\/ol>\n\n\n\n<p>If we wanted to create a design token for a primary active button using this structure, it might look like <strong>color_background_button_primary_active<\/strong> or perhaps shortened <strong>color-bg-btn-primary-active<\/strong>. This token will contain every type of color code necessary for cross-platform implementation.<\/p>\n\n\n\n<p>The key to a design token structure is consistency. It must use a predictable naming convention so users can easily find tokens and scale the system.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-architecting-tokens-with-options-and-decisions\">Architecting Tokens with Options and Decisions<\/h3>\n\n\n\n<p>UX expert and founder of eightshapes, Nathan Curtis, wrote an <a href=\"https:\/\/eightshapes.com\/articles\/tokens-in-design-systems\/\" target=\"_blank\" rel=\"noreferrer noopener\">excellent article on architecting tokens<\/a>. Nathan says the first step is to segment your design tokens into <strong>Options<\/strong> (or choices) and <strong>Decisions<\/strong>.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Options:<\/strong> Creates the base token values. Tokens define what Style Dictionary describes above as categories\u2013<a href=\"https:\/\/www.uxpin.com\/studio\/blog\/choose-color-pallete\/\" target=\"_blank\" rel=\"noreferrer noopener\">color<\/a>, time, asset, <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-content-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">content<\/a>, etc.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Decisions:<\/strong> Decisions use your Options to create properties for components. For example, interactive color, background color, text color, etc.<\/li>\n<\/ul>\n\n\n\n<p>The benefit of this system is that if you want to change your white to a different shade, replacing the HEX code under the color Option will automatically sync to every design token and associated UI element.&nbsp;<\/p>\n\n\n\n<p>Nathan&#8217;s methodology also makes it easy to scale because you simply use your Options to create more Decisions. You can <a href=\"https:\/\/eightshapes.com\/articles\/tokens-in-design-systems\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">read Nathan&#8217;s full article for detailed instructions<\/a> on architecting tokens.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Tips on Design Token Naming Conventions<\/h2>\n\n\n\n<p>Naming conventions are a crucial aspect of any design system, ensuring clarity, consistency, and ease of use across design and development teams. A well-thought-out naming convention helps communicate the purpose and function of design tokens, components, and styles, making it easier for team members to understand and use the system effectively. Here are some tips for creating effective naming conventions for your design system:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>1. Be Descriptive and Concise<\/strong><\/h4>\n\n\n\n<p>Names should clearly describe the element&#8217;s purpose or function without being overly verbose. Aim for a balance between specificity and brevity to ensure names are easy to read and understand.<\/p>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use <code>color-primary<\/code> instead of <code>main-blue-color<\/code>.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>2. Use Consistent Patterns<\/strong><\/h4>\n\n\n\n<p>Establish a consistent naming pattern or structure that applies across all elements in your design system. This uniformity helps users quickly recognize the type of element they are working with and understand its role in the system.<\/p>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use a pattern like <code>[category]-[modifier]<\/code>, such as <code>color-primary<\/code>, <code>spacing-small<\/code>, or <code>font-heading-large<\/code>.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>3. Avoid Ambiguity<\/strong><\/h4>\n\n\n\n<p>Names should be clear and unambiguous, avoiding terms that could be interpreted in multiple ways. This helps prevent confusion and ensures that everyone on the team understands what each token or component represents.<\/p>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Instead of <code>button-color<\/code>, use <code>button-background-color<\/code> to clarify that the token refers to the button&#8217;s background color, not its text or border.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>4. Reflect the Design Intent<\/strong><\/h4>\n\n\n\n<p>Names should reflect the design intent rather than specific values. This approach allows for more flexibility and scalability, as the underlying values can change without requiring renaming.<\/p>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use <code>spacing-medium<\/code> instead of <code>spacing-16px<\/code>. This way, if you decide to change the medium spacing from 16px to 20px, you don&#8217;t have to rename the token.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>5. Align with Your Brand and Language<\/strong><\/h4>\n\n\n\n<p>Ensure that your naming conventions align with your brand&#8217;s voice and the terminology used within your organization. This alignment creates a cohesive experience for both the design and development teams and ensures consistency in communication.<\/p>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>If your brand uses specific terminology for sizes (e.g., <code>compact<\/code>, <code>regular<\/code>, <code>spacious<\/code>), incorporate these terms into your token names, like <code>spacing-compact<\/code> or <code>button-size-regular<\/code>.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>6. Include Context When Necessary<\/strong><\/h4>\n\n\n\n<p>When tokens or components could be used in multiple contexts, include contextual information in the name to clarify their use. This is particularly important for tokens that might have different values or meanings depending on the context.<\/p>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use <code>card-background-color<\/code> instead of just <code>background-color<\/code> to specify that the token is for card components.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>7. Use Common Abbreviations Sparingly<\/strong><\/h4>\n\n\n\n<p>While abbreviations can save space, overusing them can make your names cryptic and harder to understand. Use common abbreviations where they add clarity and avoid using less common or internal jargon that might confuse new team members.<\/p>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>bg<\/code> for <code>background<\/code> is a common abbreviation and widely understood, so <code>bg-color-primary<\/code> is acceptable. However, avoid using abbreviations like <code>clr<\/code> for <code>color<\/code>.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>8. Document Naming Conventions<\/strong><\/h4>\n\n\n\n<p>Document your naming conventions and provide examples in your design system documentation. This helps ensure that everyone on your team understands the rules and follows them consistently.<\/p>\n\n\n\n<p><strong>Example Documentation Excerpt:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&#8220;All color tokens should follow the pattern <code>color-[modifier]<\/code>, where <code>[modifier]<\/code> describes the usage (e.g., <code>primary<\/code>, <code>secondary<\/code>, <code>error<\/code>). Example: <code>color-primary<\/code>, <code>color-error<\/code>.&#8221;<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>9. Plan for Scalability<\/strong><\/h4>\n\n\n\n<p>As your design system evolves, new components and tokens will be added. Choose naming conventions that can easily accommodate growth and changes without requiring extensive renaming or restructuring.<\/p>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Instead of naming a token <code>button-small<\/code>, which might be limiting, use <code>button-size-small<\/code> to leave room for adding other size-related tokens, like <code>button-size-large<\/code>.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-design-tokens-work-in-practice\">How Design Tokens Work in Practice<\/h2>\n\n\n\n<p>In an informative article, <em>Design Tokens for Dummies<\/em>, Louis Chenais <a href=\"https:\/\/uxdesign.cc\/design-tokens-for-dummies-8acebf010d71\" target=\"_blank\" rel=\"noreferrer noopener\">outlines a typical design change workflow<\/a> <em>with vs. without<\/em> design tokens.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"301\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/idea-1.png\" alt=\"idea 1\" class=\"wp-image-34868\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/idea-1.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/idea-1-700x281.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-the-traditional-workflow-without-design-tokens\">The Traditional Workflow\u2013Without Design Tokens<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Designer updates a style in a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ux-design-tools-to-try\/\" target=\"_blank\" rel=\"noreferrer noopener\">design tool<\/a><\/li>\n\n\n\n<li>Designer documents the changes for the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/better-design-handoff\/\" target=\"_blank\" rel=\"noreferrer noopener\">design handoff<\/a><\/li>\n\n\n\n<li>Engineer updates the component&#8217;s properties (CSS, LESS, SASS, etc.)<\/li>\n\n\n\n<li>The design team confirms the changes during quality assurance (QA)<\/li>\n<\/ol>\n\n\n\n<p>There are several problems with this workflow:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>It creates more work and attention to detail during the design handoff.<\/li>\n\n\n\n<li>It&#8217;s prone to errors and miscommunication.<\/li>\n\n\n\n<li>Creates more tickets, thus increasing <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/fighting-front-end-debt\/\" target=\"_blank\" rel=\"noreferrer noopener\">technical debt<\/a>.<\/li>\n\n\n\n<li>It costs unnecessary time and money making the changes and fixing any corresponding errors.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-the-design-token-way\">The Design Token Way<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Designer updates a syle in a design tool.<\/li>\n\n\n\n<li>A design tokens generator updates a centralized repository creating platform-specific files (<a href=\"https:\/\/en.wikipedia.org\/wiki\/JSON\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">JSON<\/a>\/<a href=\"https:\/\/en.wikipedia.org\/wiki\/YAML\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">YAML<\/a>).<\/li>\n\n\n\n<li>Engineers pull the new repo, add any new tokens, and automatically update the project&#8217;s styles.<\/li>\n<\/ol>\n\n\n\n<p>Using design tokens reduces documentation for design handoffs and saves programming time for engineers. This automated system significantly reduces human error, streamlining the development and QA process.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-a-single-source-of-truth-with-uxpin-merge\">A Single Source of Truth With UXPin Merge<\/h2>\n\n\n\n<p>As digital products get more complex, designers and engineers must find solutions to integrate workflows\u2013a problem UXPin has solved with our revolutionary <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Merge technology<\/a>.<\/p>\n\n\n\n<p>Merge allows you to import a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ui-component-library\/\" target=\"_blank\" rel=\"noreferrer noopener\">component library<\/a> from a repository to UXPin&#8217;s design editor so designers can use the same UI elements engineers use to develop the final product.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/process-direction-1.png\" alt=\"process direction 1\" class=\"wp-image-34870\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/process-direction-1.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/process-direction-1-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>Merge components have the same fidelity and functionality as those in the repository. The design system team can use <a href=\"https:\/\/www.uxpin.com\/docs\/merge\/configuring-the-properties-panel\/\" target=\"_blank\" rel=\"noreferrer noopener\">React props<\/a> (or <a href=\"https:\/\/www.uxpin.com\/docs\/merge\/storybook-integration\/#how-to-change-component-properties\" target=\"_blank\" rel=\"noreferrer noopener\">Args<\/a> for our <a href=\"https:\/\/www.uxpin.com\/merge\/storybook-integration\" target=\"_blank\" rel=\"noreferrer noopener\">Storybook integration<\/a>) to restrict changes or provide designers with the flexibility to make design decisions.<\/p>\n\n\n\n<p>Whenever engineers make changes to the repository, they automatically sync to UXPin, notifying designers of the update. Merge comes with <a href=\"https:\/\/www.uxpin.com\/docs\/merge\/version-control\" target=\"_blank\" rel=\"noreferrer noopener\">version control<\/a>, allowing designers to switch to an earlier version\u2013helpful for updating older projects.<\/p>\n\n\n\n<p>Take your product development to new heights and create a single source of truth with <a href=\"https:\/\/www.uxpin.com\/merge\">UXPin Merge<\/a>. <a href=\"https:\/\/www.uxpin.com\/merge\">Visit our Merge page<\/a> for more information and details to request access.<\/p>\n\n\n\n<div class=\"wp-block-buttons\">\n<div class=\"wp-block-button is-style-fill\"><center><a class=\"btn btn-flat btn-large btn-content-width\" href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Discover Merge<\/a><\/center><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>The design system revolution of the last decade has brought with it all sorts of tools and strategies to enhance product development workflows. Design tokens are one of those tools many design systems, including Google&#8217;s Material Design 3 and MUI, have adopted to make UI elements easier to implement, manage, and update. Announcement: UXPin&#8217;s design<\/p>\n","protected":false},"author":3,"featured_media":36385,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,442,199,441],"tags":[],"class_list":["post-36356","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-component-driven-prototyping","category-design-systems","category-front-end"],"yoast_title":"What are Design Tokens? - by UXPin","yoast_metadesc":"Learn more about design tokens and find out more about using them in your product design process. See if you need them.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>What are Design Tokens? - by UXPin<\/title>\n<meta name=\"description\" content=\"Learn more about design tokens and find out more about using them in your product design process. See if you need them.\" \/>\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.uxpin.com\/studio\/blog\/what-are-design-tokens\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What Are Design Tokens?\" \/>\n<meta property=\"og:description\" content=\"Learn more about design tokens and find out more about using them in your product design process. See if you need them.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/what-are-design-tokens\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2024-09-05T12:09:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-05T12:09:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/08\/Design-Tokens.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"UXPin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uxpin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"UXPin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-are-design-tokens\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-are-design-tokens\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"What Are Design Tokens?\",\"datePublished\":\"2024-09-05T12:09:21+00:00\",\"dateModified\":\"2024-09-05T12:09:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-are-design-tokens\\\/\"},\"wordCount\":2643,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-are-design-tokens\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/Design-Tokens.png\",\"articleSection\":[\"Blog\",\"Component-Driven Prototyping\",\"Design Systems\",\"Front-End\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-are-design-tokens\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-are-design-tokens\\\/\",\"name\":\"What are Design Tokens? - by UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-are-design-tokens\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-are-design-tokens\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/Design-Tokens.png\",\"datePublished\":\"2024-09-05T12:09:21+00:00\",\"dateModified\":\"2024-09-05T12:09:25+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Learn more about design tokens and find out more about using them in your product design process. See if you need them.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-are-design-tokens\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-are-design-tokens\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-are-design-tokens\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/Design-Tokens.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/Design-Tokens.png\",\"width\":1200,\"height\":600,\"caption\":\"Design Tokens\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-are-design-tokens\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What Are Design Tokens?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\",\"name\":\"UXPin\",\"description\":\"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.\",\"sameAs\":[\"http:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/@uxpin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/hello\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"What are Design Tokens? - by UXPin","description":"Learn more about design tokens and find out more about using them in your product design process. See if you need them.","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.uxpin.com\/studio\/blog\/what-are-design-tokens\/","og_locale":"en_US","og_type":"article","og_title":"What Are Design Tokens?","og_description":"Learn more about design tokens and find out more about using them in your product design process. See if you need them.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/what-are-design-tokens\/","og_site_name":"Studio by UXPin","article_published_time":"2024-09-05T12:09:21+00:00","article_modified_time":"2024-09-05T12:09:25+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/08\/Design-Tokens.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-are-design-tokens\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-are-design-tokens\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"What Are Design Tokens?","datePublished":"2024-09-05T12:09:21+00:00","dateModified":"2024-09-05T12:09:25+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-are-design-tokens\/"},"wordCount":2643,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-are-design-tokens\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/08\/Design-Tokens.png","articleSection":["Blog","Component-Driven Prototyping","Design Systems","Front-End"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-are-design-tokens\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/what-are-design-tokens\/","name":"What are Design Tokens? - by UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-are-design-tokens\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-are-design-tokens\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/08\/Design-Tokens.png","datePublished":"2024-09-05T12:09:21+00:00","dateModified":"2024-09-05T12:09:25+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Learn more about design tokens and find out more about using them in your product design process. See if you need them.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-are-design-tokens\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/what-are-design-tokens\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-are-design-tokens\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/08\/Design-Tokens.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/08\/Design-Tokens.png","width":1200,"height":600,"caption":"Design Tokens"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-are-design-tokens\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"What Are Design Tokens?"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e","name":"UXPin","description":"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.","sameAs":["http:\/\/www.uxpin.com","https:\/\/x.com\/@uxpin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/hello\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/36356","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=36356"}],"version-history":[{"count":8,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/36356\/revisions"}],"predecessor-version":[{"id":54401,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/36356\/revisions\/54401"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/36385"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=36356"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=36356"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=36356"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}