I have been interested in improving efficiencies between design and engineering teams for a long time. Over the years there have been many improvements to the process, from Responsive Web Design in the early 2010s, to more recently 'atomic' design and Design Systems.
However, the one thing that still seems to be missing is the final step from design to code. Designs done in Sketch or Figma have to be interpreted and implemented in code by an engineer, a process which is prone to inconsistencies, assumptions and errors.
Step forward design tokens. Design tokens were created by the design team at Salesforce. They proposed establishing a data layer on top of existing design elements, which could be managed from a central location and used as a single source of design truth across all platforms.
"Essentially, a design token is a design decision: a pairing of the same code and visual properties — design elements you use over and over again in your products — packaged in a format that’s deployable across all platforms."
Source: Invision App, Inside Design - A guide to design tokens
Tokens are created to store visual properties such as color, font-size, line-height, spacing and so on. Each token consists of a key/value pair, for example color.blue: #0000FF. Tokens can also reference other tokens, for example color.primary: color.blue. This enables you to create flexible abstraction layers, allowing your tokens to be deployable across any platform or framework.
I have been learning and experimenting with design tokens for a while. I recognise their importance, and have no doubt that they will form a large part of our design and engineering workflows in the not-too-distant future. However, they naturally lend themselves to large, product design teams, rather than smaller agency projects.
This led me to explore whether I could find a way to use them in my line of agency work? One of the tasks we do quite regularly, is to take the base theme of an ecommerce framework, and then adapt it to our client's requirements. This can be somewhat inefficient as we are starting the development from scratch every time. What if I created a version of that base theme in Figma using design tokens, and then had a way to export those design decisions directly to code, in a format that the framework's theme could then understand and consume?
It was this that led me to the excellent Figma Tokens plugin, which allows you to integrate design tokens into your Figma projects with ease, and sync them with a central service, such as GitHub. And then subsequently to Style Dictionary, a build system for parsing and exporting your rules to all the places you need them.
This has enabled me to develop a Figma-to-code build system for CornerStone, the default BigCommerce theme:
Watch a demo of design tokens and the above build system in practice:
The opportunities this opens up are extremely exciting - where a designer can do much of the initial setup and core styling of a theme, without the help of an engineer or having to even leave Figma!