Home Design Stencils for Axure RP (Mac and Windows)

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

Please note that the stencil set for tools is currently not affected by this change, and is offered with the Belize theme, as before.

Intro

SAP supports two sets of SAP Fiori design stencils for Axure RP:

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

When to Use

  • For all SAP Fiori apps aimed at business end users, always use the standard SAP Fiori stencil set.
  • Use the design stencils for tool development only if you are designing tool development interfaces.

Prerequisites

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)
What's New in Axure RP Stencil Version 1.66


Standard SAP Fiori Deisgn Stencils

  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: Embed font 72 as a web font for Axure RP web prototypes.
  8. Optional: Embed the SAP 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


SAP Fiori Design Stencils for Tool Development



Download Stencils for Tool Design (Axure RP)
last updated: January 25, 2019 | v.1.62


To download the stencil set for tools, use the download box in this section. Follow the installation steps above.

Note: Only use this stencil set for designing tool interfaces. Do not use it for standard SAP Fiori apps.





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

Top Tips

To learn about using Axure RP, see the tutorials at www.axure.com/learn.