SAP Fiori for Android and iOS 24.12 – New Enhancements and Branching for Design Kits

[EmilVoutta]

Wrapping up 2024 and starting into 2025, we keep continuously refining and advancing our mobile design system to empower mobile business app creation at scale. Thanks to insightful feedback from app teams, we've updated existing UI components and rolled out new ones to take mobile app experiences to the next level. We've also aimed for feature parity between SAP Fiori for Android and iOS to ensure a seamless experience and simplified application development across the platforms.

New Design Kits on Figma Community

The Figma Design Kits for Android, iOS, WatchOS and Wear OS are now available on the Figma Community. We’ve also improved the kits providing a better user experience, added more helpful information, and fixed bugs to make designing enterprise apps smoother than ever.

SAP Fiori Design Kits available on Figma Community

In our new Design Kits, your can find comprehensive information cards that provides details on usage, technical names, updates, and the component description now links directly to the SAP Design Guidelines. Besides this, we have Improved component properties, providing a more structured layout and consistent naming along Variables for styles - to include color modes, accent colors, semantic colors, and icon sizes.

You can find the latest SAP Design Kits on Figma.com/community

Introducing Branching Approach in Design Kit

No more creating new design kit versions – from release 24.12 onwards, our Design Kit is updated through a Figma branch, making it easier to update and maintain the library. Simply click on "See all branches" to view details about each update.

Design Kit Versioning with Branches

Major updates to the Design Kit and SDK are identified by release numbers such as 24.12 and include an overview of the updated components. Minor updates, identified by release numbers such as 24.12.1, include bug fixes as well as an overview of the affected components.

New in SAP Fiori for Android 24.12

Check out the latest UI enhancements and additions that our team has been working on for this release.

Avatars

The avatar component that is used to display user profiles, initials, placeholders, icons, or business-related images can now be used in an avatar group with an optional label.

See Avatars to find out more.

Avatar and avatar group variations on compact (left) and expanded screens (right)

Document Scanner

The document scanner leverages Google’s ML Kit, allowing users to digitize physical documents with an on-device flow. Users can select automatic or manual capture and easily edit, retake, or delete specific or all scanned documents. 

For more information, check out the Document Scanner article in the SAP Fiori for Android Design Guidelines.

Document scanner using Google’s ML Kit

Loading State Button

The loading state button is a new button variant featuring a circular progress indicator that appears inside a button when a user-triggered, non-disruptive progress is being processed. It supports various layouts, including a left-aligned button, right-aligned button, two opposite buttons, and text only, with flexible positioning to adapt to different use cases.

See Loading State Button for more details.

From top to bottom: contained loading state button, tonal loading state button, text and icon loading state button

Object Cell

The object cell has been enhanced to provide a more flexible object cell structure and supports nested components such as the rating control and KPI. On top of that, nested components can be easily swapped as needed.

Refer to Object Cell for more details.

Object cells with single actions on the right

Section Header/Footer

The section header can now also be used as a section footer. It supports various layouts, including a left-aligned button, right-aligned button, two opposite buttons, and text only, with flexible positioning to adapt to different use cases. 

Find out more about the Section Footer. 

Section footer with left-aligned button and header (top) and right-aligned button and header (bottom)

Chip Form Cell

The chip form cell has been enhanced with a mandatory field indicator (*) that can be placed next to the label above the chip.

See Chips to learn more about this component.

Single selection chips

Attachment Form Cell

The attachment form cell also supports adding a mandatory field indicator as well as a helper text and an error state.

Check out the Attachent Form Cell article to learn more. 

Attachment form cell as a mandatory field before validation (left) and after validation in error state (right)

Date and Range Picker

The date and range pickers are dialogs used to select a single date or a range of dates. For view-based picker dialogs, it is now possible to add a disabled state for dates and ranges,  minimum/maximum selectable dates, and status indicator decorations for dates.

Selecting a range in the range picker

For more information, refer to Date & Time Pickers.

New in SAP Fiori for iOS 24.12

Next, let’s check out the SAP Fiori for iOS enhancements and additions.

Avatar/Avatar Group

The avatar/avatar group is a new standalone component that is customizable in terms of size, shape, color, and layout. 

See Avatars and Images to find out more.

Examples of Avatars and Profile Images

Document Scanner

The new document scanner leverages Apple’s VisionKit, allowing users to digitize physical documents with an on-device flow. Users can select automatic or manual capture and easily edit, retake, or delete specific or all scanned documents. 

Refer to Document Scanner for more details.

Document scanner

Object Cell

The object cell has been enhanced to provide more flexibility, which mirrors the modular structure of the card component including swappable nested elements such as the rating control. 

Check out the Object Cell guideline article for more details.

Object cell single action variation

Form Cells

The form cell components have been updated with the option to add an asterisk to indicate mandatory fields.

See Attachment Form Cell, Filter Form Cell, Segmented Control Form Cell

Form cells with mandatory field indicator

Rating Control

The rating control now includes the option to display half stars for read-only ratings. You can also add optional leading and trailing text, and users benefit from improved accessibility features.

For more information, check out the Rating Control article in the SAP Fiori for iOS guidelines.

Rating control with label

Step Progress Indicator

The step progress indicator is a progress indicator for tracking and displaying a user’s state in a user flow. With the latest update, you can now choose to use icon nodes as an alternative to numeric and alphabetical nodes.

See Step Progress Indicator for more information.

Step progress indicator on compact (left) and expanded screens (right)

Multi-Message Handling

When a screen contains multiple messages, the banner can show an overview of the type and number of messages with an action link to open a multi-message handling detail view. In the multi-message detail view, it is possible to: filter for a specific message type, clear a single message or all messages of one type, and navigate to the location of the cell with the link.

For further details, see Multi-Message Handling.

Multi-message handling detail view on compact screen (left) and regular screen (right)

Resources

Design Guidelines

SAP Fiori Mobile Design Guidelines for Android and iOS

A detailed documentation on component anatomy, behavior, and interactions allows you to use components that match your use case. Crosslinks to Google’s Material Design Guidelines for Android and Apple’s Human Interface Guidelines for iOS, as well as links to development documentation, help you navigate to these resources. Additionally, you can find a feedback function on each guideline article that allows you to provide feedback.

SAP Fiori for Android Design Guidelines | SAP Fiori for iOS Design Guidelines

Design Kits for Figma

SAP Fiori for Android and iOS Design Kit

With the updated SAP Fiori for Android and iOS Design Kits, it’s now easier than ever to use the latest components and patterns in your mobile design. By using the Design Kits, you can quickly create a consistent user experience that enables app implementations at scale.

SAP Fiori for Android 24.12 Design Kits | SAP Fiori for iOS 24.12 Design Kits