Before you begin, check out our overview of PatternFly 4 to get acquainted with the basic elements of the design system.
The design kit is a collection of assets that make it easy for you to create high-fidelity design mockups using PatternFly 4 components.
The design kit works with Sketch libraries and templates. To use it, you can get Sketch version 47 or above. For users who do not have access to Sketch, a subset of functionality from our Sketch files, like symbols and fonts, can be imported and used in the free design tool, Figma. Learn more about importing Sketch files in the Figma documentation.
Add the Sketch library
- Access the PatternFly 4 design library on Sketch cloud.
- Click Add library to Sketch on the bottom right to add the library. You'll be prompted with a modal. Click Add library to Sketch again. Sketch will show you the library in your preferences window. You're all set!
Add the Sketch template
- Access the PatternFly 4 design template on Sketch cloud.
- Click Download Document on the bottom right to add the library.
- Navigate to the file you just downloaded,
PatternFly 4 Template.sketch, and open it.
- Navigate to
File > Save as Template...and name your file whatever makes sense to you. We recommend something simple like
PatternFly 4. You can now access the PatternFly 4 template from
File > New from Template....
PatternFly is made up of modular components that can be assembled in a variety of ways to build applications and interfaces, along with styles, standards, and design guidelines to help you choose and use the right components for your project.
What typography should you be using? What about colors? Spacing? Check out styles to learn everything you need to know about our foundational design elements.
Should you use a wizard or a form to solve this problem? How do you write a good button label? Which navigation makes the most sense? Check out our design guidelines to choose and use the right components for your use case.
What does a toolbar look like? What about a filter chip? Components are the building blocks of the design system. Check out individual component pages to view examples, understand states and behavior, and check out the code samples (if you’re into that kind of thing).
What does it look like when you combine all the ingredients? Demos provide examples of a few common ways you might combine layouts and components to give you an idea what’s possible.