Design tokens automation pipeline: From design tools to component libraries (Part 1)

Example: Minimal file with single design token. Extracted from Design Tokens Format Module Draft Community Group Report 23 September 2021
  1. Definition of the design decisions in the design tool
  2. Sync between the design tool and the translation tool
  3. Translation from platform-agnostic to platform-dependent
  4. Consume the exported variables in the CDK
Design tokens automation pipeline schema¹. From the design tool to the component library.
Our character styles² defined in the design tool (Adobe XD)

From the design tools to the translation tools

For our second step in the journey, we’re only going to cover the integration within Adobe XD and Style-dictionary and a Figma plugin called Design Tokens.

Adobe DSP

Adobe DSP (Design system package) is a Visual Studio Code integration that allows exporting your design tokens using the configuration of Amazon’s Style-dictionary library underneath.

Example schema of the creation of a JSON file using Adobe’s DSP (Design system package)
Data exported by default for our body-medium character style (font-family, font-weight, and font-size⁴)

Working with Figma

One of the most interesting functionalities that Figma provides is the ability to work with their API to extract a JSON file with every layer, object, component, or any style from a file.

Example of the GET style request from the Figma API documentation.
Character style body-medium metadata extracted by key (Some unimportant data has been removed).
Example schema of the creation of a JSON file using Figma’s Design Tokens plugin
Data exported by default for our body-medium character style.
Using aliases to define our body-medium properties

File structure, hierarchy, and naming conventions

Part of the process is to find a way to build our JSON file structure accordingly to our team’s naming conventions and/or mental model⁸.

tokens/
├── color.json
├── font.json
├── border.json
├── shadow.json
├── spacing.json
├── breakpoints.json
└── z-index.json

Wrapping up

In this “Part 1”, we covered part of the platform-agnostic area when building a Design Tokens automation pipeline, starting with two of the most widely used design tools in the market. There are plenty of technical details I know there are missing (And probably better ways to set up this pipeline).

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store