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.

The icon components in Figma are arranged in component sets using a style and size property