diff --git a/packages/documentation-site/patternfly-docs/content/contribute/design/design.md b/packages/documentation-site/patternfly-docs/content/contribute/design/design.md
index 665812afc1..6db887b312 100644
--- a/packages/documentation-site/patternfly-docs/content/contribute/design/design.md
+++ b/packages/documentation-site/patternfly-docs/content/contribute/design/design.md
@@ -24,8 +24,11 @@ __Example__
You may open an issue in our [patternfly-org repo](https://github.com/patternfly/patternfly-org) to propose a new design guideline page or update an existing guideline, and work with the PatternFly team and stakeholders to author and publish your new content. Visit [Contributing to patternfly org for designers](https://github.com/patternfly/patternfly-org/wiki/Contributing-to-patternfly-org-for-designers) for detailed instructions about how to author and contribute design guideline content.
-### PatternFly design kit
-The [PatternFly design kit](https://www.patternfly.org/v4/get-started/design) is a [Sketch](https://www.sketch.com) library that makes it easy for designers to create high-fidelity mockups using PatternFly components.
+### PatternFly Sketch design kit
+
+**Note:** We have migrated the PatternFly design system to Figma and no longer maintain or update our Sketch design kits. The following information may be out of date as a result. For information on how to migrate to Figma, read our ["Design with PatternFly" guide.](/get-started/design)
+
+The [PatternFly design kit](/design#sketch-design-kit) is a [Sketch](https://www.sketch.com) library that makes it easy for designers to create high-fidelity mockups using PatternFly components.
__Example__
*I want to implement a new component in the PatternFly Sketch symbol library.*
diff --git a/packages/documentation-site/patternfly-docs/content/get-started/design.md b/packages/documentation-site/patternfly-docs/content/get-started/design.md
index 59c6a10e95..4a2a891364 100755
--- a/packages/documentation-site/patternfly-docs/content/get-started/design.md
+++ b/packages/documentation-site/patternfly-docs/content/get-started/design.md
@@ -5,10 +5,37 @@ section: get-started
---
import './get-started.css';
-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.
+To start designing with PatternFly, you will need to install our design kits and libraries. These resources give you full access to PatternFly's visual design system and enable you to create consistent and usable product experiences.
-## Designing with PatternFly
-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.
+## Figma library
+
+PatternFly 5 has been set up within Figma. To download the Figma library, which contains all PatternFly components and styles, visit our [PatternFly community page.](https://www.figma.com/@patternfly)
+
+
+
+
+
+Previously, the PatternFly design kit was available within Sketch. We have migrated our design libraries to Figma, in order to take advantage of its real-time collaboration features that help streamline the design process and support better communication. While you may still use Sketch if it best fits your needs, it is no longer our recommendation. [See more details within our Sketch instruction.](/get-started/design#sketch-design-kit)
+
+### 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 5 design file](https://www.figma.com/community/file/1300826511900225842/patternfly-5) 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.
+
+## Sketch design kit
+
+**Note:** We have migrated to Figma and no longer maintain or update our Sketch design kits.
+
+Initial PatternFly 5 components and styles have been added to Sketch, and can be accessed following the instructions outlined on this page, but no further updates will be released. You can continue to use Sketch, but keep in mind that you will not be following our latest recommendations and will not have access to new features. We recommend that you migrate to Figma so that you can continue to receive updated design resources.
+
+The following information and instructions may be out of date.
### Design kit
The design kit is a symbol library implemented in Sketch to help designers, like you, create high-fidelity mockups that reflect PatternFly styling.
@@ -36,8 +63,6 @@ How do you write great microcopy and text for your user interface? Read our cont
[**View content guidelines**](/ux-writing/about)
-
-
### Start building with components.
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).
@@ -48,9 +73,9 @@ See all the pieces working together with demos.
[**View demos**](/patterns/primary-detail)
-## What's in the design kit?
+### What's in the design kit?
-### The template file
+#### The template file
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).
@@ -58,12 +83,12 @@ The contents of the template file are organized alphabetically by component or d
1. Unhide “padding” group (this group contains all of the spacers we use to create the design)
2. Edit the design as desired using the spacers as your guide
-### The symbol library
+#### The symbol library
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.
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.
-#### Navigating the symbol library
+##### Navigating the symbol library
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.
From the top toolbar in Sketch, select Insert → Symbols → Patternfly 4 to add symbols onto your page.
@@ -72,8 +97,7 @@ PatternFly symbols are designed to be as flexible and adaptable as possible. As
-
-## Getting the design kit
+### Getting the design kit
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).
@@ -85,8 +109,6 @@ PatternFly currently uses Red Hat Text and Red Hat Display. To download these fo
#### Before you start designing
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.
-
-
#### Download the template file
1. Access the [PatternFly template file](https://www.sketch.com/s/729c2eee-e8b6-4fcd-8a79-f6faa8c30f89) on Sketch cloud.
2. From the "..." menu on the top right, click **Download** to download the file onto your computer.
@@ -100,10 +122,7 @@ The design kit is a collection of Sketch assets that make it easy for designers
#### Before you begin
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).
-
-
-
-## Using the design kit
+### Using the design kit
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.
* [Spacers](#spacers)
@@ -140,11 +159,11 @@ Currently, all PatternFly text styles use Red Hat Text and Red Hat Display fonts
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.
-## Staying up to date
+### Staying up to date
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.
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.
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.
-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.
+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.
\ No newline at end of file
diff --git a/packages/documentation-site/patternfly-docs/content/get-started/get-started.css b/packages/documentation-site/patternfly-docs/content/get-started/get-started.css
index 046673dbd0..478044107a 100644
--- a/packages/documentation-site/patternfly-docs/content/get-started/get-started.css
+++ b/packages/documentation-site/patternfly-docs/content/get-started/get-started.css
@@ -2,6 +2,11 @@
color: #0066CC;
}
+.ws-images {
+ margin: auto;
+ width: 600p;
+}
+
#supported-browsers.ws-title + table {
margin-bottom: 16px;
}
diff --git a/packages/documentation-site/patternfly-docs/content/get-started/img/pf-figma-header.png b/packages/documentation-site/patternfly-docs/content/get-started/img/pf-figma-header.png
new file mode 100644
index 0000000000..1cb04bb08b
Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/get-started/img/pf-figma-header.png differ
diff --git a/packages/documentation-site/patternfly-docs/content/training/design.md b/packages/documentation-site/patternfly-docs/content/training/design.md
index 0430329ddd..5c1123b8fa 100644
--- a/packages/documentation-site/patternfly-docs/content/training/design.md
+++ b/packages/documentation-site/patternfly-docs/content/training/design.md
@@ -7,6 +7,8 @@ import { Gallery, GalleryItem, Hint, HintTitle, HintBody, HintFooter,Button } fr
import { TrainingCard } from './trainingCard/trainingCard';
import './design.css'
+**Note:** We have migrated the PatternFly design system to Figma and no longer maintain or update our Sketch design kits. The following training resources may be out of date as a result. For information on how to migrate to Figma, read our ["Design with PatternFly" guide.](/get-started/design.md)
+
## Sketch design training