SAP Fiori Design Stencils
Intro
Design stencils are ready-to-use, high-fidelity drafts of SAP Fiori UI components. You can use them to visualize SAP Fiori apps and to get a realistic impression of your final design.
What’s in the Stencil Set?
The SAP Fiori design stencils include:
- Patterns for foundation topics, such as shadow levels, grid, colors, and more
- Page types (floorplans)
- Controls
- Helper tools, such as rem squares or px spacings to build your app according to the current specifications and implementations. We’ve also included interaction tools, such as like cursors and touch visualizations.
The following stencil sizes are available for your mockups:
- S (414 px)
- M (600 px and 834 px)
- L (1024 px)
- XL (1440 px)
In addition, each stencil set includes download files for:
- Font 72, the standard typeface for SAP Fiori apps
- The standard SAP icon font and the SAP Business Suite icon font
Download Stencils
The latest stencils are available for Figma. Older stencil sets are available for Sketch, Axure RP, and Adobe XD.
For download and installation instructions, see the pages below for each tool.
- Design Stencils for Figma | up to version 1.108
- Design Stencils for Sketch | up to version 1.84
- Design Stencils for Axure RP | up to version 1.84
- Design Stencils for Adobe XD | up to version 1.84
Download Font 72
Download 72 Font Family for Desktop
Last Updated: May 5, 2022
Download 72 Mono Font Family for Desktop
Last Updated: July 5, 2021
Download 72 Font Family for Web
Last Updated: May 5, 2022
Download 72 Mono Font Family for Web
Last Updated: April 21, 2021
Font 72 is SAP’s proprietary typeface and is the standard typeface for SAP Fiori apps. [external_only]You can download the font separately here or download one of the tool-based stencil sets above, which all include the font.[/external_only]
Procedure
- Download the desktop and web font families.
- Unpack the ZIP files 72_Desktop / 72_Web / 72Mono_desktop / 72Mono_webfonts.
- Double-click each .ttf file and click Install.
The 72 font download is made available under the Apache 2.0 license.
Download Icon Font
SAP Icon Font
Download SAP Icon Font (Horizon, version 5.02)
Last Updated: June 24, 2022
Download SAP Icon Font (Quartz, version 4.14)
Last Updated: June 24, 2022
Download SAP Icon Font (Quartz, version 4 preview)
Last Updated: July 6, 2022
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 Quartz and Horizon themes.[internal_only] You can also refer to the icons page of the visual design wiki.[/internal_only]
SAP Icon Font Versions
Separate icon font versions are available for the Quartz theme (version 4.14) and the Horizon theme (version 5.02). Both overwrite the standard sap-icons font file.
If you need to work with both icon fonts in parallel, you can use the version 4 preview (instead of version 4.14) to install the Quartz icon font alongside the Horizon icon font. The icons are then stored in separate font files:
- Horizon icon font:
sap-icons.ttf - Quartz icon font:
SAP-icons-v4-preview.ttf
Procedure
- Depending on your operating system, we recommend uninstalling any previous SAP icon font version and rebooting your system before installing the latest icon font.
- Download and install the icon font version(s) you need:
a) Unpack the ZIP file sap-icons… .zip.
b) Double-click the SAP-icons… .ttf file and click Install.
Download SAP Icon Font (Horizon, version 5.02)
Last Updated: June 24, 2022
Download SAP Icon Font (Quartz, version 4.14)
Last Updated: June 24, 2022
Download SAP Icon Font (Quartz, version 4 preview)
Last Updated: July 6, 2022
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 Quartz and Horizon themes.
SAP Icon Font Versions
Separate icon font versions are available for the Quartz theme (version 4.14) and the Horizon theme (version 5.02). Both overwrite the standard sap-icons font file.
If you need to work with both icon fonts in parallel, you can use the version 4 preview (instead of version 4.14) to install the Quartz icon font alongside the Horizon icon font. The icons are then stored in separate font files:
- Horizon icon font:
sap-icons.ttf - Quartz icon font:
SAP-icons-v4-preview.ttf
Procedure
-
- Depending on your operating system, we recommend uninstalling any previous SAP icon font version and rebooting your system before installing the latest icon font.
- Download and install the icon font version(s) you need:
a) Unpack the ZIP file sap-icons… .zip.
b) Double-click the SAP-icons… .ttf file and click Install.
SAP Business Suite Icon Font (Optional)
Download SAP Business Suite Icon Font (Horizon, version 2.079)
Download SAP Business Suite Icon Font (Quartz, version 1.079)
Last Updated: September 26, 2022
In some application areas, you may also need to use the SAP Business Suite Icon Font (BusinessSuiteInAppSymbols). This icon font contains application-specific icons [internal_only]mainly for use in SAP S/4HANA, IoT and ICD apps[/internal_only][external_only]primarily used in SAP S/4HANA apps[/external_only].
Separate icon font versions are available for the Quartz theme (version 1.079) and the Horizon theme (version 2.079). Both overwrite the standard BusinessSuiteInAppSymbolsfont file.
Important: To use the SAP Business Suite icon font in your app, it must be registered as a custom font in sap.ui.core.IconPool. [internal_only]Read the section “How to extend with custom icons” in this SAPUI5 document: https://wiki.wdf.sap.corp/wiki/display/SAPUI5//Icon[/internal_only]
Procedure
- Download and unpack the ZIP file BusinessSuiteInAppSymbols_...zip.
- Install the SAP Business Suite icon font: Double-click the BusinessSuiteInAppSymbols.ttf file and click Install.
[internal_only]
Stencil Updates
We regularly roll out new design stencil versions. These can include new controls, design updates, or just minor corrections. Major updates are usually communicated through our SAP Fiori Design Newsletter.
If you find errors or outdated designs in the stencils, or would like to contribute by adding your own stencils, please tell us in the SAP Fiori Design Community.
[/internal_only][internal_only]
Top Tips
- Check for stencil updates before you start working on a new project.
- Join the SAP Fiori Design Community to make use of stencils shared by your colleagues and to share your own stencils.
[/internal_only]