Services & Resources SAP Fiori Design Stencils Sketch

Updated: July 8, 2020
SAPUI5 Version 1.76

Design Stencils for Sketch (Mac)

Intro

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

For more information about SAP Fiori design stencils in general 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 and Installation

Download Design Stencils (Sketch)
Last Updated: May 15, 2020 | v. 1.76


  1. Install the Sketch software.
  2. Download and unpack the ZIP file.
  3. Save the the Fiori3_Stencils_Master.sketch file to a dedicated folder on your machine.
    When you download an updated version in future, make sure that the new file replaces the existing file. This enables Sketch to identify the update automatically (more information here).
  4. Use the SAP Fiori master file as a library within your own Sketch file. To do so, open Sketch, go to Sketch / Preferences / Libraries, and add the library to the list.
What's New in Sketch Stencil Version 1.76

Adding the Master File as a Library

  • Adding the Master File as a Library (1)
  • Adding the Master File as a Library (2)
  • Adding the Master File as a Library (3)
  1. Install font 72.*
    1. Choose the folder Font 72 /  72_Desktop.
    2. Double-click each .ttf file and click Install.
  2. 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.
  3. 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.

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

Using the Sketch Stencils

Symbols

All the available stencils are now available as “symbols” within your file in the Symbols menu. To use a stencil, pull it to your canvas board.

Adding a symbol/stencil to the canvas board (1)
Adding a symbol/stencil to the canvas board (1)

Text and Layer Styles

In addition, you can choose from all appearances (text styles and layer styles) that are offered in the Insert menu or in the navigation panel on the right of your Sketch file.

Text style popup
Text style popup

Top Tips

Customize your Sketch toolbar

Customize your toolbar within Sketch based on your personal preferences. To do this, right-click on the toolbar in Sketch and choose Customize Toolbar…. You can now pull any menu you want to the highlighted empty boxes.

Recommended menus for working effectively:

  • Artboard
  • Symbols
  • Text Styles
  • Customize-Toolbar_01
  • Customize-Toolbar_02

Stay up to date

Always download updated files to a specific folder. As soon as a new version is released, put it into your stencil folder by overwriting the old file. This ensures that your working files files are updated to the latest version (find the hint in the top right of Sketch).

  • Update notification (1)
  • Update notification (2)

Don’t change symbols

Don’t overwrite symbols within the original document. This changes the symbol in all the places where a symbol is consumed. Instead, change the symbol using the Overrides panel on the right. In the Overrides panel you can change all elements within the object you selected.

  • "Overrides" panel (1)
  • "Overrides" panel (2)

Let symbols be symbols

Don’t detach elements from symbols. This ensures that your file stays up-to-date with the latest symbols from the SAP Fiori stencil set for Sketch.

Related Links