Overview

I led the creation and rollout of a new version of ADP’s design system library for ~150 designers. Focused on mobile responsiveness, code parity, and usability, we delivered improved documentation, responsive components, and streamlined property naming. The system quickly became the standard, enhancing design-engineering alignment and driving ongoing improvements based on user feedback.

Challenge

Rebuild the Figma component library from the ground up to better support designer workflows while ensuring strong alignment with code. The existing library had grown inconsistent over time, leading to friction in day-to-day design work, unclear component behavior, and a growing disconnect between design intent and developer implementation.

Opportunity

The rebuild presented a chance to rethink how designers interact with the system and how closely it aligns with development. Improvements included:

Simplified component structure and consistent naming for better code parity
Extraction of deeply nested components for more flexible prototyping
Responsive behaviors added to components that adapt across breakpoints
Tearsheets published as components for discoverability containing examples of preconfigured components
Getting started guides and tutorials built directly into the library
Dark mode support via color variables
Enhanced styles powered by variables for greater consistency and layout creation

Role

Design Lead: I led a small team of two designers with guidance from our Design Director. The project spanned approximately 6 months and was executed in multiple phases. We worked in 2-week Jira sprints to maintain a steady, iterative pace, breaking the work into manageable chunks and assigning tickets accordingly.

Building the MVP

Timeline: 3 months

We started by analyzing feedback from the previous library and identifying areas that caused friction.

Mobile responsiveness was a major improvement, reflecting behaviors already present in production but previously missing in Figma. Designers were often unsure how components adapted on smaller screens—this update solved that gap.

Dark mode support was another area teams were eager to adopt, we implemented robust variable collections to support easy toggling between light and dark mode. More details about that aspect of the project coming soon.

To optimize design handoff, each component was also built to reflect code as closely as possible.

Testing & iteration

Timeline: 2 months

We selected 15 designers across various product teams, levels of seniority, and Figma proficiency. Each designer received a branch of the new library and was tasked with recreating existing screens using the new components.

They left comments directly in the file, and several participated in structured interviews to add context to their feedback. This collaborative approach uncovered edge cases, improved usability, and validated naming conventions and behavior.

We incorporated key insights and iterated on the components based on what we learned during this phase.

Release & adoption

Timeline: 1 month

To roll out the new system to our ~150 designers, we took a personalized, team-by-team approach:

Presented a “roadshow” walkthrough to each design leader’s team
Tailored demos based on specific product needs
Created space for questions and team-specific concerns
Captured additional feedback and logged post-launch improvements in Jira

Mobile responsiveness

Certain components behave very differently on smaller screens—like pickers transforming into bottom sheets or modals taking over the full viewport. We updated these components to reflect those responsive behaviors directly in Figma, ensuring:

Inputs and buttons adapt to mobile height constraints
Focus Panes and modals reflect true screen takeover behavior
Designers can prototype across breakpoints with confidence

Code parity

Achieving strong design-to-code alignment was a shared priority between design and engineering. We delivered:

Clear component structure and property naming to reduce the need for annotations
Color variables and dark mode support to visualize user experiences across modes
Enhanced styles mapped to utility classes used in code
Flattened component nesting for easier overrides and more flexible prototyping

Documentation & handoff

To ensure the library was easy to adopt and use, we improved documentation at every level:

Tearsheets: Published as standalone components for quick reuse of common patterns
In-file documentation: Tutorials, tips, and “Getting Started” pages built directly into the library
Component descriptions: Each component includes a concise summary, link to developer documentation, and reference to the corresponding web component tag
Property naming: Improved for clarity and code parity, while remaining designer-friendly
Emoji labeling system: Introduced emojis to visually distinguish similar properties (e.g., text vs. visibility) and reduce character count in tight property panels

Results

The rebuilt component library launched successfully and quickly became the standard across ADP’s ~150-person design org. The improvements led to better alignment with development and more confident design execution. Several key enhancements stood out to users and drove strong engagement from the start.

Responsive by default: Components adapt across breakpoints to support mobile prototyping.
Dark mode ready: Color variables enable instant theme switching to match front-end behavior.
Easier to use: Built-in tutorials, tearsheets, and emoji-labeled props improve discoverability and onboarding.

What’s next

Looking ahead, we’re focused on scaling the system and improving workflows through ongoing iteration:

User-driven updates: Continue refining components based on feedback and testing.
Contribution model refresh: Revamp how designers propose and submit changes.
Deprecation workflows: Define clear paths for phasing out outdated variants.
Analytics insights: Use Figma’s API to identify usage patterns and pain points.
Internal tooling: Explore custom plugins to support design and handoff.