You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
import {Button, Divider} from '@patternfly/react-core';
10
+
import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
11
+
12
+
13
+
## PatternFly 6 design kit
14
+
15
+
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](/get-started/upgrade) to complete your upgrade. Doing so also ensures that you'll have access to the most current PatternFly features, resources, and guidance going forward!
24
+
25
+
If you have questions about the kit, or have trouble with installation, [refer to our help section](#get-help) or [reach out to us on Slack](http://join.slack.com/t/patternfly/shared_invite/zt-1npmqswgk-bF2R1E2rglV8jz5DNTezMQ).
26
+
27
+
### PatternFly fonts
28
+
29
+
To install the fonts that PatternFly uses, [download this GitHub repository](https://github.com/RedHatOfficial/RedHatFont) and install all files in the "TTF" folder.
30
+
31
+
### Design tokens
32
+
33
+
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.](/tokens/about-tokens)
34
+
35
+
## What's in the design kit?
36
+
37
+
The PatternFly 6 design kit gives you access to:
38
+
- Our complete component library.
39
+
- Our design token system.
40
+
- Demos of full-screen designs.
41
+
42
+
## Where do I start?
43
+
44
+
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.
45
+
46
+
Once you're familiar with the kit you're ready to start designing!
47
+
48
+
If you're completely new to PatternFly, you should also first [read this overview of our design system](/get-started/about-patternfly), to learn about everything that PatternFly has to offer and get to know who we are.
49
+
50
+
## How do I stay up to date?
51
+
52
+
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.](#1.-how-do-i-get-figma-access)
53
+
54
+
<br />
55
+
56
+
<Divider />
57
+
58
+
<br />
59
+
60
+
## Get help
61
+
62
+
### 1. How do I get Figma access?
63
+
64
+
- **Red Hat employees:**
65
+
66
+
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.
67
+
68
+
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.
69
+
70
+
- **PatternFly community members:**
71
+
72
+
If you are not a Red Hat employee, you will need to create a copy of the [PatternFly 6 design file](https://www.figma.com/@patternfly) to install the library within your own Figma workspace.
73
+
74
+
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.
75
+
76
+
### 2. Can I still use Sketch?
77
+
78
+
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](https://www.figma.com/@patternfly). Sketch is no longer our recommendation, and the PatternFly 6 design kit is not available in Sketch. [See more details within our Sketch instruction.](/get-started/design#sketch-design-kit)
79
+
80
+
### 3. How do I migrate to Figma?
81
+
82
+
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.
83
+
84
+
### 4. What if I haven't upgraded to PatternFly 6?
85
+
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.
Copy file name to clipboardExpand all lines: packages/documentation-site/patternfly-docs/content/get-started/design-with-sketch.md
+24-63Lines changed: 24 additions & 63 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,91 +2,64 @@
2
2
id: Design
3
3
title: Design with PatternFly
4
4
section: get-started
5
+
source: Design-with-Sketch
5
6
---
6
-
import './get-started.css';
7
7
8
-
Whether you are converting from a previous PatternFly application or starting fresh with the latest and greatest PatternFly design system, this page is intended to help provide designers with information regarding resources and support available.
8
+
import { Alert } from '@patternfly/react-core';
9
9
10
-
## Designing with PatternFly
11
-
PatternFly offers a variety of resources to help you make the most of the design system, including design guidelines for style, content, and component usage, and behavior. You can use these assets in combination with the design kit to create consistent and usable product experiences.
10
+
<Alertvariant="info"title="Unsupported">
11
+
We no longer maintain or update our Sketch design kits and, as a result, this guide is no longer being updated. We strongly advise you to [migrate to Figma](/get-started/design), so that you can continue to receive updated PatternFly design resources.
12
12
13
-
### Design kit
14
-
The design kit is a symbol library implemented in Sketch to help designers, like you, create high-fidelity mockups that reflect PatternFly styling.
15
-
16
-
[**What's in the design kit?**](#whats-in-the-design-kit) <iclass="ws-content-blueArrow fas fa-arrow-right pf-v5-u-mx-sm"></i>
17
-
18
-
### Wireframe kit
19
-
A PatternFly wireframe kit (implemented in Sketch) is also available for creating low or mid-fidelity mockups that are compatible with PatternFly styles. The wireframe kit is separate from the design kit, but the two can be used together for a comprehensive approach to the design life-cycle.
20
-
21
-
[**Learn more about the wireframe kit**](https://github.com/patternfly/patternfly-design-kit/blob/master/PatternFly%204%20-%20Wireframe%20library%20and%20template/Wireframe%20kit%20guideline.md) <iclass="ws-content-blueArrow fas fa-arrow-right pf-v5-u-mx-sm"></i>
22
-
23
-
### Style guidelines
24
-
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? Get answers by clicking the Design guidelines tab associated within each component page.
17
+
The Sketch design kit was our recommendation prior to the release of PatternFly 5. Initial PatternFly 5 components and styles were added to Sketch, but nothing beyond those initial updates will be included going forward. PatternFly 6 and beyond will only be available within Figma.
30
18
31
-
[**View usage and behavior guidelines**](/components/about-modal/design-guidelines) <iclass="ws-content-blueArrow fas fa-arrow-right pf-v5-u-mx-sm"></i>
19
+
If you continue to use Sketch, you will not be following our latest recommendations and will not have access to new PatternFly features.
32
20
33
-
### Content guidelines
34
-
How do you write great microcopy and text for your user interface? Read our content guidelines for general principles, guidance on voice, and a style guide to help you with everything from capitalization to date and time formats.
21
+
The following guide outlines our previous instructions for using Sketch, but they may no longer be relevant or accurate.
35
22
23
+
### Design kit
24
+
The design kit is a symbol library implemented in Sketch to help designers, like you, create high-fidelity mockups that reflect PatternFly styling.
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 behaviors, and check out the code samples (if you’re into that kind of thing).
A PatternFly wireframe kit is also available for creating low or mid-fidelity mockups that are compatible with PatternFly styles. The wireframe kit is separate from the design kit, but the two can be used together for a comprehensive approach to the design life-cycle. You can [learn more about the wireframe kit on GitHub.](https://github.com/patternfly/patternfly-design-kit/blob/master/PatternFly%204%20-%20Wireframe%20library%20and%20template/Wireframe%20kit%20guideline.md)
PatternFly currently uses Red Hat Text and Red Hat Display, [which you can download here](https://github.com/RedHatOfficial/RedHatFont). Once you've downloaded the repository, select all files in the "TTF" folder and double-click to install them onto your computer locally.
50
33
51
-
## What's in the design kit?
34
+
###What's in the design kit?
52
35
53
-
### The template file
36
+
####The template file
54
37
55
38
The template file contains complex components and demos like charts and forms that make it faster and easier for you to add common design patterns to your wireframes. Template examples can be viewed in [our demos](/components/about-modal/html-demos).
56
39
57
40
The contents of the template file are organized alphabetically by component or demo name. If you want to use any of the artboards in the template file to create custom designs, you should follow these rules:
58
41
1. Unhide “padding” group (this group contains all of the spacers we use to create the design)
59
42
2. Edit the design as desired using the spacers as your guide
60
43
61
-
### The symbol library
44
+
####The symbol library
62
45
The PatternFly symbol library contains individual components like buttons, alerts, and badges, that can be combined in any number of ways to solve common design problems. If you’re unfamiliar with Sketch symbols, it might be helpful to skim [this guide](https://www.sketch.com/docs/libraries/library-symbols) before you get started.
63
46
64
47
You can use any symbol offered in the Sketch symbol library to create your design. If you have any questions or need any clarification, you can post to the [PatternFly forum](https://forum.patternfly.org/). If you have any feedback about certain features or encounter a bug, you can file an issue against [patternfly-design-kit](https://github.com/patternfly/patternfly-design-kit/issues) on GitHub.
65
48
66
-
#### Navigating the symbol library
49
+
#####Navigating the symbol library
67
50
There are 2 kinds of symbols - library symbols and document symbols. Library symbols are available in any Sketch document, while document symbols are specific to the document in which they are found.
68
51
69
52
From the top toolbar in Sketch, select Insert → Symbols → Patternfly 4 to add symbols onto your page.
70
53
71
54
PatternFly symbols are designed to be as flexible and adaptable as possible. As such, designers should avoid detaching symbols from the library. However, there are rare instances where this may be necessary. Just know that once a symbol is detached, that symbol will no longer automatically update with new releases.
72
55
73
-
74
-
75
-
76
-
## Getting the design kit
77
-
78
-
The PatternFly design kit was originally developed for [Sketch users](#sketch-users), but is now available for use through [any design tool](#using-other-design-tools).
79
-
80
-
#### Download the font
81
-
PatternFly currently uses Red Hat Text and Red Hat Display. To download these fonts, go to https://github.com/RedHatOfficial/RedHatFont and download the whole repository. Then select all files in the "TTF" folder and double-click. This will install them onto your computer locally.
56
+
<imgsrc="./img/symbol-library.png"alt=""></img>
82
57
83
58
### Using Sketch
84
59
85
60
#### Before you start designing
86
61
The design kit is a collection of Sketch assets that make it easy for designers to create hi-fi mockups that accurately represent PatternFly components and layouts. It works with Sketch libraries. To use it, you need to install [Sketch version 68](https://www.sketch.com/) or above.
87
62
88
-
89
-
90
63
#### Download the template file
91
64
1. Access the [PatternFly template file](https://www.sketch.com/s/729c2eee-e8b6-4fcd-8a79-f6faa8c30f89) on Sketch cloud.
92
65
2. From the "..." menu on the top right, click **Download** to download the file onto your computer.
@@ -100,10 +73,7 @@ The design kit is a collection of Sketch assets that make it easy for designers
100
73
#### Before you begin
101
74
For non-Sketch users, we have created a compatible version of the symbol library to fit with any design tool of choice. We recommend importing the SVG versions into your design tool. Download the SVG set in the [patternfly-design-kit repo](https://github.com/patternfly/patternfly-design-kit/tree/master/Symbols-SVGs).
102
75
103
-
104
-
105
-
106
-
## Using the design kit
76
+
### Using the design kit
107
77
It’s important to understand some specific aspects about the design kit and the assets contained inside to make the most of the design system.
108
78
109
79
*[Spacers](#spacers)
@@ -116,7 +86,7 @@ There’s a lot to learn when it comes to making smart use of the Sketch templat
The layout for all visual elements in Patternfly is determined by spacers. The spacers are used as padding between elements to ensure consistent layout and placement of components into a design that adhere to PatternFly guidelines. All symbols in the symbol library and templates have been made using spacers which are built-in to ensure correct use of elements.
89
+
The layout for all visual elements in Patternfly is determined by spacers. The spacers are used as padding between elements to ensure consistent layout and placement of components into a design that adheres to PatternFly guidelines. All symbols in the symbol library and templates have been made using spacers which are built-in to ensure correct use of elements.
120
90
121
91
The [template library](https://www.sketch.com/s/729c2eee-e8b6-4fcd-8a79-f6faa8c30f89) also contains examples of spacer use to clarify where elements should be placed within a given page or design. These templates have been created in a way that reduces a user’s need to think about spacers. An example of a Login form template can be seen here with different sized spacers - demonstrated by their different colors - used to separate each symbol/component within the layout.
122
92
@@ -129,7 +99,7 @@ For some components, you will have the option to customize them to your need by
129
99
130
100
Layer styles are color selections for symbols in Sketch.
131
101
132
-
102
+
<imgsrc="./img/layer-styles.png"></img>
133
103
134
104
Colors in PatternFly are carefully considered, and custom layer styles are discouraged. There are specific color options to choose from for backgrounds, borders, icons and states, as well as an expansive color library for other elements that do not necessarily fit into a certain category.
135
105
@@ -139,12 +109,3 @@ Note that there is a difference between regular color options and chart color fi
139
109
Currently, all PatternFly text styles use Red Hat Text and Red Hat Display fonts. If you have not done so already, make sure to download according to the instructions [above](#download-the-font) before starting your designs.
140
110
141
111
When inserting text into your design, always assign it a text style by selecting the text item, followed by selecting a text style from the appearance menu on the right toolbar.
142
-
143
-
## Staying up to date
144
-
Adjustments and bug fixes are made to the kit on a regular basis. When we make a change to any of the libraries, you'll be notified via the bell icon in the top right corner of the Sketch window that says “Library Update Available”. To update, click "Update" on the pop-up that appears.
145
-
146
-
We recommend that you keep your kit as up to date as possible. Once a change is accepted, you will not be able to revert to the previous version.
147
-
148
-
Please note that the Patternfly template will NOT be automatically updated as the symbol library is. Every time this template file is updated, you will need to re-download and re-save this as a template. We have added [release notes](https://github.com/patternfly/patternfly-design-kit/blob/master/PatternFly%20release%20notes.md) to the [design-kit-repo](https://github.com/patternfly/patternfly-design-kit/) that document additions and edits to the design kit. This is a good place to start to review what has been added to the template file.
149
-
150
-
Did you use the old versions of the symbols that were updated in files already? No problem - you'll receive another notification in the top right of that specific Sketch file that will allow you to update them.
0 commit comments