Skip to main content

For Designers

Learn how to create SAP Engagement Cloud UI designs, work with our guidelines, and use the Figma component library.

What is the SAP Engagement Cloud Design System?​

The SAP Engagement Cloud Design System is a collection of tools and resources that helps create high-quality UI for the SAP Engagement Cloud Platform. It consists of the UI Framework, code examples, documentation, guidelines, and the Figma library.

Benefits​

  • Save time designing: the Design System comes with layout blueprints and components, so you don't have to create everything from scratch.
  • Keep the platform consistent: using components from the Design System across the SAP Engagement Cloud Platform provides a more consistent experience for customers.
  • Communicate better with developers: components come with live examples and design guidelines, making it easier to understand their capabilities. You can experiment with them in our Playground.

Using the Figma Library​

The Figma library contains all layouts, components, and basic styling elements found in the Design System. The live code is the single source of truth — if there are differences between Figma and the live code, the live code takes precedence.

1. Accessing the library: once added to the Figma organization, access the SAP Engagement Cloud Design System library via the "Team libraries" dialog.

2. Installing fonts: SAP Engagement Cloud uses SAP 72 as the UI font. Download it from the SAP Fiori Design Stencils website.

3. Updating the library: Figma notifies you when a library update is available, showing a before/after comparison for each changed component.

4. Working with layout blueprints: pick a layout blueprint, detach it from the main component, and edit freely.

5. Working with components: the Figma library mirrors the component structure found in this documentation site.

Extras​

  • Testing components: use the Playground to check, test, and experiment with Design System components directly in the browser.
  • Prototyping: turn Figma designs into clickable prototypes using built-in tools, or build dynamic prototypes in the Playground.

Compliance​

As part of SAP, our Design System stays closely aligned with the SAP Fiori Design System. Review the Fiori documentation during your work, as it may address areas not yet represented in our system.

Contributing​

If you want to change, enhance, or add components, please get in touch with the Design System team. Read more in the Contribution Guidelines.