What are Design Tokens and why do you need to know about them? 

Author's note: Since the publication of this article, Figma has announced the native functionality of Variables, which now replaces the term Design Tokens. Therefore, please ignore all instances of Design Tokens and refer to them as Variables. 

Design Tokens are a set of variables that define the visual language of a design system. They work as the connective tissue for maintaining consistent and cohesive designs across digital products. Design Tokens govern critical aspects of UI design such as colour, typography, spacing and effects. By centralising Design Tokens, our teams can easily make design changes whilst ensuring consistency and saving time in the process.

Design Tokens explained

Design Tokens are essentially variables that represent specific values, such as colours, font sizes, spacing, and other design properties. These variables can then be used throughout the design process to ensure consistency and maintain a cohesive design language.

One of the main advantages of using Design Tokens is that they provide a centralised source of truth for design and development teams who are reliant on these properties when launching digital experiences. Instead of hardcoding these variables throughout a working file, Design Tokens provide a single source of truth where teams can update various properties and have those changes propagated throughout the entire project. Think of it as Atomic Design Principles but at warp speed. When Brad Frost documented Atomic Design all those years back, Tokens (or Figma for that matter) had not been created, but they fit so perfectly into that model and allow teams to work even faster to make changes.

This can be particularly useful in large-scale projects where multiple designers and developers may be working on different parts of a project simultaneously. Design Tokens allow teams to work independently while still ensuring consistency across the entire project. 

Design Tokens also provide a level of abstraction that can be useful when working with multiple platforms or devices. By defining Design Tokens specific to each platform or device, designers can ensure that the design properties are optimised for each platform without having to create a separate design system for each.

Another advantage of Design Tokens is that they can be easily shared between design and development teams. By defining Design Tokens in a way that is easy to understand and use, designers can provide developers with a clear set of guidelines for implementing design properties.

Plugins v native functionality

At the time of writing this, the use of Design Tokens was not a native feature within Figma. There is much anticipation within the design community for when this will become a reality, but until that point teams have become reliant on really smart plugins such as Figmas very own Tokens Studio, Swapper and Style Tokens.

These are all great to work with, and each comes with its own limitations with regard to support and updates. The community recognises that Design Tokens are a critical part of the process when creating digital experiences. It won’t be long before we see this become a native feature with full technical support. We can always rely on Adobe to look after the beloved applications right? RIP Fireworks, we will always remember you.

Design to development handover

Design Tokens are created to maintain the variables within a design system. At Luminary we use Figma to create these systems. But keeping these Tokens within Figma is of limited use to development teams. There is no single way of creating, maintaining or exporting Design Tokens as it's a relatively new workflow between teams. Collaboration is key when creating the optimal way of working with Design Tokens; there is no ‘off the shelf’ solution for every team to adopt.

If we could summarise our top recommendations for design and development teams looking to adopt Design Tokens into their workflow, they would be:

1. Develop a common language between teams. The labelling and naming conventions of the variable tokens are critical when exporting tokens out of Figma into a JSON file (other file formats are available). 
2. Don’t rush the configuration. Spend time setting up each Design Token to ensure that any changes are made correctly to each instance using that token variable. There would be nothing worse than finding out that one token you need to change seven sprints into a project is not set up correctly.
3. Over-communicate. Ensure that teams are in constant dialogue over the maintenance of Design Tokens. As this is a relatively new field of expertise, we need to ensure we’re always sharing ways of working between teams and how to improve our unique workflows.

How Luminary has used Design Tokens

A recent successful application of Design Tokens was the redesign of the Simplot Food Service and its multiple branded websites. Some of Australia’s most iconic brands sit under the Simplot banner, including Leggo’s, Bird’s Eye, John West and Edgell. Simplot’s market share extends across multiple FMCG product lines and is the last Australian-grown frozen and shelf-stable vegetable provider of any scale in the country. Despite the brand reputation, Simplot’s digital identity did not have the same prominence online, the hierarchy of brands and services under the banner was not clearly represented, and the existing websites did not offer consumers an opportunity to engage or be educated on the products.

A multi-site design system allowed Luminary to design a single-brand website and then duplicate and customise it to the style of each brand. A centralised system with unique Design Tokens per brand saved significant time while maintaining the specific style guidelines. This approach provided consistent and scalable design system management, with Simplot's brand websites adhering to the same structure. This approach means that changes can be made in one place and propagated throughout the design system.

In conclusion, Design Tokens are a powerful tool that can help streamline the design process and ensure consistency across different platforms and devices. By providing a centralised source of truth, Design Tokens can help teams work independently while still ensuring consistency across an entire project.