Upgrading a Design System

The larger team consisted of 36+ development teams, and 20 UX designers. During onboarding, multiple instances of the same pattern built three different ways were discovered. Keeping everyone on the same page was a challenge.

The previous design team used Axure, which handled complex prototyping beautifully, but broke down for real-time, collaborative library management.

This lead to:

• Disparate UX across products
• Inconsistent UI patterns
• Duplicated design effort
• Unnecessary component variants
• Differing interpretations of shared styles, causing rework and slower delivery
• Unclear system ownership, making maintenance harder and quality unpredictable

Goal 1

Increase cross team consistency by establishing a single, shared component library for internal and external products.

Goal 2

Reduce redesign and review cycles by improving component quality, states, and documentation clarity in Figma.

Goal 3

Enable scale by defining an organization plan for additional internal-only libraries so teams can add patterns without creating duplicates.

I was part of a small Librarian team that rebuilt the design system in Figma, establishing a reliable component foundation, clear library organization, and quality standards teams could trust. I defined the structure that let teams find, use, and extend components without breaking conventions.

I also built additional pattern libraries for internal-only work, auditing multiple tracks of production work and documenting what already existed. I maintained the system as product needs evolved, keeping both UX and development teams working from one dependable source of truth, improving consistency, accessibility, and delivery speed.

We created Figma templates for our basic screens, a pipeline process for authenticating design system and accessibility adherence, context-setting slides for presentations to stakeholders, and an annotation system for our Figma files.

The shift to Figma delivered:

1. A single source of truth. One published library replaced scattered .rplib copies.
2. Consistent, well-documented components. Clear naming and structure made specs easier to reference during handoff.
3. Real-time collaboration. Multi-player editing removed file check-out delays and errors.

Business Impact

The new design system gives teams a shared foundation that improves consistency across multiple workflows and user experiences. By reducing duplicated component work and making patterns easier to find and reuse, the system helped teams move through design and reviews faster. It also improved maintainability by making updates more deliberate and easier to distribute, reducing the risk of drift as products evolve. All of this saves time and money for the client.

Learnings

• Clear naming and library structure prevents confusion more than any single component does.
• Quality work in a design system often means sweating edge cases, states, and variants that do not show up in happy path mockups.
• Adoption depends on trust; consistent updates and responsive maintenance build that trust faster than a big launch.

Next Steps

• Partner with engineering to reduce design inconsistencies in products.
• Incorporate Dev Mode in Figma once approved by Federal budget.
• Audit components regularly for inconsistencies, detached instances, or outdated styles.
• Deprecate and remove components that are no longer in use.
• Enforce naming conventions and organizational structure as the library grows.