Services & Resources SAP Fiori Design Stencils Axure RP

Updated: February 5, 2021
SAPUI5 Version 1.72

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: February 17, 2020 | v. 1.72
What's New in Axure RP Stencil Version 1.72


  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).
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 Font 72 (Optional)

You can use OpenUI5 resources to make font 72 available as an embedded web font in Axure RP web prototypes.

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.

 

  1. Add the regular font file by pressing the green “+” button. Name the file “72-Regular”.

 

  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');
  1. Add the bold font file by pressing the green “+” button again. Name the file “72-Bold”.
  1. 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');
  1. Map the default font to the 72 embedded font. This will ensure that you generate the correct CSS with the 72 font family.

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.

Related Links