{"componentChunkName":"component---src-templates-cms-page-tsx","path":"/versions/8/design/getting-started/","result":{"data":{"sitePage":{"pageContext":{"page":{"node":{"title":"Getting started","navTitle":null,"slug":"design/getting-started/","hidePage":false,"collapsibleGroup":null,"group":"About Constellation","seoDescription":null,"childStrapiSimplePageOverviewTextnode":null,"body":[{"id":"2d3e83f3-08bf-537d-af9b-8b5506e3c33c","strapi_component":"layout.section","subSections":[],"title":"Learn best practices for designing with the Constellation design system","childStrapiComponentLayoutSectionBodyTextnode":{"body":"Before you start designing, learn more about Pega's approach to UX and best practices for designing applications with Constellation:\n\n- Visit the [Experience Designer Role Hub](https://community.pega.com/roles/experience-designer) for resources on designing with Pega\n- Pega Academy course: [UX Essentials](https://academy.pega.com/mission/pega-user-experience-ux-essentials/v3)\n- Pega Academy course: [Constellation View-Based UI for Designers](https://academy.pega.com/mission/pega-constellation-view-based-ui-designers/v2)\n- Pega Academy course: [Constellation View-Based UI Configuration for Low-Code Authors](https://academy.pega.com/mission/pega-constellation-view-based-ui-configuration-low-code-authors/v2)\n- [Learn about Constellation patterns](/versions/8/design/patterns) and how they deliver great UX out-of-the-box\n- [Learn best practices for designing custom DX components in Constellation](https://docs.pega.com/bundle/constellation-dx-components/page/constellation-dx-components/custom-components/design-requirements-constellation-dx-components.html)\n- [View the list of Pega Personas](https://design.pega.com/downloads/persona-catalog.pdf) to learn how user groups will interact with your application\n"}},{"id":"bd6866bc-3d60-53ae-945b-53db7c671b73","strapi_component":"layout.section","subSections":[{"id":"5208bf3b-52e0-503b-8de5-5e9b1f85f1bd","title":"Figma ","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"1. [Install Figma on your device](https://www.figma.com/).\n2. [Get Pega's Figma design kits](/versions/8/design/design-kits). \n3. Start designing your application."}},{"id":"f0d216ab-b055-58ab-9766-e293ea92d9c7","title":"Sketch","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"1. [Install Sketch on your device](https://www.sketch.com).\n2. [Subscribe to Pega's Sketch design kits](/versions/8/design/design-kits). _(HINT: Subscribe to the library you want instead of downloading it, so you can automatically stay up-to-date)_\n3. Start designing your application."}}],"title":"Subscribe to Figma and Sketch libraries","childStrapiComponentLayoutSectionBodyTextnode":{"body":"Pega UX uses Figma and Sketch software to transform ideas into product-ready design. Get started with Pega's Figma and Sketch libraries with the following steps:\n\n"}}]}},"slugs":["design/navigate-the-application/","design/pulse/","design/case-lifecycle/","design/case-preview/","design/case-page/","design/date-time-input/","design/location-input/","design/rich-text-editor/","design/app-shell/","design/date-time-display/","design/followers/","design/related-cases/","design/attachments/","design/stakeholders/","design/tasks/","design/card/","design/form/","design/icon/","design/checkbox/","design/currency-input/","design/email-input/","design/field-group/","design/file-input/","design/form-progress/","design/number-input/","design/phone-input/","design/radio-button/","design/select-combobox/","design/text-area/","design/text-input/","design/url-input/","design/breadcrumbs/","design/link/","design/tabs/","design/avatar/","design/badge/","design/banner/","design/empty-state/","design/file-display/","design/app-announcement/","design/modal-dialog/","design/popover/","design/toast/","design/tooltip/","design/field-value-list/","design/meta-list/","design/summary-list/","design/timeline-list/","design/button/","design/skip-links/","design/contextual-information/","design/table/","develop/avatar/","develop/badge/","develop/banner/","develop/boolean/","develop/button/","develop/card/","develop/checkbox/","develop/color-picker/","develop/combo-box/","develop/currency-input/","develop/currency-display/","develop/date-time-display/","develop/date-time-input/","develop/drawer/","develop/email-display/","develop/empty-state/","develop/error-state/","develop/expand-collapse/","develop/field-group/","develop/field-value-list/","develop/file-display/","develop/file-input/","develop/flex/","develop/grid/","develop/image/","develop/input/","develop/label/","develop/link/","develop/location-display/","develop/location-input/","develop/menu-button/","develop/meta-list/","develop/number-display/","develop/number-input/","develop/page-templates/","develop/phone-display/","develop/phone-input/","develop/progress/","develop/radio-button/","develop/rating/","develop/select/","develop/slider/","develop/summary-item/","develop/summary-list/","develop/switch/","develop/tabs/","develop/text/","develop/text-area/","develop/url-display/","develop/configuration/","develop/theme/","develop/search-input/","develop/icon/","develop/credit-card-input/","develop/credit-card-display/","develop/ai-button/","develop/danger-button/","develop/","develop/getting-started-react/","design/manage-your-work/","design/design-tokens/","design/","design/getting-started/","design/patterns/","design/search-for-information/","design/explore-data/","design/create-custom-landing-pages/","design/accessibility/","design/about-components/","design/ui-architecture/","design/start-your-work-day/","design/design-kits/","design/complete-your-work-tasks/","design/ux-writing-guidelines","design/responsive-adaptive/"]}}},"pageContext":{"page":{"node":{"title":"Getting started","navTitle":null,"slug":"design/getting-started/","hidePage":false,"collapsibleGroup":null,"group":"About Constellation","seoDescription":null,"childStrapiSimplePageOverviewTextnode":null,"body":[{"id":"2d3e83f3-08bf-537d-af9b-8b5506e3c33c","strapi_component":"layout.section","subSections":[],"title":"Learn best practices for designing with the Constellation design system","childStrapiComponentLayoutSectionBodyTextnode":{"body":"Before you start designing, learn more about Pega's approach to UX and best practices for designing applications with Constellation:\n\n- Visit the [Experience Designer Role Hub](https://community.pega.com/roles/experience-designer) for resources on designing with Pega\n- Pega Academy course: [UX Essentials](https://academy.pega.com/mission/pega-user-experience-ux-essentials/v3)\n- Pega Academy course: [Constellation View-Based UI for Designers](https://academy.pega.com/mission/pega-constellation-view-based-ui-designers/v2)\n- Pega Academy course: [Constellation View-Based UI Configuration for Low-Code Authors](https://academy.pega.com/mission/pega-constellation-view-based-ui-configuration-low-code-authors/v2)\n- [Learn about Constellation patterns](/versions/8/design/patterns) and how they deliver great UX out-of-the-box\n- [Learn best practices for designing custom DX components in Constellation](https://docs.pega.com/bundle/constellation-dx-components/page/constellation-dx-components/custom-components/design-requirements-constellation-dx-components.html)\n- [View the list of Pega Personas](https://design.pega.com/downloads/persona-catalog.pdf) to learn how user groups will interact with your application\n"}},{"id":"bd6866bc-3d60-53ae-945b-53db7c671b73","strapi_component":"layout.section","subSections":[{"id":"5208bf3b-52e0-503b-8de5-5e9b1f85f1bd","title":"Figma ","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"1. [Install Figma on your device](https://www.figma.com/).\n2. [Get Pega's Figma design kits](/versions/8/design/design-kits). \n3. Start designing your application."}},{"id":"f0d216ab-b055-58ab-9766-e293ea92d9c7","title":"Sketch","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"1. [Install Sketch on your device](https://www.sketch.com).\n2. [Subscribe to Pega's Sketch design kits](/versions/8/design/design-kits). _(HINT: Subscribe to the library you want instead of downloading it, so you can automatically stay up-to-date)_\n3. Start designing your application."}}],"title":"Subscribe to Figma and Sketch libraries","childStrapiComponentLayoutSectionBodyTextnode":{"body":"Pega UX uses Figma and Sketch software to transform ideas into product-ready design. Get started with Pega's Figma and Sketch libraries with the following steps:\n\n"}}]}},"slugs":["design/navigate-the-application/","design/pulse/","design/case-lifecycle/","design/case-preview/","design/case-page/","design/date-time-input/","design/location-input/","design/rich-text-editor/","design/app-shell/","design/date-time-display/","design/followers/","design/related-cases/","design/attachments/","design/stakeholders/","design/tasks/","design/card/","design/form/","design/icon/","design/checkbox/","design/currency-input/","design/email-input/","design/field-group/","design/file-input/","design/form-progress/","design/number-input/","design/phone-input/","design/radio-button/","design/select-combobox/","design/text-area/","design/text-input/","design/url-input/","design/breadcrumbs/","design/link/","design/tabs/","design/avatar/","design/badge/","design/banner/","design/empty-state/","design/file-display/","design/app-announcement/","design/modal-dialog/","design/popover/","design/toast/","design/tooltip/","design/field-value-list/","design/meta-list/","design/summary-list/","design/timeline-list/","design/button/","design/skip-links/","design/contextual-information/","design/table/","develop/avatar/","develop/badge/","develop/banner/","develop/boolean/","develop/button/","develop/card/","develop/checkbox/","develop/color-picker/","develop/combo-box/","develop/currency-input/","develop/currency-display/","develop/date-time-display/","develop/date-time-input/","develop/drawer/","develop/email-display/","develop/empty-state/","develop/error-state/","develop/expand-collapse/","develop/field-group/","develop/field-value-list/","develop/file-display/","develop/file-input/","develop/flex/","develop/grid/","develop/image/","develop/input/","develop/label/","develop/link/","develop/location-display/","develop/location-input/","develop/menu-button/","develop/meta-list/","develop/number-display/","develop/number-input/","develop/page-templates/","develop/phone-display/","develop/phone-input/","develop/progress/","develop/radio-button/","develop/rating/","develop/select/","develop/slider/","develop/summary-item/","develop/summary-list/","develop/switch/","develop/tabs/","develop/text/","develop/text-area/","develop/url-display/","develop/configuration/","develop/theme/","develop/search-input/","develop/icon/","develop/credit-card-input/","develop/credit-card-display/","develop/ai-button/","develop/danger-button/","develop/","develop/getting-started-react/","design/manage-your-work/","design/design-tokens/","design/","design/getting-started/","design/patterns/","design/search-for-information/","design/explore-data/","design/create-custom-landing-pages/","design/accessibility/","design/about-components/","design/ui-architecture/","design/start-your-work-day/","design/design-kits/","design/complete-your-work-tasks/","design/ux-writing-guidelines","design/responsive-adaptive/"]}},"staticQueryHashes":["1103706436","2075638250","2949869146","3642924123","793757994"]}