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.
Next…
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.
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!
