Intro

The SAP Web UI Kit in Figma contains the components used most commonly across SAP products, such as buttons and inputs. It can be used standalone, although many product teams use it as a connected library that can be cascaded to their own product-specific extensions. This means that they do not have to duplicate the commonly used components.

Using the SAP Web UI Kit

We would like to empower the design teams who consume the SAP Web UI Kit to consider the following cascading options:

• Activate the SAP AP Web UI Kit as a library to access the assets directly. To save time, Figma also allows you to turn on a bundle of libraries per default for any new file. Reach out to your team’s Figma admin to set this up.
• Curate the activated components by nesting them in a wrapper in your product extension library. To do this, create a component in the extension library with an instance of a component from the SAP Web UI Kit. You then have the option to enable only your product extension library and control which components can be used.

Get Started

72 Typeface

Make sure you that you have the latest version of the 72 typeface installed.

Icon Font

This UI Kit offers all icons as vectors.
If you need the latest icon font version, you can download it here.

Enabling the UI Kit in Figma

1. In any given file, whether new or existing, go to the Assets panel on the left and click the Libraries icon on the top right of the asset panel.
2. In the Libraries dialog, type SAP Web UI Kit in the search field at the top. Use the switch to activate the library.