Updated: November 6, 2020

Design Stencils for Adobe XD

Intro

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

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

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



  1. Install the Adobe XD software.
  2. Download and unpack the ZIP file in the download box.
  3. Install font 72.*
    1. Choose the folder Font 72 /  72_Desktop.
    2. Double-click each .ttf file and click Install.
  4. 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.
  5. Optional: Install the SAP Business Suite icon font.
    1. Remove any former versions of the SAP Business Suite icon font.
    2. Choose the folder Icon Fonts / …final icon package / Fonts
    3. Double-click the BusinessSuiteInAppSymbols.ttf file, and click Install.
  6. Open the Adobe XD stencil file and save it as a duplicate.
    The duplicate is your working document for visualizing your SAP Fiori app. All the available stencils are now available as assets in the sidebar on the left, including character styles, and components (stencils).

*The 72 font download is made available under the Apache 2.0 license.