Starting with Sketch

Getting started with Sketch

Pega UX uses Sketch to transform design ideas into products, every day.

Start with Sketch

  1. If you don’t already have the prototyping software, you’ll need to install Sketch on your device.
  2. Then, 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 crafting your application right away. Or if you’d like to learn more about Sketch and our filing system, read the documentation below.

How to use the files

Using Components

Once in Sketch, go to Insert → Symbols → Document to add symbols to other pages within the same Sketch document. Similar to, 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. Once you’ve done so, 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 our 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.

Add Cosmos or UI Kit as a Sketch library

If you plan to continue designing with our either of our design themes, we recommend adding your file as a library. 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 our site. (Coming soon: Subscribe-able Auto-Updates)

Sketch library management UI

After clicking 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.

To learn more about how to use Sketch, we recommend looking at this resource.

Reach Out to Pega Design

The best way to get started with either Pega's Cosmos design system or UI Kit is to familiarize yourself with the contents of each library. Look around. Get your feet wet. Have fun. And if you need it, reach out to our team if you have any questions, comments, or concerns — particularly if you find any system to be missing a pattern or component you need. In this case, please reach out, as we’re continuously looking to better understand and serve our users.

Last updated: Jul 2020