Engineering a 'Figma Design Tokens to Code' Build System.

The Problem

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.

The Solution

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:

1. The core Cornerstone styles are set up as design tokens in Figma
2. When you make a change to any of the design tokens in Figma, the Figma Tokens plugin recognises you've made a change and allows you to update your codebase on GitHub
3. The front end engineer can then fetch the updated tokens file from Github and run Style Dictionary from the command line
4. Style Dictionary parses the updated tokens file, saves the result, and then merges the changes into the Cornerstone theme config file
5. If the engineer is running a local development site they will then see those changes reflected immediately in their browser

Watch a demo of design tokens and the above build system in practice: