Design Stencils for Figma (Mac and Windows)

Intro

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

For more information about SAP Fiori design stencils in general, see SAP Fiori 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.

Depending on your operating system, we recommend uninstalling any previous SAP icon font version and rebooting your system before installing the latest version.

[internal_only]

Download and Installation

The library panel within Figma contains both a work-in-progress version and a stable library version 1.106. Both versions come with cozy and compact form factors. To always get the latest updates automatically, we recommend activating the Latest S/4 Web UI Kit (work in progress) libraries. For more information, see Activating the Figma Library.

Procedure

  1. Install the Figma software: If you are new to Figma, go to www.figma.com, install the software, and sign in via SSO.
  2. Install font 72*.
    a. Choose the folder Font 72 / 72_Desktop.
    b. Double-click each .ttf file and click Install.
  3. Install the SAP icon font.
    a. Remove any former versions of the SAP icon font.
    b. Choose the folder Icon Fonts / …final icon package / Fonts
    c. Double-click the SAP-icons.ttf file and click Install.
  4. Optional: Install the SAP Business Suite icon font.
    a. Remove any former versions of the SAP Business Suite icon font.
    b. Choose the folder Icon Fonts / …final icon package / Fonts
    c. Double-click the BusinessSuiteInAppSymbols.ttf file and click Install.

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

Activating the Figma Library

From stencil version 1.98, there are two separate libraries per stencil version: a compact library and a cozy library.

If you already use one of the older Fiori Web Stencil (Quartz Web UI Kit) libraries (v1.80 – v1.96), please use the swap library feature to swap the old library to one of the new files – either compact or cozy, depending on the form factor you are using in your file. If you are using both form factors in one design file, please swap to the library for the most-used form factor.

With this, most components in your file will be swapped. You’ll be able to update any remaining components manually later on using the swap instances function for your file.

  1. To build your prototype in Figma, create a new file using the plus icon in the panel on the left.
  2. In the asset panel on the left, activate both the cozy and compact libraries by clicking the library icon on the top right of the asset panel and searching for the relevant library name in the search field:
    • For S/4HANA specific Morning Horizon libraries type “S/4 Web UI Kit”
    • For Quartz Light libraries type “Quartz Web UI Kit”
  1. After activating a library, you’ll see all the activated libraries as a list within the asset panel on the left. From there, you can easily drag and drop the stencil you need to your canvas.
  1. To choose a style (like a color or shadow) from a certain color library (such as “Morning Horizon MASTER [Resource]”), go to the design panel on the right and click the Style button within the “Fill”, “Stroke”, or “Effects” section.

[/internal_only]

[external_only]

Download and Installation

[/external_only]


Download Design Stencils (Figma)

Last Updated: October 17, 2022, v1.106

Disclaimer:

Some stencils may differ from the SAPUI5 implementation.

  1. Install the Figma software here: www.figma.com
  2. Download the latest Figma SAP Fiori Design Stencils.
  3. Install font 72*.
    a. Choose the folder Font 72 / 72_Desktop.
    b. Double-click each .ttf file and click Install.
  4. Install the SAP icon font.
    a. Remove any former versions of the SAP icon font.
    b. Choose the folder Icon Fonts / …final icon package / Fonts
    c. Double-click the SAP-icons.ttf file and click Install.
  5. Optional: Install the SAP Business Suite icon font.
    a. Remove any former versions of the SAP Business Suite icon font.
    b. Choose the folder Icon Fonts / …final icon package / Fonts
    c. Double-click the BusinessSuiteInAppSymbols.ttf file and click Install.

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

[external_only]

Activating the Figma Library

The procedure for using the Figma library depends your Figma license plan. Follow the link for your license plan below.

Option A: With a Figma Professional Plan

From stencil version 1.98, there are two separate libraries per stencil version: a compact library and a cozy library.

If you already use one of the older Fiori Web Stencil (Quartz Web UI Kit) libraries (v1.80 – v1.96), please use the swap library feature to swap the old library to one of the new files – either compact or cozy, depending on the form factor you are using in your file. If you are using both form factors in one design file, please swap to the library for the most-used form factor.

With this, most components in your file will be swapped. You’ll be able to update any remaining components manually later on using the swap instances function for your file.

  1. Import the two .fig files S/4HANA Web UI Kit Compact and S/4HANA Web UI Kit Cozy into Figma and publish them as libraries.
  1. Create a new design file and activate the published libraries in the asset panel on the left. To do this, click the library icon on the top right of the asset panel and activate the libraries using the switch in the dialog.
  1. After activating a library, you’ll see all the activated libraries as a list within the asset panel on the left. From there, you can easily drag and drop the stencil you need to your canvas.

Option B: Without a Figma Professional Plan

  1. Import the two .fig files S/4HANA Web UI Kit Compact and S/4HANA Web UI Kit Cozy into Figma.
  1. You are now able to copy and paste the stencil you need from the two files into your project file.

[/external_only]

Top Tips

Variants

Check out the variants section within the design panel on the right to adapt the stencil as needed. Possible settings include:

For more information, see Create and use variants on the Figma website.

[internal_only]

Swap Instances

[/internal_only]

[external_only]

Swap Instances (Figma Professional Plan Only)

[/external_only]

You can easily switch between instances of a component (for example, to switch a “button” component to a “menu button” component). You do this via the instance menu in the design panel on the right.

[internal_only]

Map Components to Other Libraries

[/internal_only]

[external_only]

Map Components to Other Libraries (Figma Professional Plan Only)

[/external_only]

If a component has the same name in different libraries, you can swap instances manually (in other words, map components to the components of a different library). For example, you can swap a button from an unavailable library (e.g. “Fiori Web Stencils v1.96”) to a button from the library “Fiori Web Stencils v1.98 Compact“. Simply choose the component you want to swap and search for the same component name within the Swap Instance popup.

Important: If the component doesn’t seem to be available any more, please do not click on “Restore Component”.

For more information, see Swap between component instances in a file on the Figma website.

[internal_only]

Swap Library

[/internal_only]

[external_only]

Swap Library (Figma Professional Plan Only)

[/external_only]

You can use the “Swap library” function to update all instances in your file (for example, to update your components from an older stencil version to the latest version).

Procedure

  1. In the asset panel, open the team library dialog.
  2. Choose the library you activated for the file by clicking on the line item.
  3. Click the Swap library button.
  4. Choose the library you want to use to update your components.
  5. Confirm by clicking the Swap library button again.

Whenever the selected target library matches the style and component naming, it is applied automatically.

Figma doesn’t swap unmatched assets. These stay connected to the original library. If needed, you can swap individual instances manually using the swap instances function.

For more information, see Swap style and component libraries on the Figma website.

[internal_only]

Using Style Libraries

You can use different style libraries in order to get the latest styles for themes available in Figma. Activate the Morning Horizon MASTER [Resource] library. You’ll find the menu in the right-hand panel within the “Fill”, “Stroke”, and “Effects” sections. The styles are structured in groups, such as “Reference”, “Main UI Colors”, and many more.

[/internal_only]

Auto Layout

Auto layout is a feature that enables a container to adapt dynamically to the elements inside it.

You can show/hide elements within components easily using the layer panel on the left.

For more information, see Create dynamic designs with Auto layout on the Figma website.

How to Use SAP Icons

You can copy and paste any SAP icon from the Icon Explorer to Figma:

  1. Make sure that you have installed the icon font you want to use properly. For more information, see Download Icon Font.
  2. In the Icon Explorer, select the icon you want to use and copy the icon to the clipboard (at the top of the right-hand panel).
  3. In Figma, within a text element, select the “SAP-icons” font as font.
  4. In Figma, simply paste the icon from the clipboard.

Note: If you switch between different icon fonts, you may need to restart Figma for the new setting in the Text element to take effect.