
Building a Shared Component Library to Accelerate Prototyping
My Role
Identified gap in shared design resources, established first reusable components, promoted the idea to team
Feature
Figma component library
Users
Other Designers
Impact
Reduced repetitive design work, improved consistency between prototypes, reduced prototype turnaround
Overview
As our product team grew, so did the number of UX designers creating prototypes across the product. Four designers were independently building experiences, but we had no shared component library or established system for reusing design assets.
The result was predictable: similar UI elements were being recreated repeatedly, prototypes looked and behaved inconsistently, and designers spent valuable time solving the same problems over and over.
I saw an opportunity to introduce a lightweight shared component library that could improve consistency while making prototyping significantly faster.
Outcome: What once took roughly a week to prepare for an initial prototype review could typically be turned around in a couple of days.
The Problem
Four UX designers were regularly creating prototypes for different areas of the product, but each designer was effectively working from their own collection of assets.
There was no centralized source for:
-
Buttons and controls
-
Typography styles
-
Common interaction patterns
-
Navigation components
-
Reusable layouts
-
Prototype-ready interaction patterns
This created two problems:
-
Inconsistency. Similar experiences could look and behave differently depending on who created the prototype. Even small differences in typography, controls, spacing, or interaction behavior added up to a product that felt less cohesive.
-
Repeated work. Designers were also recreating common assets and interactions from scratch. A button, navigation pattern, or page structure that one designer had already built might be rebuilt several times by others.
This wasn't just inefficient—it slowed down the feedback loop.
A prototype could take a full week before it was ready for its first review, meaning ideas took longer to get in front of stakeholders and users.
The Opportunity
Rather than trying to solve every design-system problem at once, I started with the smallest useful version of a shared library.
My initial goal was simple. Make the things designers repeatedly recreate easy to find, easy to reuse, and easy to keep up to date.
Starting small also reduced the organizational overhead of introducing a new system. I could demonstrate value quickly instead of asking the team to adopt a large, theoretical design system upfront.
Starting Small
I began by creating a basic set of reusable components:
-
Buttons
-
Font and text styles
-
Common UI assets
I organized these into a shared asset library that was accessible to the other UX designers in the organization.
The library also included a subscription/notification mechanism so designers could be alerted when updates became available.
This was important because a shared library is only useful if people know that it exists—and trust that it is being maintained.
Instead of designers asking, “Does someone already have this?”, they had a shared place to look.
Growing the Library
Once the initial components proved useful, I expanded the library based on what designers were actually building.
Over the following weeks, it grew to include:
-
Interaction patterns: Reusable patterns for common interactions meant designers no longer needed to recreate the same behaviors from scratch.
-
Navigation: Common navigation types gave prototypes a more consistent structure and appearance across different product areas.
-
Page layouts: Eventually, the library expanded beyond individual components into complete page layouts.
These layouts could be linked together to create more complex prototype flows quickly.
This shifted the library from being simply a collection of visual assets into something closer to a prototyping toolkit.
The Workflow Change
The biggest impact wasn't simply that designers had more components. It was that the starting point for a prototype changed.
Before
Idea → Recreate UI → Build interactions → Assemble screens → Review
After
Idea → Pull from shared library → Assemble screens → Customize → Review
Instead of spending time rebuilding foundational UI, designers could focus more of their time on the actual experience they were trying to explore.
Results
Prototype turnaround
Before: ~1 week to reach an initial review
After: ~2 days in many cases
That shortened the time between an idea and seeing it represented as an interactive experience.
The library also helped reduce stylistic discrepancies between designers and made previously created work more reusable across projects.
Most importantly, it established a shared foundation that could continue to grow as new patterns emerged.
What I Learned
Start with the highest-friction problems. I didn't begin by attempting to create a comprehensive design system. I started with buttons and typography because they were common, relatively easy to standardize, and immediately useful. That gave the team something tangible to use and created momentum for expanding the system.
A library needs to be useful before it needs to be comprehensive. The value came from making frequently recreated things available at the moment designers needed them. Rather than trying to anticipate every possible component, I let actual design work reveal what should be added next.
Consistency and speed can reinforce each other. The library wasn't only about making the product look more consistent. Reusable components also removed repetitive work from the prototyping process. Better consistency became a byproduct of a faster workflow.
Design systems can begin as workflow improvements. This project started as a practical solution to a prototyping problem. It didn't require a large formal initiative or a complete design-system strategy to create value. Sometimes the best way to introduce a system is simply to solve one recurring problem really well.