Designing Systems at Gusto. Building tools for and collaborating…
By: Derek Torsani
Tags: Figma, Gusto, Design Systems, Design, Product Design

Every system is different, every component is different, and every designer is different. There is no right or wrong way to build components. The way Figma is built actually allows and encourages many ways to build the same thing. That is the power of the program, and beauty of the different ways designers work. What’s important, is that we build tools that are flexible and allow designers to use them without thinking about how they work.

Example of Input interactivity and auto layout

Patterns

The next step after components, which utilize foundational elements to become something interactive or informational, is the compiling of patterns. Patterns are made up of components to complete an entire interaction. For example, one pattern we use a lot at Gusto is a Form. This is made up of a section title (using text styles — Foundation), any combination of inputs (Components), possibly a checkbox or disclaimer text for agreement (Components/Foundation text styles), and actions (another pattern made up of button components).

Anatomy of a Form

Together, these all combine to make the Form Pattern in our system. What comes with this pattern is an example using the previous stated components, patterns, and foundations, in an auto layout which implies our intended spacing. Patterns are a great way to build in documentation through things like spacing. In certain circumstances, we also encourage detaching patterns. An example of an encouraging detachment of a pattern would be when the Form pattern does not have all of the elements you need in the example that comes out of the box. If a designer needs an additional input or another checkbox group, the pattern can be detached, allowing designers to add in more elements that fit directly into the auto layout that is the entire Form frame. At this point of the design process, guidelines on what can be added to a form and how it should be used in that form would be found in our documentation on the docs website.

Workbench Documentation Website

Templates

To help designers get started designing their projects, we created a set of templates they can use to easily and quickly jump into designing without worrying about finding an existing design to duplicate. These templates are built for several different user types and at our most commonly used screen sizes.

Lab

On the design systems team, we have developed an area of our component library called Lab, which is a place where we can surface items that are in progress but ready to start being tested and used. This practice helps us to inform designers and engineers on what we’re working on and what is coming soon.

Tools

To help designers easily find what they’re looking for when searching in the Figma asset library, all of these foundational elements, components, patterns, and templates utilize a description to include any possible search terms. It’s very important that each designer feels free to know items as they do based on their experience and are able to search what comes to their mind to find what they are looking for.

Example of searching for a component by many names

At Gusto, we sometimes show mockups externally, and therefore have certain names, photos, emails, company names, etc. which have been approved by our legal team that we must use in these mockups. To help designers quickly and efficiently populate mockups, we created a Google Sheet that has a variety of approved details on it that can be used with the Google Sheets Sync plugin for Figma.

Worker Content Plugin Example

Continuing the work of helping designers get started more easily and collaborate more efficiently, we created a Figma plugin that populates a new Figma file with a page structure and starter templates. The page structure we insert when running the plugin was influenced by what designers were using in their own file templates.

Gathering Feedback

The design systems team in continuously helping onboard new designers and providing workshops for people to learn and understand how to build for Gusto using Workbench Figma. To help us gather insights, we send out surveys that allow people to submit anonymous feedback so we can learn how we can improve what we are doing for the team, and ultimately our customers.

Figma Design System Workshop Feedback Form

Since a design system is a living and breathing ecosystem of assets built for designers, engineers, researchers, writers, etc. provided to a product organization, it’s important for us to remember that there is always work to be done, and things to be improved upon. Our work is meant to sustain, help people work better together, and be something that is maintained and evolved with the product and company. The reality is that we are imperfect and there is always room for improvement, there may be something we missed that we need to go back and fix, or the brand changes, the product grows and we need to move with the swerves of the business and team.

We use periodic sentiment analysis through surveys to understand how our work is affecting the rest of the organization, retrospective usage reflections with designers and engineers to know how we could have done better with the tools we provided them, and metric tools like Figma library analytics to know how and when certain components are being used to build designs. With metrics inside of Figma, we have also been able to watch the trends of how the new asset library is used in comparison to the legacy library, and how adoption changes week to week.

Figma Library Metrics

Communication

The continuous evolution of our design system tools informs a very necessary collaborative process with our broader team members.

There’s much more communication with product designers from a design systems team than updates when there is a new release. Communication is the most important aspect of a relationship between a design systems team member and those they are building tools for. Especially in a remote environment, intentionality around communication is absolutely crucial. The designers we build tools for should feel comfortable reaching out to us with a question on how to use a Figma component, or to tell us that it’s broken and needs fixing, or to pair with us on ideas for a new component.

One way we asynchronously communicate with designers is through providing screen recorded documentation on how to use the components in Figma. These videos are recorded using Loom and have a home on each component page on our documentation website. With these videos comes written communication on how to properly use assets from our design system — ie. When to use, when not to use, ways to use, etc.

Another way of communicating is simply through Slack. We have a dedicated channel for design systems, where people can reach out with any design system specific questions. There is also a channel for product design. Per the designers preference, we share updates to them directly in the product design channel, and use it to initiate conversations for anything new we’re working on.

Collaboration

Product designers should feel as much a part of the design system creation process as they wish. Whether that means submitting an idea, helping work through a bug, or contributing to working through a new component proposal and helping to build the asset in Figma. We have refined our contribution process recently to help make this more approachable for designers. It’s very important to us that designers are a part of the decision making process when it comes to creating new or altering existing components, patterns, styles, etc.

Using Airtable, we created an inquiry submission as the first phase of this collaborative process. This form is accessible from our design system website as well as the UI kit we mentioned before. It allows designers to input their name, team, and choose from a few options of either reporting a bug, submitting a change request, nominating a new component or icon, or to let us know they detached something they don’t feel they should need to.

Design Systems Submission Form

A reporter can also attach an image or screenshot, along with any description about what they are reporting. From here, we reach out to them directly to gather any additional information. For nominations of something new, we ask other designers to help validate the need of this item. This validation doesn’t determine whether or not we create what they need, but more so tells us how greatly it will affect the organization. After we receive any validation which influences how we prioritize this new item in our production roadmap, someone from Design Systems will pair with the designer who wants to work on the item to construct a proposal. This proposal is created in Figma, and walks through user stories, business goals, internal and external audits, then explorations for the actual item. Once we feel confident in our solution, we then bring in other designers to help test the component to work out any kinks. When appropriate, we build a prototype to test and gather feedback from potential customers. After any necessary revisions, we are ready to work with engineering to develop the component.

In addition to pairing with designers to help work through component decisions, there are other ways to create space to collaborate with designers. One way is to insert ourselves as much as we can into team-wide design reviews. Each week we have design reviews where designers present what they’re working on. It always helps for one of the designers from the design systems team to be representing design systems in the meeting. This allows us to approach feedback in a different way than their fellow product designers, and focus on new components they may be thinking about, or how they might be able to more closely align with the guidance from the design system.

With a new design system in Figma, revisions to naming structures, and how components are built utilizing features in Figma like Auto Layout and Variants, comes the need to allow space for designers to come ask questions. This encouraged us to open Figma Office Hours, an optional weekly thirty minute call for people to come and ask any questions they may have about our design system in Figma. This is in addition to our weekly Design System Office Hours, which is used to discuss the progress and status of components.