SAP S/4HANA Web UI Kit

Resources / UI Kits / 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 precise visual design specifications, refer to the SAP Fiori Visual Design System. For implementation guidelines, explore the SAPUI5 Demo Kit.

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. These fonts integrate seamlessly with the SAP Icon Browser plugin in Figma. Activate the plugin within your Figma file to access a vast library of SAP icons for your designs.

3. Enable the UI Kit

[internal_only]

In a design file in Figma, open the Assets panel in the left sidebar. Click on Libraries to open the Libraries modal. Search for “S/4HANA Web UI Kit” in the list of available libraries and click Add to file.

[/internal_only][external_only]

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.

[/external_only]

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