Design with tokens

PatternFly 6 design kit

PatternFly tokens are only available as part of the PatternFly 6 design kit. In order to make use of our token system, you will need to upgrade to PatternFly 6.

What is in the PatternFly 6 design kit


Our tokens are set up at a high level as Figma variables and styles.

In Figma, the variable names look similar to token names, but will be separated by a forward slash (/) instead of a double hyphen (--).

Table of brand color tokens.

Component library

You will have access to all PatternFly tokens when you install the component library. PatternFly 6 components are built with tokens. From the colors used, to the spacing of elements, to the font size: tokens control it all!

PatternFly alert components built with Figma tokens.

Using the PatternFly 6 design kit

To install the design kit, find instructions in our design onboarding guide.

Using PatternFly 6 components

As you insert a component into a Figma design workspace, you can adjust properties and variable modes to customize the appearance to your needs.

PatternFly alert components built with Figma tokens.

Once you've inserted a component into your workspace, you can continue to customize different parts of its appearance in Figma's design sidebar. Here, you will be able to see all tokens that can be used within a particular design property.

Making customizations

Occasionally, you may find that you need to customize a design beyond what the PatternFly component natively supports. For example, adding text or adding custom spacing.

Our tokens are intentionally scoped so that they can only be used to modify relevant and related visual attributes. For example, a token may have its color scope limited so that it can only be used as a fill color or a stroke color. This means that, while you can use tokens to customize a design, you will only be able to use certain tokens in certain situations. This helps ensure that you're using tokens that are conceptually related to each design element that you're working on.

Migrate to tokens

Our tokens are only available within Figma. If you've previously designed with PatternFly by using our Sketch design kits, you will need to begin to create all new product designs within Figma.

If you have any existing Sketch-based designs that you want to migrate into Figma, you will need to manually recreate each UI mockup using the PatternFly 6 component library.

View source on GitHub