Designer Toolkit

SAP Design System Academy / Resources and Tools / Designer Toolkit

Intro

The SAP design system offers various resources and services to support you in doing your work. Wouldn’t it be cool to have access to ready-to-use assets to create designs more quickly or to get tools that help you in producing consistent and accessible deliverables easily? The following list will exactly provide you with such resources.

Design Resources

information
For internal users: please search for the according resource in the Figma Libraries list to use this as a library in Figma directly.

SAP UI Kits

Main format for all SAP UI Kits is Figma. The UI Kits for Sketch, Axure RP, and Adobe XD are no longer being updated and therefore not listed here.

Downloads

Web:
SAP Web UI Kit:icon-download

iOS:
SAP Fiori for iOS Design Kit:icon-download
SAP Fiori for watchOS Design Kit:icon-download
Joule Design Kit, iOS:icon-download

Android:
SAP Fiori for Android Design Kit:icon-download
SAP Fiori for Wear OS Design Kit:icon-download
Joule Design Kit, Android:icon-download

Joule:
Joule Web UI Kit

Documentation

Web:
SAP Web UI Kit – Overview:icon-document-text

iOS:
Fiori for watchOS – Get started:icon-document-text

Android:
Fiori for Wear OS – Get started:icon-document-text

SAP Icons

To use the stencils, you need to install the standard SAP icon font. You’ll also need to install this font locally if you want to display SAP Fiori icons in other applications, such as PowerPoint. For more information about the SAP icon font, see the iconography guidelines for the Horizon and Quartz themes.

SAP Icon Font:icon-document-text

Iconography for Web:

Iconography for Android:icon-document-text
Iconography for iOS:icon-document-text
Icon Explorer:icon-document-text

Font 72

Font 72 is SAP’s proprietary typeface and is the standard typeface for SAP Fiori apps.

72 Font:icon-document-text