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.
Components
I designed and QA'd the first 10 components for Pantry. This included creating a design spec template and working hand-in-hand with our engineers to ensure components were built up to standard, tokens were used, and parity between design and code was achieved.
Design tokens
I created the naming convention and overall architecture for Pantry's design tokens, supporting multiple themes out of the box. 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. This single workflow likely saved Albertsons hundreds of thousands of dollars a year.
The previous workflow required a designer create an icon in Figma, export it as an SVG then ask a PM to create a Jira ticket for a developer to add to their codebase. Leaving much room for error and duplicates. When we audited our codebase during this project, we found our codebase filled with hundreds of icons, including many duplicates. This pipeline solved for that with an automated flow from a single source of truth and a near real-time sync with code.
The video below shows our script syncing with the Figma icon file. Each time an icon is checked the console logs that icon name to provide real-time feedback.
What my team is saying
Feedback I collected from my teammates at Albertsons. I encourage you to reach out to them as references.