Design Systems
Scaling Design Systems: Driving adoption across product teams with measurable impactOver the last 4 years, I’ve built and evolved a global design system that increased adoption by 25% and streamlined collaboration across engineering and design.
The following is a local example of my own design system to demonstrate the skillsets & technique at scale for branded strategies.
Tokens
- Color, Spacing, Radius, Shadow
Variables
- Named values that store design-related properties (like global colors & typography)
Components
- The combination of tokens & variables used to make up the core elements of design
Properties
- Variants
- Booleans
- Instant Swap
Patterns
- Combination of Components to standardize repeatable design elements
Challenge
Many design organizations work quickly but in silos. I’ve worked over the past 3 years to build out a scalable design system & encourage adoption across teams.
In FY’24, the 9 product teams of Store Tech increased Design System adoption by 25%.
Solution
Working with another designer, we collaborated to create a robust, global design system made up of semantic themes. The themes allow for departments to utilize individual & unique styling, serving the use cases & experiential needs of our user groups.
Component Properties
Variants & Booleans
Using systems thinking principles, I love identifying common data aggregation opportunities & translating those commonalities into variants & booleans.
Component properties typically reduce redundant Figma components by upwards of 40%
Components & patterns
Design System in Action
I’ve created my own simple design system in a personal Figma file to demonstrate my understanding & abilities. This design system is currently being pressure tested with one of my AI prototyping projects, so these compents will actually be translated into code.
Scalable system also support future pages & feature exploration with minimal overhead & rework.
