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.

Stencil sets are available for Sketch, Axure RP, and Adobe XD.

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

You can download stencil packages for your preferred tool (Sketch, Axure RP, or Adobe XD).

For download and installation instructions, see the pages below for each tool.

Design Stencils for Sketch

Design Stencils for Axure RP

Design Stencils for Adobe XD

Download Font 72

Font 72 is SAP’s proprietary typeface, and is the standard typeface for SAP Fiori apps. You can download the font separately here, or download one of the tool-based stencil sets above, which all include the font.

Procedure

1. Download the desktop and web font families.
2. Unpack the ZIP files 72_Desktop / 72_Web.
3. 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

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 Iconography.

The SAP icon font is also included in the stencil sets for Axure RP and Sketch.

Procedure

1. Remove any former versions of the SAP icon font.
2. Download and unpack the ZIP file sap-icons_… .zip .
3. Double-click the SAP-icons.ttf file, and click Install.

SAP Business Suite Icon Font (Optional)

In some application areas, you may also need to use the SAP Business Suite Icon Font (BusinessSuiteInAppSymbols). This icon font contains application-specific icons primarily used in SAP S/4HANA apps.

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.

Procedure

1. Download and unpack the ZIP file BusinessSuiteInAppSymbols_...zip.
2. Install the SAP Business Suite icon font: Double-click the BusinessSuiteInAppSymbols.ttf file and click Install.

Related Links