November 2018 – January 2019

Figma UI Kit

At Gusto the design team uses Figma to make mockups and prototypes of new features as well as wireframes for potential improvements to be made. I noticed that there were a lot of discrepancies between what designers were making and what engineers would implement though so I made a UI Kit to improve communication between teams. This included a list of every component including detailed documentation about typesetting, colors, icons, and illustrations.

Role

Built the UI Kit from the ground up.

Result

High quality documentation for Gusto’s design patterns and components.

Improving the designer experience at Gusto

The design team at Gusto uses the design web app Figma to make mockups and prototypes and, in some cases, even to flesh out specs for how a product should ultimately be built. Designers can then share these documents with project managers, engineers, and stakeholders with ease.

Once I had finished making all of the component symbols I created a sticker sheet so that designers could go shopping for the things they were looking for:

This encouraged designers and engineers to stick to our React page templates, components, icons, and form elements in the Figma pattern library instead of creating new assets. This UI Kit soon became extraordinarily helpful for arguing to build more consistent interfaces and components and it helped our design team work faster as they no longer have to keep redrawing the same elements over and over again for every new project.

Here’s one example of how a designer could quickly pull in the components that they needed:

With these new tools in Figma we could quickly make mockups of high-fidelity user interfaces for testing and prototyping.

I also happened to write a little bit about how I made these nested components, too.