Designers

Access Figma

You need a Figma license to access our libraries. When you are granted a license, use your Red Hat e-mail address to log in to Figma via SSO authentication. When you are logged in, you should be able to access our libraries and add them to all of your drafts or individual files.

Agency access

If you work with an agency and do not have a Red Hat e-mail address, e-mail design-system@redhat.com and we will invite you to view our libraries.

Use libraries

Our libraries are built and maintained in Figma, our primary design tool. By using our libraries, you will automatically receive notifications as we make updates to our foundational styles, elements, and patterns (as long as you do not detach them). This ensures that your designs are current and representative of the latest design system release.

Warning

We no longer support Adobe XD. You need to migrate to Figma in order to access and use our most up-to-date libraries. Do not continue to use Adobe XD for any kind of design work. If you need assistance migrating XD files to Figma, e-mail design-system@redhat.com.

Core and subsystem libraries

The RHDS library is our core library that includes our foundational styles, elements, and patterns needed to create digital experiences. We also offer access to subsystem libraries that include project- or team- specific patterns that pull from the RHDS library.

Library name	Use case
RHDS	Our core library for creating Red Hat digital experiences
PatternFly	A library for creating application interfaces
Tier 1 Events	A library for tier 1 events, like Summit and AnsibleFest
Brand media	A library for Red Hat original media like podcasts and video series
Page builder	A library with a boilerplate template and components specific to Drupal's page builder

Work in Figma

Brand assets

If your project requires brand assets, the Brand standards website has links to assets including icons, fonts, photography, etc. Icons will be accessible via a subsystem Figma library very soon.

Inserting elements and patterns

To use an element or pattern in your design, select the Assets tab. Find your desired asset and drag it onto the canvas or frame. You can also preview an asset by selecting it. When you are satisfied with the preview, select the Insert instance button and the asset will appear on the canvas or frame. If you have questions about how to use an element or pattern correctly, review the documentation or connect with us on Slack.

Properties

Properties are changeable aspects of an element or pattern and you can see them in the right sidebar when the asset is selected. Properties change the appearance of an element or pattern so they can be used for different use cases. Some examples of properties include state, theme, variant, etc.

Responsive resize

Most elements and patterns can be resized to fit different viewport sizes. You can change the height or width of an asset by dragging an edge or corner.

You can also use Constraints to tell Figma how layers should respond when their frames are resized.

Instance swap

To speed up your design process, you can swap elements or patterns instead of dragging and dropping over and over again. Use the Instance menu to swap one element for another from any enabled library. Changing a property will not replace an element, but instance swapping will.

Best practices

Detaching an instance

Currently, you cannot add new items to an element or pattern instance that you pull from a library. You need to detach it if you want to add new assets, more slots, etc. If you believe that an element or pattern in any library needs more slots for new items, create an issue and we will try and prioritize building them in.

Warning

Detached instances will not receive style or other updates from any of the libraries if that element or pattern is updated.

Developers

To get started using our design system as a developer, go to the Developers page.