Design with tokens

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.

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 (--).

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!

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

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

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.

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.

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.