Scaling a Design System Through a Figma Library Rebuild

Hewlett Packard Enterprise, Design System Team

ROLE

Lead Product Designer

DURATION

9 Months

TEAM

5 Product Designers
3 UI/UX Developers

TOOLS

Figma

SKILLS

Leadership
Project Management
Design Architecture
User Research
Stakeholder Management

OVERVIEW

At HPE, the Design System team maintains Grommet, a React-based component library, and a corresponding Figma library that mirrors Grommet components. The Figma library serves as the design source of truth for teams across the company.  

What started as a routine backlog grooming task quickly evolved into a full-scale overhaul after user research uncovered deep-rooted issues in the Figma library. Designers were detaching components, teams were building their own libraries, and the Design System overall was losing credibility. 

As a product designer on the team, I led a complete overhaul of the Figma component library—auditing 530+ components, conducting user research and testing, and rebuilding the system from the ground up to restore trust and drive adoption.

PROBLEM BREAKDOWN

How did this all start?

Upon reviewing our backlog, we had noticed a trend of unresolved issues raised by our users around the usability of our Grommet based Figma components. These voiced issues related mainly around:

Component builds riddled with bugs and inconsistencies
Ex. The Figma version of the coded DateInput component could neither wrap nor resize correctly.
Components lacked built-in features to accurately mimic code
Ex. The Figma version of the coded Button component was not built to support an icon or badge.

Where did we go from here?

Our goal was to update our Figma assets to address all of these raised issues. We wanted to empower our users by providing the tools to efficiently and effectively create their designs.  

Our starting plan of action was to:

Catalogue additional issues across all our Figma components.
Reach out to our users for a better understanding of their issues.
Formulate a process on how to tackle the many outstanding issues.

DISCOVERY, RESEARCH, & INSIGHTS

Auditing our Figma component library

We conducted our audit by stress testing the components to highlight bugs and areas of improvement.

As the lead for this project, I was responsible for organizing and delegating tasks for myself and four other designers.

Over 530+ components were reviewed.
Ex. The CheckBoxGroup Figma component audit.
I maintained a GitHub board to support project tracking and team alignment.

Understanding user pain points

I reached out to nine designers and three developers across three different product teams to gain a better grasp on how our components were being used, how designs were being delivered for implementation, and what enhancements users would like to see.

Additionally, I reviewed our Figma analytics to gain insight on component usage and detachment rates.

12/12
participants raised alarming issues with the components.
3/3
surveyed teams were owning and maintaining their own Figma versions of the Grommet components.
More than 10%
of the time were Design System component instances being detached due to issues.

Deeper insights

It became quickly apparent through our audit and user feedback that our Figma components were outdated. We were not properly leveraging standard component build practices.

Auto layouts were applied incorrectly or weren't used at all causing issues with wrapping and responsiveness
Ex. Auto layout issues within the TextInput, DateInput, and FileInput components.
Configurations were built as separate components instead of utilizing Figma variants, resulting in a lack of scalability, maintenance issues, and poor searchability
Ex. The Select component was created as 28 separate components within Figma.

REFRAMING THE PROBLEM

How might we rebuild our Figma Library to regain trust and establish it as a single source of truth?

What started as a simple cleanup effort uncovered deeper structural and foundational issues within the library. Our findings had revealed that patching individual problems wouldn’t be enough—we needed a full rebuild of our Figma library. 

To move forward, I reframed our effort around three pillars:

Usability
Work closely with developers to ensure new Figma component rebuilds have parity with Grommet counterparts. This will provide designers with a more accurate experience during design, while also streamlining handoff by reducing ambiguity between design and implementation.
Scalability
Strategically utilize variants and auto layouts to rebuild components. This will enable greater flexibility for users, better maintainability for the Design System by cutting down total amount of components, and future-proof scalability for evolving design needs.
Adoption
Ground the rebuild in user feedback and testing to create a Figma library that reflects real-world needs. By involving our users, we aim to restore trust and reestablish the Design System as the go-to source for design.

REBUILDING COMPONENTS

Establishing a process

To ensure every component met our standards, I established a clear four step process for the Figma library rebuild. Additionally as project lead, I oversaw and reviewed each component throughout this process.

I owned the rebuild of the Button component—one of the most frequently used component within our library—and will use it as a running example to illustrate the process.

1. Discovery

Before jumping into Figma, each component rebuild began with a deep dive into Grommet documentation and the gathering of live use cases across teams.

The goal of this phase was to build a strong foundation by understanding:

How the component is implemented in code.
What built-in functionality it contains.
The most common (80%) use cases among designers.

Click on images to expand.

Reviewing anatomy
Ex. All required and optional elements within a Button.
Understanding Grommet functionality
Ex. The Grommet Button component contains a busy state.
Mapping out properties
Ex. All variations and configurations of a Button.

2. Collaborative build with developers

After the discovery phase, the Figma component was rebuilt from the ground up. Working closely with developers was essential to ensure that the component accurately reflected their coded counterparts.

Key goals during the build phase included:

Parity with the Grommet component (e.g. naming, layer grouping, responsive behavior)
Scalable construction using Figma Variants and Auto Layout

Click on images to expand.

Building with a variant approach
Ex. The Button was rebuilt into a single component containing 300 variants.
Establishing a strong build foundation
Ex. Correctly applying an auto layout to the Button allows similar resizing behavior with Grommet.

3. User testing & feedback

After the initial build, the component was shared with designers across supported teams for hands-on testing. This allowed us to validate the component’s usability, flexibility, and real-world fit before finalizing.  

During this step, we gathered feedback on:

How easy it was to search for and use the component
Whether common use cases were supported with out of the box variants
How well the component handled edge cases and overrides

“Wow! The new Button is so robust with the amount of built in options it has. This is such an improvement from the previous component.”
“...it’s common within our product that icons are right-aligned within Buttons, can we add that as an option here?”

4. Iterating

With feedback in hand, the component was further refined to better meet user expectations.

In this step, we focused on:

Adding additional variants of the most common use cases
Organizing the variant panel for faster and more efficient use

Click on images to expand.

Reorganizing the component properties panel
Ex. The finalized ordering and naming of all properties within Buttons.
Adding additional use cases
Ex. The option to right align an icon within a Button was added based on user feedback.

SOLUTION & IMPACT

What was delivered?

After nine months of focused work, we launched a fully refactored Figma library built on modern practices, tested with users, and aligned with our Grommet codebase. The release was met with an overwhelmingly positive reception.

A new library of 50 fully rebuilt Figma components
Through this rebuild, we were able to massively consolidate the previous 530+ components.

Impact & key outcomes

The result of this effort was more than just a refreshed component set—it was a fundamental shift in how our design system operated and was perceived.

By letting our users drive this project through testing and feedback, the new library enabled faster, more consistent workflows for designers, improved design-to-dev collaboration, regained lost trust, and re-established the Design System as the single source of truth amongst product teams.

Within the first year of release the team saw:

33% decrease
in component detachment rates, indicating improved usability and flexibility.
400% increase
in component usage, with over 1,000,000+ component inserts.
3/3
originally surveyed teams deprecated their Figma libraries in favor of utilizing Design System components.

REFLECTION

Leading the Figma library rebuild was both rewarding and humbling. One of the biggest challenges was translating Grommet components into Figma while balancing technical parity with usability. Figma has its limitations, and it often required creative workarounds to preserve expected functionality while still delivering an intuitive experience for designers.

Scale was another hurdle. Starting out with 530+ fragmented components and having multiple product teams involved meant that staying organized and aligned was critical. Defining a clear, consistent, and repeatable process paired with regular feedback loops helped us make steady, thoughtful progress.

My biggest takeaway? Don’t be afraid to challenge existing foundations. A full rebuild felt risky and complex, but sticking with a rigid and unscalable library would have held us back even more. Rebuilding allowed us to create something more maintainable, grounded in user needs, and ready for the future.