Growing the design system over time
Context
Organizing files by feature allowed the design system to grow naturally. With each new feature or improvement, we reviewed local components and moved reusable ones into the system.
My approach
At this stage, I advocated for component quality and clarity of use. Components were designed with design tokens, variants, and properties in mind to streamline design work and spec handoff. We added brief documentation directly in Figma, including examples where needed for better clarity.
Beyond components, I also worked on detailed guidelines and templates to clarify the use of key elements in the user experience, such as charts, which were widely used across our products with various types serving different use cases.
Button component designed in Figma using tokens, variants, and properties
Sample templates from chart guidelines showing different chart types
Outcome
As the product evolved, so did the design system. Components were added and refined, foundations became stronger, and the team expanded with 3 new frontend developers who recognized the system’s value.
As adoption grew and the team gained maturity, governance evolved too. One of the biggest improvements came from a Storybook initiative led by web developers. This enabled component-level design reviews for the web, significantly improving quality assurance.
Over two years, 286 components (including variants) and templates were progressively created along with a complete set of graphical assets, covering all product needs.
Component examples from Figma and Storybook
24 Component collections
Accordion
Activity indicators
Alert bars
App bars
Badges
Banners
Buttons
Chips
Lists
Menus
Navigation bar
Page footer
Popovers
Progress indicators
Score & game indicators
Search bar
Sheets
Sliders
Snackbars
Switches
Tabs
Tags
Text fields
Tooltips
Popovers
Progress indicators
Score & game indicators
Search bar
Sheets
Sliders
Snackbars
Switches
Tabs
Tags
Text fields
Tooltips
Accordion
Activity indicators
Alert bars
App bars
Badges
Banners
Buttons
Chips
Lists
Menus
Navigation bar
Page footer
9 Template collections
3 graphical asset collection
Icons
Logos
Images & illustrations
Next up
This concludes the journey of building the design system. Head back to Streamlining workflows and ensuring consistency with a design system to explore my reflections and key learnings.