Design with PatternFly

To start designing with PatternFly, you will need to install our PatternFly 6 design kit. This kit gives you access to PatternFly's visual design system — including design tokens — so that you can create consistent and usable product experiences.

In order to use PatternFly 6, your product must be using the PatternFly 6 design kit. If you haven't yet, you can follow our upgrade guide to complete your upgrade. Doing so also ensures that you'll have access to the most current PatternFly features, resources, and guidance going forward!

If you have questions about the kit, or have trouble with installation, refer to our help section or reach out to us on Slack.

To install the fonts that PatternFly uses, download this GitHub repository and install all files in the "TTF" folder.

PatternFly 6 is built off of our new design token system. For more background and instructions regarding our token system, check out our tokens documentation.

The PatternFly 6 design kit gives you access to:

• Our complete component library.
• Our design token system.
• Demos of full-screen designs.

After you install the PatternFly 6 Figma workspace, you will find a welcome page to help guide you through your first steps. Take time to read this information to familiarize yourself with our component library, contribution guidelines, and contact methods.

Once you're familiar with the kit you're ready to start designing!

If you're completely new to PatternFly, you should also first read this overview of our design system, to learn about everything that PatternFly has to offer and get to know who we are.

We plan to regularly release design kit updates to address any bugs and to evolve our design solutions. If you're a Red Hat employee, then you will automatically receive updates as they are released. If you are not a Red Hat employee, then you will have to manually check our Figma community page to find and install updates. Read more about Figma access levels here.

• Red Hat employees:

  If you are a Red Hat employee on the User Experience Design (UXD) team, you will be added to the UXD workspace in Figma. This allows you to instantly receive library updates as they are made by the team.

  If you are a Red Hat employee, but you are not on the UXD team, you should work with your manager to be added to your team's respective workspace in Figma.

• PatternFly community members:

  If you are not a Red Hat employee, you will need to create a copy of the PatternFly 6 design file to install the library within your own Figma workspace.

  Note that you will not be able to receive automatic library updates since you are working from a local copy. The PatternFly team will release any updates every other week, as part of their sprint schedule. Be sure to revisit our Figma community page in order to download the latest updates.

Before PatternFly 5, the PatternFly design kit was available within Sketch. We migrated our design system to Figma, with the release of the PatternFly 5 library. Sketch is no longer our recommendation, and the PatternFly 6 design kit is not available in Sketch. See more details within our Sketch instruction.

To migrate to Figma, just begin to create all new design work within Figma. If you have existing designs in another design tool that you want to bring into Figma, you will need to manually recreate each UI mockup using the PatternFly 6 component library.

If your product hasn't been upgraded to PatternFly 6, you cannot use the PatternFly 6 design kit nor design tokens. Previous PatternFly libraries will no longer be maintained after the release of PatternFly 6.