Getting started

Pega UX uses Sketch software to transform ideas into product-ready design. Begin with the following steps:

  1. If you do not yet have the Sketch prototyping software, you’ll need to install Sketch on your device.
  2. From our Resources page, choose a design system theme to reference. (HINT: Subscribe to the theme you want instead of downloading, so you can stay up-to-date)
  3. Start building your application.

Using components

Once in Sketch, go to Insert → Symbols → Document to add symbols to other pages within the same Sketch document. Similar to design.pega.com, symbols are organized by components.

Sketch symbols management UI

Using text symbols

Once in Sketch, go to Insert → Text Styles → Document to add typefaces from your Cosmos theme file to other pages within the same file. Text style documentation is described in depth on the “Typography” page of your Sketch document.

You can also access text styles by creating and selecting a text box, then going to Appearance → Type Style dropdown in the right-side control panel to apply the Cosmos color tokens to a text style. This is especially helpful as you start creating and editing your design.

Sketch text style management UI

Using layer styles

First, create and select a shape. Next, go to Appearance → Layer Style dropdown in the right-side control to style to your layer shape from the enabled design theme.

Sketch layer style management UI

It is important to note that Layer Styles can only be applied to shape layers: they cannot be applied to text. Pega uses these for badges, drop shadows, notifications, and more.

When you modify any part of the styles, such as the color, fill, border, shadow, etc, you will see an asterisk (*) appear next to the Layer Style’s name. This means that the style has been modified and you can choose to update any other layers who share the same style. Before attempting to make a stylistic change to a Layer Style, we recommend looking at the additional Layer Styles first. We have considered various states needed for our designs.

In the application’s menu, go to Sketch → Preferences → Libraries Appearance → Add Library to make a Sketch Library from the file you’ve downloaded from this site. We strongly recommend subscribing to automatic updates for your chosen Library.

Sketch library management UI

After selecting Add Library, find and select this file from your local hard drive. Your chosen design system file should appear when you select Insert → Symbols as mentioned above. Once you’ve added as a Library, these symbols can be accessed from any Sketch file.

Begin working with the Cosmos design system by familiarizing yourself with the contents of each Library. Look around. Explore the templates. Learn about the components. The most effective way to learn the design system is to do so hands-on.

If you need assistance or have feedback, email the Product Experience team at Pega. We welcome the opportunity to hear from and serve our users.