Design system

Figma Guide

Figma is our tool of choice when designing and using our design system. Other design software is currently not supported, but maybe in the future.


Getting started

Requesting access

If you are a Washington Post employee, please submit a SAR to gain access to your Figma Product & Design workspace. If you are not a post employee and are looking to use WPDS Ui Kit, please reference these Figma files. WPDS Ui Kit & WPDS Asset Manager.

Prerequisite

Before jumping into Figma and using our design system, you must first understand the concepts around our system. The Figma library is built and designed to parallel what is happening in the code. Please read over the following before proceeding with this guide.

  1. Color
  2. Tokens - color, radius, shadow, size, typoggraphy, z-index
  3. Asset

Using components

Enabling our Figma libraries

When using our Figma library, it is essential not to detach as this will give you the optimal experience when handing off designs to a developer.

Component variants

All of our components match the coded API (properties of the variants) as close as possible.

Slots

Some of our components use a concept called slots. Slots are for you to replace with your component or nest another component. To replace, select the slot in the layer and replace it with the desired component. You can build out a design that does not need to be detached by replacing slots.

This example shows available slots to replace with other local or design system components

Icons

If an icon layer of a component is locked, this indicates that you should not change the icon. Otherwise, you may modify the icon glyph using any icon available in our Asset Manager.

Use Figma variant controls

Only use the Figma variant controls when modifying the Figma component to apply the desired variant. These controls closely match to the coded component and inform the developer on what property value to assign. Avoid manually overriding the properties by selecting the layers.


Using our tokens

Applying tokens

In Figma, we have two tokens managed by the native Figma UI. The shadow and color tokens can be accessed by selecting the style icon. All other tokens are handled either through our token tools or manually.

Applying color

Select the style icon and apply the fill or stroke color to apply a color token in Figma. When selecting a color style, all tokens are displayed; a helpful way of picking the right colors is to use our theme alias to assign color with intention.

Applying shadows

To apply shadows to an element, select the effects in the design panel and apply one of the shadow tokens.

Applying other tokens

We developed a plugin to manage and assign tokens in Figma that are currently not supported or flexible enough to be used in design without detaching the style. Our plugin resolves this by connecting our tokens while still being flexible in Figma.

Installing Token Tools

To install the plugin, visit the plugin landing page and install. You will now have access to the plugin in your Figma file. If you do not see the plugin, please reload the file.

Token tools

Token Tools is a plugin that we will iterate and expand on as our needs grow with the system. The interface design mimics Figma UI to avoid learning new interaction patterns.

Theme

The theme tool in token tools applies the matching color for that theme switching it from its current context to the following context.

Border radius

Using the border radius tool will apply the border radius token to any frame or shape that has a uniform border radius.

Font size & Line height

The font size and line height tool will apply the token to the selected text element.

Font weight & Font Family

Currently, token tools do not manage font family or font weight. However, in the WPDS Zeplin extension, the extension will note the tokens. For more information, please refer to our tokens documentation to apply the correct value in Figma.

Read next our Zeplin guide >