Skip to main content

Getting started

Figma currently supports shadows typography* colors icons and logos. Tokens like motion and spacing are not supported out of the box.

Using color​

Accessing color tokens​

All of our colors are available to be used in Figma. When creating elements, select the style button to access all color tokens.

Search for color tokens​

To search for color tokens, you can type keywords to match the color that you need.

Component colors​

Most components have access to all the colors, but some components utilize predefined themes such as buttons & tooltips

example of a component with themes

Using shadows​

Access shadow tokens​

To access shadows, select the object and scroll down to effects and select the style button.

Using typography​

Access typography tokens​

To access typography tokens, select the object and scroll down to typography and select the style button.

Search typography tokens​

All text tokens can be searched with keywords.

Detaching type styles​

There will be instances where you need to mix styles such as italics & strikethrough with normal text-only then should you detach from our text tokens in Figma. We recommend that you select the token closest to what you need then begin to modify the text. Be sure when you are adjusting line-height, you still reference our line-height tokens.

example of detaching text

Using Icons & Logos​

Access typography tokens​

To access any icons or logos, use the design token library under the asset panels. If you do not see it click the book icon and ensure it is enabled.

How to properly change icons​

When swapping icons, be sure not to double-click the icon but instead select the icon and use the component drop down to find the icon you need. You can search all icons that have keywords.

Using Spacing & Motion​

Setting Spacing​

Since Figma does not support enforcing spacing tokens, designers must ensure that all spacing in the designs uses our included spacing tokens. To set the value, select and input the token size value. Zeplin hand-off tools do have a check to see if the spacing is one of our tokens. Designers should make it a habit to check using Zeplin to find spacing discrepancies quickly.

example where you manually set spacing tokens

Setting motion tokens​

When setting prototypes, be sure to look over our motion tokens such as duration and easing and use them to get an accurate depiction of how the transition will appear.

Still have questions?​

Please feel free to reach out in our #figma-nerds channel or #wpds channel for any other questions.