I led the design and creation of Pantry, Albertsons' first design system. During my tenure, I establish design foundations, design tokens, automated icon pipeline, documentation, and multiple components.
Design tokens
I created the naming convention and overall architecture for Pantry's design tokens, supporting multiple theme's out of the gate. We opted for two layers of abstraction: global and theme. The ensured semantic naming, while remaining flexible for future use cases and white labeling. We leveraged Tokens Studio, Style Dictionary, and GitHub Actions to create an automated pipeline from Figma to code.
Icon pipeline
Using Figma's REST API, I wrote several scripts to fetch icons from a single Figma file, clean the SVGs, and then convert them into assets for iOS and Android. This ensured a single source of truth, removed significant code bloat and duplicates, and created shared icon naming between design and code.
