Design tokens are a way to easily identify and understand the elements in a design system. As more designers and companies adopt the use of design tokens, their value will continue to grow.<\/p>\n
The key to designing tokens is that they facilitate cross-disciplinary collaboration. More people on a team can understand and use design values without specificity, but with accuracy. They\u2019ve already been adopted by design giants such as Adobe.<\/p>\n
Here\u2019s everything you need to know<\/a> about design tokens.<\/p>\n The term \u201cdesign token\u201d can be traced back to somewhere around 2014, when Salesforce began talking about its \u201csingle source of truth\u201d for design.<\/p>\n \u201cWe define our design in a single location and use a system to cascade it down to all platforms,\u201d wrote S\u00f6nke Rohde, of Salesforce<\/a>, about the open-source concept. \u201cIt\u2019s basically a set of JSON files that contain name-value pairs describing our design tokens. The tokens are of different categories like text colors, background colors, border colors, font sizes, spacing, border radiuses, etc.\u201d<\/p>\n Here\u2019s what design tokens do: They ensure that every element of the same type is the same across your entire design network. So that a red button is the exact same size, shape, and color as red no matter where in the design it appears. And all you need to know is that it is a \u201cred button,\u201d not the exact specifications for it.<\/p>\n This eliminates a lot of time looking up specs and creates a universal element that can be adjusted across the design as well. Design tokens are platform-agnostic, meaning that you have created a common design language that can be deployed anywhere without having to make platform-specific adjustments. Specifications are universal between devices and platforms and implementations.<\/p>\n The benefit of design tokens is the ability to create a scale with consistency. It\u2019s that simple.<\/p>\n While different design teams can develop different methodologies for design tokens, we\u2019ll start with the types that Adobe uses for the Spectrum design language. They\u2019ve developed a fairly simple and understandable set of token types.<\/p>\n Design tokens make the language between designers, developers, and product engineers a little bit easier to understand. They turn visual values for a variety of elements into context-based values that use nicknames for greater understanding and deployment.<\/p>\n You can use a token for:<\/p>\n Design tokens are stored in the common code for a project. It takes a committed team implementation to make them work because they are only as powerful as the code allows for.<\/p>\n If you want to get into the guts of JSON files and how to code design tokens, CSS-Tricks<\/a> and U.S. Web Design System<\/a> have some help for you.<\/p>\n Design tokens are an important part of a design system because they are universal and understandable. They create organization for your brand and products that can scale.<\/p>\n On top of these big, top-line benefits, design tokens have other practical applications as well:<\/p>\n All of this begs the question: Should you use design tokens?<\/p>\nWhat are Design Tokens?<\/h2>\n
Types of Design Tokens<\/h2>\n
\n
How Do Design Tokens Work?<\/h2>\n
\n
Why Tokens Matter in Design Systems<\/h2>\n
\n
Should You Adopt Design Tokens?<\/h2>\n