Design Stencils

Resources / Libraries / Design Stencils

Intro

Design stencils are ready-to-use, high-fidelity drafts of SAP Fiori UI components. You can use them to visualize SAP Fiori apps and to get a realistic impression of your final design.
warning
Design stencils are high-definition mock-ups and do not represent the exact design specifications.

Design Stencils (Axure RP)

:icon-download-blue
Download Design Stencils (Axure RP) and SAP Icon Font

Last Updated: July 1, 2016 | v1.38

Design stencils are ready-to-use drafts of SAP Fiori floorplans and UI elements. For high-fidelity mockups, you can use Axure RP with the extended SAP Fiori design stencil set. The download package also includes the SAP icon font.

Important: The mockups you provide for SAP Fiori design gates must have sufficient fidelity. You don’t necessarily need to use Axure RP, but sketches or Balsamiq mockups are not sufficient. We recommend using the stencils for Axure RP for the first design gate.

Variants

The following variants are available for your Axure RP mockups:

  • Compact: Desktop (L)
  • Cozy: Tablet (M), Smartphone (S)
  • Image version: Shows different states of the control as an image, such as “Regular” and “Hover”.
  • Interactive version: Shows interaction built in Axure RP. Most interactions are based on dynamic panels.

Note: The design stencils do not represent the exact visual design.

Updates

We regularly roll out new design stencil versions. These can include new controls, design updates or just minor corrections. Major updates are usually communicated via our SAP Fiori Design Newsletter.

If you find errors or outdated designs in the stencils, please tell us at fioridesign@sap.com or in the Fiori Design Community.

More Information

Join the SAP Fiori Design Community to get additional information about design stencils. The FAQs tell you how to get an Axure RP license.

If you create your own Axure RP stencils, please share them in the community.

Brief Introduction to Axure RP

Wireframing. Prototyping. Documentation.

You can use the Axure RP tool to:

  • Make low-fi and hi-fi wireframes with dynamic interactions, or build fast mockups without interactions.
  • Save time by using masters and widgets/stencils.
  • Visualize interactive mockups for all form factors (desktop, tablet, and smartphone) using adaptive views. Interactive prototypes can be tested on all devices.
  • Create a prototype without any coding. Axure RP can be used by designers, or by anyone needing a proof of concept.

If you are looking for an easy way to learn Axure RP, take a look at the tutorials at www.axure.com/learn.

How do I load the stencils in Axure RP?

To load the SAP Fiori design stencils, please follow the instructions on the Axure RP website: http://www.axure.com/support/reference/widget-libraries (section: Loading and Unloading Libraries).

:icon-download-blue
Download Design Stencils (Axure RP) and SAP Icon Font

Last Updated: July 1, 2016 | v1.38

Design stencils are ready-to-use drafts of SAP Fiori layouts, patterns and controls. You are welcome to use the design stencils to visualize your SAP Fiori app ideas in Axure RP. They are easy to use and give you a realistic impression of your final design. The download package also includes the SAPUI5i icon font.

Variants

The following variants are available for your Axure RP mockups:

  • Compact: Desktop (L)
  • Cozy: Tablet (M), Smartphone (S)
  • Image version: Shows different states of the control as an image, such as “Regular” and “Hover”.
  • Interactive version: Shows interaction built in Axure RP. Most interactions are based on dynamic panels.

Note: The design stencils are high-fidelity mockups and do not represent the exact visual design.

Brief Introduction to Axure RP

Wireframing. Prototyping. Documentation.

You can use the Axure RP tool to:

  • Make low-fi and hi-fi wireframes with dynamic interactions, or build fast mockups without interactions.
  • Save time by using masters and widgets/stencils.
  • Visualize interactive mockups for all form factors (desktop, tablet, and smartphone) using adaptive views. Interactive prototypes can be tested on all devices.
  • Create a prototype without any coding. Axure RP can be used by designers, or by anyone needing a proof of concept.

If you are looking for an easy way to learn Axure RP, take a look at the tutorials at www.axure.com/learn.

How do I load the stencils in Axure RP?

To load the SAP Fiori design stencils, please follow the instructions on the Axure RP website: http://www.axure.com/support/reference/widget-libraries (section: Loading and Unloading Libraries).

Design Stencils (Microsoft PowerPoint®)

:icon-download-blue
Download Design Stencils (Microsoft PowerPoint)

Last Updated: September 21, 2016 | from v1.36

The Microsoft PowerPoint® design stencils are ready-to-use drafts of the most essential SAP Fiori floorplans and UI elements.

We provide a limited set of Microsoft PowerPoint® stencils: the stencils are targeted at product owners and other non-design roles. You can use them for quickly visualizing your first design ideas. Only common floorplans and UI elements are available. The stencils come in two variants:

  • Compact: Desktop (L)
  • Cozy: Tablet (M), Smartphone (S)

Note: The design stencils do not represent the exact visual design.