SAP S/4HANA Web UI Kit

Intro

The SAP S/4HANA Web UI Kit enables you to create high-fidelity SAP Fiori for Web designs using Figma. Intended for designers, this kit is tailored specifically to the Morning Horizon theme and helps you rapidly prototype and design SAP Fiori for Web applications with ease.

The kit includes a set of elements for conceptual design purposes. These elements may not fully represent the exact visual design specifications or implementation details. For implementation guidelines, explore the SAP UI5 Demo Kit.

What’s in the Kit?

The kit offers both compact (non-touch screen) and cozy (touch screen) form factors to suit various device interfaces. It includes a comprehensive collection of web components, icons, layouts, and floorplans. The kit is regularly updated and published to ensure you have access to the latest SAP Fiori for Web design elements and standards.

Getting Started

1. Install the SAP 72 Font Family

Begin by installing the SAP 72 Font Family on your computer. This font is meticulously designed to align with SAP’s visual identity and readability standards, ensuring consistency across SAP interfaces.

2. Install Icon Fonts

Install both the SAP Icon Font and the SAP Business Suite Icon Font on your computer.

3. Enable the UI Kit

Visit the SAP Community in Figma to access the SAP S/4HANA Web UI Kit. Open the kit and start dragging components directly into your design.

Reach Out & Support

Need Help or Have Questions?

The SAP S/4HANA Web UI Kit team is here to assist you with any questions or concerns you may have. Whether you’re experiencing technical difficulties, seeking design advice, or simply want to provide feedback, we’re ready to support.

Contact Us

Email: s4hana_webuikit@sap.com

Community Forum

SAP Fiori Design Community

Get Involved

We value your feedback and input! Share your ideas and suggestions for improvement with us. Your input helps us continuously enhance our products.