Preparation for designing in Cosmos

After gathering user needs, working with a Pega Certified Lead System Architect (LSA) to create a basic application and case structure, and reviewing how the Pega Cosmos design system bridges the gap of user and business needs with technology, you are ready to learn how to design using Cosmos.   

First, prepare your design tools

Pega uses Sketch as its primary design tool and provides an extensive Cosmos Sketch library. You can subscribe to library updates directly from design.pega.com or download library items for use in another design app that supports .sketch files. 

Sketch

Use Cosmos symbols, layer styles, color variables, and text styles whenever possible. Otherwise, designs de-sync from the library standards as they improve or add bug fixes. When necessary, symbols with ⚠️   in the name may be broken apart. By default, they are shown in the most commonly used way. Break apart those assets at your own risk.  

Adobe XD (Mac & Windows), Icons8 Lunacy (Windows), Figma (Web), and so on

The Cosmos design system library is currently designed for Sketch only, and at the moment does not offer native support for third-party applications. The Sketch files can still be manually downloaded and manipulated, but automatic scaling, font families, and so on may work differently. Additionally, due to the limitation of these platforms (excluding Figma), there is no native way to keep designs in sync with the latest library releases. Check the downloads page of design.pega.com regularly for more updates.

The Cosmos Sketch library is divided into categories. These categories generally match the current component structure of the site directly, which makes finding and working with the components very simple.  

Once you are ready to begin designing from the Sketch library, start with the appropriate page template found in the *Page templates category. Page templates are meant to broken apart within Sketch. 

If you or your team do not need any net-new layouts or patterns and there is a strong working knowledge of Pega’s citizen developer process, prototype in App Studio and test your solutions.

Check your knowledge with the following interaction.