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.

[internal_only]

Download and Installation

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

1. To build your prototype in Figma, create a new file using the plus icon in the panel on the left.
2. a. Activate the SAP Fiori design stencil library in the asset panel on the left:
   b. Click the library icon on the top right of the left side panel. In the library popup, type “Fiori Web Stencils” in the search field at the top.
   Tip: If you have issues finding libraries via the search field, try clearing your cache.
   c. Within the Fiori Design Stencils section, you can then choose which stencil version to activate:

• A previous stable stencil version (for example, “Fiori Web Stencils v1.82”)
• The latest version “Latest Fiori Web Stencils (Work in Progress)” which comes with automatic version updates (recommended).

3. Activate the Quartz Light Colors MASTER [Resource] library to get all the latest SAP Fiori colors and styles for the Quartz Light theme.

4. 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.

[/internal_only]

[external_only]

Download and Installation

Activating the Figma Library

Option A: With a Figma Professional Plan

1. Import the Figma SAP Fiori Design Stencils as well as the Figma Quartz Light Colors MASTER into Figma and publish them as a library.

2. Create a new design file and activate the published Fiori Web Stencil library and Quartz Light Colors library in the asset panel on the left. To do this, click the library icon on the top right of the left side panel and activate the libraries using the switch in the dialog.

3. 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 Figma SAP Fiori Design Stencils as well as the Figma Quartz Light Color Styles into Figma and publish the styles of the Figma Quartz Light Color Styles.

2. Create a new design file and activate the published Quartz Light Color library in the asset panel on the left. To do this, click the library icon on the top right of the left side panel and activate the library using the switch in the dialog.

3. You are now able to copy and paste the stencil you need from the Figma SAP Fiori Design Stencils file into your project file and change the styles of your own elements to the Figma Quartz Light Color Styles via the design panel on the right.

[/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:

• Content Density
• Size
• Visual State
• Value State
• Actions
• …

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 using the instance menu in the design panel on the right.

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 pane, 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.

Use the Style Library

You can use the Quartz Light Colors by activating the Quartz Light Colors MASTER [Resource] library. You’ll find the menu in the right-hand panel within the sections “Fill”, “Stroke” and “Effects”. The styles are structured in groups, such as “Reference”, “Main UI Colors”, and many more.

Auto Layout

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

• Everything adjusts automatically when an element within the component is shown or hidden.
• If a text is changed within the component, everything adjusts automatically to the new text length.
• The padding is managed dynamically and always remains correct.

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.
3. Select the relevant icon font in the Figma Text element (for example, SAP-icons).
4. In the Copy section at the top of the right-hand panel, copy the icon to the clipboard (copy the second item with the icon and icon name).
5. 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.

Related Links