Product Design

As a product designer, you will automatically have access to all of Thumbprint design libraries. If you would like to exclude any libraries from your designs and you prefer to work with files that are platform specific, you will need to deselect the unwanted libraries for each file you create.

Mark For Thumbtack, our primary font, is used for 100% of our product. All of the weights can be found here:

Important! You will need to reach out to the design systems team to request our custom in-house font.

Our design files also include some uses of system fonts for native apps, so it’s a good idea to also have them installed too:

Thumbprint has a specific vertical rhythm and defined spacing units that make applying and managing space easy for all parties.

By changing your nudge settings to align with our vertical rhythm, you’ll find bumping and aligning elements in the frame much easier.

It’s recommend keeping Small Nudge at 1 and changing Big Nudge to 8.

Always use the global styles for color and type that can be found in the inspector.

The icon for global styling is 4 dots.

Using document styles or colors doesn’t attach the style name to the code, meaning your developer won’t have access to important information that is necessary for him/her to implement the right style.

Constraints are an important part of the process with Figma. When used in conjunction with a layout grid, they become an easy way to save time as you iterate or need to communicate how something scales.

Sometimes frames have both Scale options selected, and this is generally not good for resizing your artboard. We recommend checking them often, as it saves time over the long haul.

When DS has an update or new component to share, we’ll publish it to the rest of the team through Figma.

You’ll see a blue dot in the team library section or a message in the lower right asking you to review the updates to an existing component.

To support our design practices better, we occasionally adopt and leverage design resources from the wider Figma design community. One example is the usage of Figma plugins. Below is a list of recommended plugins that are beneficial to supporting our design processes.

Contrast

Evaluates foreground and background colors against Web Content Accessibility Guidelines (WCAG). Scan entire pages to see all text-layer color issues at once.

Get the plugin

Submissions are sent through our Coda request form. Issues later get triaged and go through the design to development process.

Coda request form

Resources for more inlilne conversations and discussions. Ask and answer questions.

The design systems team holds a weekly hour (held over Zoom) session set aside exclusively for more qualitative insights about how to use the system.

Tuesdays @ 11am PST