What are design tokens and how can they improve design production?
Published on 24 May 2022 inTokens are a new standard under the W3C umbrella that unify the foundation between design and code to ensure consistent and unified product experiences. In a design foundation, tokens are the smallest building blocks of a design that together represent styling in a front-end framework.
It all starts with a design foundation
In a design system, the smallest parts of the foundation are built up by tokens, whose main purpose is to store values such as color, typography, spacing, and more. This enables a design system to be shared across platforms like iOS, Android, and regular websites.
Even in 2023, designers globally continue utilizing design tokens to encompass all the design elements and features within the design system.
Tokens in a design foundation consist of the following:
Color Token: Specifies the use of color within a design system, including primary and secondary colors, backgrounds, text colors, 16-bit color accents, RGBA values, gradients, and other color style guides.
Typography Token: Encompasses font families, font sizes, line spacings, and font weights, aiding designers in selecting suitable typography for different text formats such as headlines, paragraphs, and more.
Spacing Token: Specifies spacing, padding, and margins, ensuring consistent layout and adequate space for all design elements.
Border Token: Specifies frame and line properties like frame width, frame color, and corner radius for design elements such as buttons, cards, and input fields.
Shadow Token: Specifies consistent box drop shadows for UI elements, including shadow opacity, blur radius, and spread radius.
Icon Token: Defines icon design guidelines, including size, color, and spacing, to ensure icon consistency within the design system.
Component Token: Outlines style guidelines for general UI components like buttons, input fields, checkboxes, and dropdowns, covering button shapes, frame styles for input fields, and checkbox animations.
Breakpoint Token: Sets responsive breakpoints for web design, ensuring design and layout adaptability for various screen sizes and resolutions, providing a unified user experience across all devices.
Animation Token: Specifies animation properties such as duration, easing, and keyframes to ensure consistent animations across the interface.
Accessibility Token: Specifies accessibility properties like contrast ratio, text size, and focus states, ensuring the design system complies with accessibility standards.
Grid Token: Specifies grid layout properties, including grid column width, gutter spacing, and positioning, ensuring consistent grid-based layout design.
Media Token: Specifies image and media properties, including image ratios, sizes, and video player styles, ensuring uniform media display.
Text Token: Specifies text properties beyond typography, including text effects, spacing, and alignment.
Shape Token: Specifies shape properties within the design system, including buttons, input fields, and card shapes, among others.
Custom Token: Customized tokens that empower designers to specify design guidelines, offering flexibility within the design system.
Design tokens in a design system
All design foundations start with a global design token and a value. This single token is later inherited down to alias tokens that represent a specific context or abstraction in a design.
This improves scalability and performance in a front-end framework, and it is also a great way to build your design system around the same principles.
Create better designer-to-developer handoffs
You can easily apply the same design token principles used in a front-end framework to your design system.
You start with a global design token that holds your primary value, which can later be inherited down to various alias tokens that represent the styling of a component.
A well-organized design foundation increases design automation and makes it easier to make the handoff between design and development, as engineers can quickly translate your design system foundation into code.
Developer handoff improvements:
Faster hand-off process
Easier design implementation
Increased design automation
A single source for global styling
Designing for scalability
Even if some of the most popular design tools on the market do not have built-in support for design tokens yet, you can still organize your design system foundation to support the principles of tokens.
This will be a manual process until it is fully supported. Still, design tokens are slowly becoming the new standard of design, ensuring that all styling can be updated and controlled in a single place.
Improve consistency
Design tokens force consistency in design, as each individual design element is connected to a style and therefore a design token, which enables scalability and productivity.
Consistency benefits:
Increased project scalability
Styling separated from components
Smarter design foundations
Foundation swapping
Design your foundation for context
You should organize your design tokens with a structured naming convention based on context and usage, which as a reference is called a token scheme. A token scheme is a naming convention based on usages, like a button, a form, or a card.
If we break that down, then your alias naming convention might follow a token scheme that looks something like this:
color-button-bg
color-button-border
color-form-input-bg
color-form-input-border
color-card-bg
color-card-border
You can apply the same naming convention principles to all the various design foundation types, like typography, spacing, elevation, and corner radius.
These all control the core styling of your components and help keep them organized based on their context and usage. They also enable you to use the same component and change design tokens based on the device and context of your project.
Swap your styling in an instant
You can easily swap a design foundation with an identical design system library using the same design token scheme and naming convention.
Done right, it enables you to use the same component and change design tokens based on the device and context of your project.
By using a design token scheme based on all core components, you can easily change styling based on a specific implementation or device type without affecting anything outside of the context.
Scenarios for swapping design foundations:
Responsive web versus native app
Theming for light or dark mode
Branding or white label design
Translate design tokens to code
Neatly organized design tokens in a design tool like Figma or Sketch can easily be translated into code. Just as you can use design tokens in your design system foundation to scale design, you can also use them in your front-end framework.
Your design tokens are, after all, the same styling foundation that has been used in front-end frameworks for years – so now is the time to move the responsibilities and control back to the designers.
A single source of truth
Design tokens can easily be translated into coding languages like SCSS, JSON, or XML, which enables you to transform your design resources into a single source of truth.
Benefits of using design resources as a single source of truth:
Simplified development process
Unification across platforms
Flexible design
Take control of your design and development
At Morphosis, we specialize in design fundamentals such as design systems and front-end frameworks. Both play a vital role in product design and building scalable products that can grow over time.
Learn how we can help you improve your product design:
Subscribe to our newsletter.
Here are some related articles
Product Design
Let us will help you open new business opportunities by giving you a new perspective on your digital product you may not have considered before.