Overview

Product Design

Getting started as a designer at Thumbtack.

Note

This page includes documentation and information that is pertinent to the internal design team at Thumbtack.

Getting started

Design libraries

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.

Download and install fonts

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:

Change your nudge settings

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.

Best Practices

Always use global styles

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.

Leverage auto layout

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.

Keep your libraries up to date

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.

Suggested Plugins

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.

Coming soon!

Support

Making requests

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

Coda request form

Slack channels

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

#design-systems

Office hours

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

Was this page helpful?

We use this feedback to improve the quality of our documentation.