Before you design
Pega UX uses Sketch software to transform ideas into product-ready design. Begin with the following steps:
- If you do not yet have the Sketch prototyping software, you’ll need to install Sketch on your device.
- 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)
- Start building your application.
How to use the files
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.
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.
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.
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.
Add the Cosmos Sketch 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 this site. We strongly recommend subscribing to automatic updates for your chosen Library.
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.
Explore the design system
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.