Over a six month period from 2022-2023, I worked with my cross-functional partners to design and develop the design token architecture and pipeline for the Pantry Design System.
Overview
Pantry is the design system for Albertsons. Starting in the fall of 2022, I led the design and architecture of our design tokens. As a result, we were able to build an automated pipeline from Figma to code, using Token Studio for Figma and Style Dictionary. This project proved to be especially challenging as our token naming structure differed slightly from Style Dictionary's CTI. Additionally, our final outputs were Kotlin and Swift files, which was a new endeavor for myself. Ultimately, we were able to create scripts to transform our tokens and solidify our pipeline.
Token architecture
We explored using three layers layers of abstraction, but our final deliverable was only two: global and theme layers.
Token visualizer
Token Studio offers a visualizer to see how tokens map to each other. In the video below I am showcasing the two layers of abstraction: global and theme tokens. In our design tokens set I defined multiple themes out of the box.