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

Start with Docker on AWS Linux

Zenlink is now live! Check out the user guide

Retrieve average, minimum, maximum values from model field using Django Aggregation

KWOC 2021 — My experience

Play Rock Paper Scissors Using the ESP2866

Efficiently Tagging AWS Resources Using CLI to Better Manage Resources and Billing Costs

Doc to PDF conversion | Laravel

Why you need to learn Linux.

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

Building a Pattern Library | Design Systems & Components

Design system: How to build a library?

Design Systems London Goes Online

Building (re-building) the design system at Auto Trader (Part 1)