Updated: December 15, 2021

Get Started

SAP Fiori

What is SAP Fiori?

Learn about the new user experience for SAP software.

A Beginner's Guide to the SAP Fiori Design Guidelines

Your brief introduction to everything you need to know about working with the guidelines.

Foundation

Design Principles

Learn about the five core principles that make up the design philosophy of SAP Fiori.

SAP Fiori Design-Led Development Process

Get to know the SAP Fiori design-led development process.

Responsiveness

SAP Fiori apps work on a multitude of devices. Check out SAP Fiori's focus on responsive and adaptive design.

Theming

SAP Fiori user interfaces are constructed using SAPUI5 control sets that are meticulously styled with CSS.

Learn More

To learn more, check out the foundation category in the navigation menu on the left.

General Concepts

SAP Fiori Launchpad

The SAP Fiori launchpad is the main entry point to SAP Fiori apps on mobile and desktop devices.

Draft Handling

Learn about the draftling handling concept of SAP Fiori, including auto-save, locking, and data loss prevention.

Navigation

Navigation in SAP Fiori follows the standard navigation paradigms of various web applications.

Manage Objects

Find out about the different interaction flows for managing objects, including create, edit, and delete.

Message Handling

Find out how to display messages to the user such as errors, warnings, success messages, confirmation, and information.

Learn More

To learn more, check out the general concepts category in the navigation menu on the left.

Layouts,  Floorplans & Frameworks

Page Layouts

Most app designs are based on one of these basic page layouts, which can be used with a range of different floorplans.

Floorplans

Floorplan is an umbrella term that covers the different layout types, the structure of the controls used, and how to handle different use cases. An application contains normally several pages, with each page showing a single floorplan.

SAP Fiori Elements

SAP Fiori elements provide a framework for generating UIs at runtime based on metadata annotations and predefined templates for the most used application patterns. They ensure design consistency, keep apps up to date with evolving design guidelines, and reduce the amount of frontend code for building SAP Fiori apps.

Frameworks

Get insights into two important frameworks used by SAP Fiori.

UI Elements

'Explore' Page

Get an overview of all the UI elements available in SAP Fiori.

Learn More

To learn more, check out the UI Elements category in the navigation menu on the left.

Services & Resources

Design Stencils

Download the design stencils and start designing your own SAP Fiori app.

SAP Icon Font

Download and install the SAP icon font to create true-to-life mockups.

SAP User Experience Community

Ask design-related questions and post your design ideas in our discussion forum.