Updated: August 30, 2024

SAP Fiori for Web UI Kit

Intro

SAP Fiori for Web UI Kit cover page

Intro

The SAP Fiori for Web UI Kit contains UI common components, patterns, and foundation elements, such as colors and typography. It helps accelerate design and development processes and encourages consistency.

Prerequisites

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.

Using the SAP Fiori for Web UI Kit

Duplicate a file to add a copy of it to your drafts folder. This duplicate is an entirely new file. Changes made to the original file are not reflected in duplicated files.

  1. Click Open in Figma.
  2. Select the account where you want to add the file.
  3. A copy of the file is added to your drafts. Every file you duplicate from the Community will have “(Community)” appended to the file name.

Related Links

Figma Community

  • SAP Community
    Find other SAP UI kits for web and mobile in the SAP space in the Figma Community.