Design system reset and rebuild

Summary

Paylocity's design system tooling had gradually grown more complex and difficult to use. With Paylocity's new design language on the way, I was asked to join the systems design squad and lead a complete rebuild of the Figma libraries.

Skills

Design systems, Figma

Year

2024

If a designer can only juggle 4 or 5 balls at one time (let's be generous), how many of them should be tied to problem complexity, and how many should come from design system complexity?

Summary

Paylocity's design system had slowly grown too complex. After a company re-org, I was asked to help refocus that team as Paylocity prepared to launch a new design language and needed design tooling to support it. I talked with product designers to understand their frustrations, mapped out a new strategy for our system and Figma tools, and then led the design side of putting that plan into action.

I proposed a more straightforward strategy

I set a clear path for how our design system should be built. The old version was packed with odd methods and needless complexity that strayed from what most designers know and use. My new approach focused on simplicity and used token systems and Figma features that have become standard across the industry.

Documenting and sharing the strategy

Figma library hierarchy

I proposed a four-tier framework for our Figma library files:

A diagram showing the four-tier library structure

I compared our library files to parts of speech, which helped designers quickly understand what each library was for:

Diagram comparing libraries to parts of speech

I broke down each library file with diagrams showing exactly what would live in each one:

Design tokens

Arielle Cerini, a designer on our team, created a token system that matched our "simple and familiar" goal by closely following the W3C draft design tokens spec. I documented this system to make it easy to explain to others.

Style guide

With the strategy set, I made a style guide to help everyone building the Figma libraries create consistent components and docs. The guide covered concrete basics like naming layers and structuring properties panels, plus more abstract concepts like when to use slot components.

Style guide examples of properties and slots — I included visual examples showing how to build properties panels and slot patterns. Talking with our product designers helped me understand when to keep things simple and what options were truly needed in component settings.

Component checklist — I created a simple checklist to help everyone remember all the steps needed to build a production-ready component.

Building the libraries

I built all the mobile component libraries and wrote all of the documentation for both Paylocity's current and future design languages. Here are some highlights from the building process:

Table of contents in Figma file — I designed linked index pages to make Figma files easier to navigate.

Color system swatches — Swatches organized by color family.

Color role documentation — Documentation showed how colors map to specific UI roles (in this case our AI/ML feature role).

Input field components — Form input components with various states and variants.

List components — List item components showing different states and configurations.

Card component documentation — Documentation for the card header component showing its structure and options.

Token documentation for engineers — A slide from my 'Intro to Tokens' guide that helps our engineering team understand how tokens work in the system.

Reference tokens documentation — Another slide from the token guide showing how reference tokens create a connected system.

Conclusion

This design system rebuild has drastically reduced designer complaints about how difficult it is to use. It went from a source of frustration to a tool that helps designers solve real problems faster.

The system continues to grow and evolve with Paylocity's needs. Now we have a solid foundation and clear principles that help us make better decisions about what to add and what to leave out.

Previous project Next project