Services & Resources SAP Fiori Design Stencils Axure RP

Updated: July 8, 2020
SAPUI5 Version 1.78

Design Stencils for Axure RP (Mac and Windows)

Information
We are building a new Axure RP stencil set based on Fiori 3, using the SAP Quartz Light theme. To see the former Axure RP strencil set for the SAP Belize theme, go to guideline version 1.62.

Please note that the stencils for tools still use the SAP Belize theme.

Intro

You can use this stencil set to create high-fidelity SAP Fiori designs using Axure RP.

For more information about SAP Fiori design stencils in general and other tool options, see Design Stencils.

Prerequisites

  • Axure RP 9 is required to use the stencils.
  • To use the SAP Fiori stencils, you need to install SAP’s 72 font family and the SAP icon font on your machine. These fonts are provided as part of the stencil download package. See Download and Installation below.

Download & Installation

Download Standard SAP Fiori Design Stencils (Axure RP)
Last Updated: July 7, 2020 | v. 1.78
What's New in Axure RP Stencil Version 1.78


  1. Install the Axure RP software.
  2. Download the design stencil set: Download the ZIP file and unzip it.
  3. Install font 72.
    1. Choose the folder Font 72 /  72_Desktop.
    2. Double-click each .ttf file and click Install.
  4. Open Axure RP and change the default font within Axure RP to font 72 by using the Widget Style Manager (Project / Widget Style Editor / Default / change font to “72”).
  5. Install the SAP icon font.
    1. Remove any former versions of the SAP icon font.
    2. Choose the folder Icon Fonts / …final icon package / Fonts
    3. Double-click the SAP-icons.ttf file, and click Install.
  6. Load the libraries in Axure RP: Open Axure RP and load the libraries for the stencils and icon font (tutorial).
  7. Optional: Install and load the SAP Business Suite icon font.
Loading libraries (1)
Loading libraries (1)
Loading libraries (2)
Loading libraries (2)
Loading libraries (3)
Loading libraries (3)

All the available stencils are now displayed in the library panel on the left and you can easily pull the stencil you need to your canvas board.

Pulling a stencil to the canvas board
Pulling a stencil to the canvas board

Embedding Fonts into HTML Exports (Optional)

You can use a simplified method to embed fonts in Axure RP. These include:
  • SAP-icons
  • SAP-icons-TnT
  • BusinessSuiteInAppSymbols
  • 72
Tip: You can browse the three icon fonts in the Icon Explorer.

Online Usage

Follow the steps below:

  1. In Axure RP, choose Publish and Generate HTML Files….
  2. In the subsequent dialog, open the other options (settings wheel) and choose the Fonts tab. If the tab is empty, choose Add Font.
  3. Under WEB FONTS, enter a font label, such as all SAP fonts (or similar).
  4. Choose Link to .css file and enter the following URL:
    https://experience.sap.com/files/prototypes/public/fonts/all_fonts.css
You can now export your mock-ups, and everyone with internet access sees all icons and the 72 font right away.
These settings are saved only for your current Axure RP project. Repeat this procedure for every Axure RP project you want to share with others.

Offline Usage

If you are heading to usability tests with new or re-imaged laptops, or if you don’t have an internet connection, you’ll need to make sure that all icon fonts used in your prototype are installed on the devices. Alternatively, you can just use the fonts package:

  1. In Axure RP, choose Publish and Generate HTML Files….
  2. In the subsequent dialog, open the other options (settings wheel) and choose the Fonts tab. If the tab is empty, choose Add Font.
  3. Under WEB FONTS, enter a font name, such as all SAP fonts (or similar).
  4. Choose Link to .css file and enter the following URL:
    all_fonts.css
  1. Download the following file:
    https://experience.sap.com/files/prototypes/public/fonts/all_fonts.zip
  2. Unpack the file to the directory to which you also generate your HTML files (where the index.html is).

All icons are now available offline, without installing fonts.

SAP Business Suite Icon Font (Optional)

The SAP Business Suite Icon Font (BusinessSuiteInAppSymbols) contains application-specific icons primarily used in SAP S/4HANA apps.

Important! To use this font in your app, it must be registered as a custom font in sap.ui.core.IconPool.

Procedure

To add Business Suite icons to your Axure RP mockup, proceed as follows:

  1. Remove any former versions of the SAP Business Suite icon font.
  2. In the download files for the standard SAP Fiori design stencils, unpack the ZIP file IconHTMLTemplate_InAppSymbols_….zip.
  3. Open the Fonts folder and install the BusinessSuiteInAppSymbols.ttf file.
  4. Load the widget library BusinessSuiteIcons_…rplib file into Axure’s Libraries panel.

Related Links