Waiting for a sign to start building your design team’s component library?

We’ve been using Figma’s team component library for 7 months now, and it is awesome.

About a year ago at Gusto we were talking about building a component library; the holy grail signifying a design team maturing from a startup to a team that puts value on process. A component library would let us design and build without bickering about consistency. It would let us design at scale.

In the beginning, the scary part about the conversation was always “where do we start”? But things got interesting when an announcement came from Figma that their ‘team library’ shared component feature was in beta. This was the time to begin.

We started by documenting every element, form, page, modal and alert—and laying them out side-by-side.

Mostly all the UI within Gusto as of December 2016


we identified all the common elements that could be consolidated, breaking them into their own files, and then designing the various states for each ‘master’ element in Figma. One by one, each element and page became available to the rest of the team.

Shoutout to Robin Rendle for doing the bulk of this work 🙌

Previously at Gusto we copied and pasted buttons, elements, or frames from previous designs. When moving fast, this would cause inconsistencies and mistakes across versions, or from different designers. Errors like that result in pointless conversations with stakeholders or engineers that sounded like:

“Why are the icons different in the navigation? Are we changing this?”

“No, that’s old! Ignore that!”

Embarrassing and a waste of time for everybody.

Now whenever I start a new design, it takes me seconds to create the skeleton I need, or to pull from our shared set of elements and components to build a new flow. And the best part is they’re always the newest, freshest, most up-to-date version.

Just search, click, and drag. Boom!

Relatively simple — but this process is how we’ve managed to get our team of designers using the exact same designs for page layouts and elements.

It didn’t take long at all before we were all using the exact same components across design files and cross-functional teams throughout the company. Saving time, saving money, and streamlining clear communication amongst designers.

Kudos to the team at Figma building tools that truly help us design products faster and better. We appreciate you! ❤️🚀

Disclaimer: Figma didn’t sponsor the writing of this post. They thought it was helpful for other designers, so they’re advertising it on Twitter and Facebook with my permission.

For more musings on design, follow me on Twitter or say what’s up to the Gusto Design team on Dribbble. Also—we’re hiring!




Lead Product Designer at Amplitude

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
William Newton

William Newton

Lead Product Designer at Amplitude

More from Medium

Inclusive design & Universal design principles

White pen and notepads on a white desk.

How I implemented a design system in a fast-paced startup

Multiplying the value of the Sainsbury’s design system

Photo of devices with Sainsburys, Habitat and Nectar branded screens showing on them.

How user flows became the core of our powerful filing system in Figma