SAP Fiori Design Stencils

:icon-download-blue
Download Design Stencils (Axure RP) and SAP Icon Font

Last Updated: February 12, 2019 | v1.62

For high-fidelity mockups, you can use Axure RP with the extended SAP Fiori design stencil set.

For more information on installing the “72” typeface, see the installation steps in the Getting Started section.

Variants

The following variants are available for your Axure RP mockups:

• Compact: Desktop (L)
• Cozy: Tablet (M), Smartphone (S)
• Image version: Shows different states of the control as an image, such as “Regular” and “Hover”.
• Interactive version: Shows interaction built in Axure RP. Most interactions are based on dynamic panels.

Note: The design stencils are high-fidelity mockups and do not represent the exact visual design.

Getting Started

Installation Steps

1. Install the Axure RP software: If you are new to Axure RP, first get a license for the software, and install Axure RP on your computer.
2. Download the design stencils: Download the ZIP file from the download box on this page and unzip it.
3. Install the font “72”: Choose the folder Font 72 / 72_Desktop. Double-click each .ttf file and click Install.
4. Change the default font within Axure RP to “72” using the Widget Style Manager (see images below).

Installation – change default font in Widget Style Manager (1)

Installation – change default font in Widget Style Manager (2)

1. Remove former versions of the SAP icon font: If you have an earlier version of the SAP icon font installed on your computer, remove it first to avoid any technical errors.
2. Install the SAP icon font: Unzip the icon font ZIP file and double-click the SAP-icons.ttf file, which is located inside the fonts folder. Click Install.
3. Optional: Install the Visual Business icon font: If you plan to use map container stencils, install the vis icons, which are also included in the package.
4. Load the libraries in Axure RP: Open Axure RP and load the new libraries (find a tutorial here).
5. Optional: Embed font 72.
6. Optional: Embed the SAP icon font.
7. Congratulations! You’re done! Enjoy working with the stencils.

Embedding Font “72” for Prototyping

You can load the “72” font from the OpenUI5 resources for use in prototypes. To make font “72” available as an embedded web font in Axure RP web prototypes, follow the procedure below.

Note that only the styles appearing within the currently implemented design are available as web fonts.

Procedure

1. Choose Publish / Generate HTML Files… and select Web Fonts in the dialog menu.
2. Add the regular font file by pressing the green “+” button. Name the file “72-Regular”.

Embedding web font for prototyping (1)

Embedding web font for prototyping (2)

1. Select the @font-face radio button.

1. Paste the following code that specifies the web font format linked to the font provided by OpenUI5:
   font-family: '72-Regular'; src: url('fonts/72-Regular.woff') format('woff'), url('fonts/72-Regular.woff2') format('woff2'),url('https://openui5nightly.hana.ondemand.com/resources/sap/ui/core/themes/sap_belize/fonts/72-Regular.woff') format('woff'),url('https://openui5nightly.hana.ondemand.com/resources/sap/ui/core/themes/sap_belize/fonts/72-Regular.woff2') format('woff2'), local('72-Regular');

Enter code for web font format – 72-Regular

1. Add the bold font file by pressing the green “+” button again. Name the file “72-Bold”.
2. Select the @font-face radio button and add the following code:
   font-family: '72-Bold'; src: url('fonts/72-Bold.woff') format('woff'), url('fonts/72-Bold.woff2') format('woff2'),url('https://openui5nightly.hana.ondemand.com/resources/sap/ui/core/themes/sap_belize/fonts/72-Bold.woff') format('woff'), url('https://openui5nightly.hana.ondemand.com/resources/sap/ui/core/themes/sap_belize/fonts/72-Bold.woff2') format('woff2'), local('72-Bold');

Enter code for web font format – 72-Bold

1. Map the default font to the “72” embedded font. This will ensure that you generate the correct CSS with the “72” font family.

Mapping default font to embedded font 72

Embedding the SAP Icon Font (Optional)

The process for embedding the SAP icon font is the same as for font 72 above. However, in steps 3 and 4 you need to select the @icon-font “SAP icons” radio button and add the following code:

font-family: ‘SAP-icons’;
src: url(‘fonts/SAP-icons.woff’) format(‘woff’),
url(‘fonts/SAP-icons.woff2’) format(‘woff2’),url(‘https://openui5nightly.hana.ondemand.com/resources/sap/ui/core/themes/sap_belize/fonts/SAP-icons.woff‘) format(‘woff’),
url(‘https://openui5nightly.hana.ondemand.com/resources/sap/ui/core/themes/sap_belize/fonts/SAP-icons.woff2‘) format(‘woff2’),
local(‘SAP-icons’);

For more information on font mapping in Axure RP, see Web Fonts and Font Mapping on the Axure RP website.

:icon-download-blue
Download Design Stencils (Microsoft PowerPoint)

Last Updated: February 25, 2019 | v1.62

The Microsoft PowerPoint® design stencils are ready-to-use drafts of the most essential SAP Fiori floorplans and UI elements.

We provide a limited set of Microsoft PowerPoint® stencils: the stencils are targeted at product owners and other non-design roles. You can use them for quickly visualizing your first design ideas. Only common floorplans and UI elements are available. The stencils come in two variants:

• Compact: Desktop (L)
• Cozy: Tablet (M), Smartphone (S)

The design stencils do not represent the exact visual design.