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

Adobe DSP

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

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

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

Wrapping up

--

--

--

Lead Product Designer. Halstack Design System https://www.alexbuenodesign.com/

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Cassandra Version Control

Increasing Representation in Tech

How can you verify the tech skills of a software company?

WildRydes (Web Application with Serverless framework and Terraform)

Angular (re-)explained — 2 : Interceptors

Backtesting A Trading Strategy Part 3

Data Lake Architecture at Fresenius Medical Care

Minesweeper and LRM

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
Alex Bueno

Alex Bueno

Lead Product Designer. Halstack Design System https://www.alexbuenodesign.com/

More from Medium

Using Figma API to extract illustrations and icons

Why You Need A Design System. (part 1)

design system

Why Build a Design System?

Introducing Dark Mode to LinkedIn

Decorative banner header showing dark mode versions of LinkedIn screens.