Aspen Dental Group (TAG)
Aspen Dental Group (TAG)
Aspen Dental Group (TAG)
Design system creation - From Figma to code
Design system creation - From Figma to code
Design system creation - From Figma to code
Primary role
Primary role
Design System Lead
Design System Lead
Year
Year
2025
2025
Main tools used
Main tools used
Figma, Storybook
Figma, Storybook
149 components/1,056 variants
created for this library for dental web applications
Momentum maintained
for continuous enablement and development partnership
Project goal
Supported the buildout to strengthen foundational design tokens and build key UI components for development
Supported the buildout to strengthen foundational design tokens and build key UI components for development
Project description
Aspen Dental’s dental product teams (Denture Order Forms, Patient Hub, Lab Hub) were being built on a UI library that couldn’t scale. Inconsistent tokens and undocumented components meant every new screen required custom rework.
As Design System Lead, I took over an in-progress system build, directed two designers and directed in the rebuilding the token architecture and component library from the ground up for direct code handoff.
Aspen Dental’s dental product teams (Denture Order Forms, Patient Hub, Lab Hub) were being built on a UI library that couldn’t scale. Inconsistent tokens and undocumented components meant every new screen required custom rework.
As Design System Lead, I took over an in-progress system build, directed two designers and directed in the rebuilding the token architecture and component library from the ground up for direct code handoff.
Problems to solve
With an initial audit, we found the right problems to solve to create this UI Kit for development. How do we structure the token architecture to maximize efficiency and intent?
I prioritized fixing token architecture before touching components because inconsistent tokens were the root cause of the duplication developers kept running into. Solving components without fixing tokens first would have just baked the same inefficiency into a new system.
Organizational structure for the new color system for the UI Kit
Organizational structure for the new color system for the UI Kit
Setting the foundation - How was the work determined?
With an in-depth audit, we looked at token architecture, component quality, user experience of current products and more to come up with a recommendation of several opportunities to grow current capabilities.
I chose a three-tier, intent-based token structure (content, surface, action) over a purely visual naming convention because designers were previously guessing which token to use. Intent-based names let a designer pick the right token without needing to reference documentation every time, cutting a recurring bottleneck. A prioritized component plan based off screens needed to be build by developers as we partnered with them:
I recommended a base component and Figma slot structures to minimize component variants for easier customization.
I stated best practices such as detailed documentation, enabling the Figma MCP server for Code Connect to make creating components easier.
I continued the sprint structure was then planned and all components, documentation, Figma file set up and template creation began.
With an in-depth audit, we looked at token architecture, component quality, user experience of current products and more to come up with a recommendation of several opportunities to grow current capabilities.
I chose a three-tier, intent-based token structure (content, surface, action) over a purely visual naming convention because designers were previously guessing which token to use. Intent-based names let a designer pick the right token without needing to reference documentation every time, cutting a recurring bottleneck. A prioritized component plan based off screens needed to be build by developers as we partnered with them:
I recommended a base component and Figma slot structures to minimize component variants for easier customization.
I stated best practices such as detailed documentation, enabling the Figma MCP server for Code Connect to make creating components easier.
I continued the sprint structure was then planned and all components, documentation, Figma file set up and template creation began.
Token architecture refactoring example by establishing intent; the tokens were easier to assign throughout the kit
Component-creating bonanza!
I structured the component strategy around a 27-page priority plan, sequencing work so developers always had the highest-impact patterns first, while the two designers I directed built out supporting variants.
By using the templates needing to be created as a priority guide, we established a plan for 27 component pages that contained many other patterns/base structures to add value to their system and developers. Documentation became the best value add to the Aspen Dental Team, as the lack of this guidance previously caused major slow downs.
On a weekly basis, I led in presenting progress, set clear expectations for work moving forward and worked with developers as they were adding components/functionality to their Storybook instance.
I structured the component strategy around a 27-page priority plan, sequencing work so developers always had the highest-impact patterns first, while the two designers I directed built out supporting variants.
By using the templates needing to be created as a priority guide, we established a plan for 27 component pages that contained many other patterns/base structures to add value to their system and developers. Documentation became the best value add to the Aspen Dental Team, as the lack of this guidance previously caused major slow downs.
On a weekly basis, I led in presenting progress, set clear expectations for work moving forward and worked with developers as they were adding components/functionality to their Storybook instance.
Component organization example with base components, slot content for the card and documentation
Applying the components in real-life contexts
The page templates demonstrate how the UI Kit can be applied to real product workflows, not just isolated components. We created the prototypes to be responsive to screen size and presented to developers and stakeholders to guide pattern creation and enablement.
The page templates completed were their Denture Order Form, Patient Device Hub they use to monitor patient data and Lab Hub to categorize ordering of dental practice products like tools, medications and more
The page templates demonstrate how the UI Kit can be applied to real product workflows, not just isolated components. We created the prototypes to be responsive to screen size and presented to developers and stakeholders to guide pattern creation and enablement.
The page templates completed were their Denture Order Form, Patient Device Hub they use to monitor patient data and Lab Hub to categorize ordering of dental practice products like tools, medications and more
Denture order form web application page with a tablet and desktop breakpoint example
Training to continue the momentum!
With all the components and page templates completed, we helped the team understand what was built, why it was built and where to find the key parts of the UI Kit as they collaborate together, understand each others' needs to make this system their own.
Each part of the template outlined the following:
File Structure & Organization
Foundations, Tokens and Component Structure
Using and Extending the UI Kit
Figma Training
Governance and Best Practices
Office Hours for continued discussion
Because systems fail without shared ownership, I designed training around four principles so the system wouldn’t calcify the moment I left:
Clear ownership boundaries
Lightweight intake process for new requests
Documented review/approval steps
Built-in space to keep refining components as real product needs surfaced
With all the components and page templates completed, we helped the team understand what was built, why it was built and where to find the key parts of the UI Kit as they collaborate together, understand each others' needs to make this system their own.
Each part of the template outlined the following:
File Structure & Organization
Foundations, Tokens and Component Structure
Using and Extending the UI Kit
Figma Training
Governance and Best Practices
Office Hours for continued discussion
Because systems fail without shared ownership, I designed training around four principles so the system wouldn’t calcify the moment I left:
Clear ownership boundaries
Lightweight intake process for new requests
Documented review/approval steps
Built-in space to keep refining components as real product needs surfaced
After project reflection
The team moved from an unscalable UI library to a governed, code-connected system built to grow past my involvement. This truly validated by the ROI framing stakeholders used to justify continued investment in the system.
The refactored token system cut total token count by roughly half while increasing naming clarity and the base-component/slot approach meant new component variants could be created without touching core structure. This reduced future component sprawl.
The team moved from an unscalable UI library to a governed, code-connected system built to grow past my involvement. This truly validated by the ROI framing stakeholders used to justify continued investment in the system.
The refactored token system cut total token count by roughly half while increasing naming clarity and the base-component/slot approach meant new component variants could be created without touching core structure. This reduced future component sprawl.
149 components/1,056 variants
created for this library for dental web applications
Momentum maintained
for continuous enablement and development partnership