What’s New

UI Kit Page Hierarchy

UI Kit Enhancements! The page hierarchy has been updated. Major changes include:

• Leveraged Figma native dividers
• Added ❖ symbol in front of component pages.
• Added ↳ symbol in front of foundation pages.
• Added an overview of components on the component group page.
• Restructured system components.
• Reordered some components to enhance the alignment between SAP Fiori for iOS and Android.

Updated Figma UI Kit page hierarchy

Actionable Text Weight Update

Feature Enhancements! Actionable text (hyperlinks, buttons) has been updated to semibold weight to meet accessibility requirements.
Affected components: banner, button form cell, key value table view cell, header cell, multi-message handling

Multi-message handling with actionable text

AI Handoff

New Pattern! AI Handoff outlines common use cases for Joule vs embedded AI, best practice tips for transitioning between the two contexts, and handoff example flows.

AI handoff

AI Insights

New Pattern! AI Insights provide a standardized way to display a summary, analysis, or suggestion generated with AI.

AI Insights full-screen (left) and card variant (right)

App Icons

Guideline Enhancements! We've updated our iOS app icon guidance to align with Apple's latest design language featuring the Liquid Glass aesthetic. Additionally, we’ve added a new section about the naming convention, and a section on how to use Apple’s Icon Composer.

SAP Fiori for iOS – Liquid Glass

Attachment Form Cell

Feature Enhancements! When uploading attachments, users receive feedback on the progress with a loading indicator. Each individual file now includes updated error handling.

Loading indicator (left) and error handling (right)

Card System

Feature Enhancements! Cards now feature horizontal variants and a new flex-item component to allow for a more flexible configuration of the card.

The horizontal orientation enables you to align the media image to be leading or trailing, thereby giving the user more options as to how the content can be displayed.

With the new flex item component, the card’s main header can now be customized to hold more content by adding tags and status info labels outside, on top, between, or below the title and subtitle.

Card component examples

Text Inputs

Feature Enhancements! The label color of text inputs has been updated to black for typing state, right-side padding for character counters has been removed, and the real-time character counter color has been changed to gray when the limit is met.

Affected components: text field form cell, key value form cell

Label and character count with updated color (left) and enhanced padding for character count (right)

Single-User Onboarding

Feature/Guideline Enhancements! The new splash screen guidance emphasizes a simple, logo-only design that follows the system launch screen.

We have also updated passcode guidance including Skip Passcode for optional passcode setups and important considerations for existing users.

The Change Passcode flow has been enhanced with support for Remove Passcode, automatically triggered by policy changes and available through app settings using SDK APIs.

Skipping passcode variant (left) and removing passcode variant (right)

Slots

New Guideline! Slots have been added across our design landscape - from subcomponents in cards to a design-only page type called “Slot Page”. These placeholder components are used to fill in either preferred or custom content.

Compatible components with slots

Toolbar

Feature Enhancements! The overflow interaction in the toolbar has been updated. Tapping on the overflow button opens a menu with additional text-only action buttons.

Toolbar overflow button interaction

AI Writing Assistant

New Pattern! AI writing assistant quickly and seamlessly edits text in text input fields via provided prompts in a panel, allowing users to refine their input and complete writing tasks with efficiency.

Opening AI writing assistant

AI User Feedback

New Pattern! AI user feedback allows users to provide positive or negative feedback about their experience with embedded AI, applicable from component-level feedback to page-level feedback.

AI user feedback in default view

Illustrated Message

Feature Enhancements! New illustration assets have been added.

Illustrated message in different containers

Modals and Sheets

New guideline articles! New guideline articles for Modality and Sheets have been created, covering all types of modals and sheets, including but not limited to full-screen modals, non-modal sheets, action sheets, popovers, and form sheets.

Modal sheet

Picker

Feature Enhancements! Date range picker is now supported as a picker form cell, enabling the triggering of the date range selection component.

Date range picker

Text Inputs

Feature Enhancements! Text inputs now come with currency support via a new view modifier, enabling display of the ISO code in the text input label, showing the currency symbol after editing, and applying localized formatting using native Apple APIs and formatters.

Text input - single property form cell with currency field support

Card Types

Deprecated Component! Card types have been deprecated and will be removed from the UI Kit starting with SDK release 25.12. Use Cards instead.

Deprecated card types

Empty State View

Deprecated Component! The empty state view component has been deprecated and will be removed from the UI Kit starting with SDK release 25.12.

Use the Illustrated Message instead.

Deprecated empty state view

Adaptive Layout

Updated Guideline Articles! The adaptive layout articles have been updated and enhanced to provide guidance on size classes and layout basics, as well as multi- column layouts and adaptive apps for large screens.

Three-column layout (left) and two-column layout with inspector (right)

AI Notice

Feature Enhancements! AI notice informs users when content is AI-generated and is pivotal for user transparency.

AI notice is now available as an additional field underneath the helper field. Depending on the use case, it may be interactive and used alone or non-interactive and used with a page-level banner.

Non-interactive and interactive AI notice

Attachment Form Cell

Feature Enhancements! The attachment form cell is used to upload files, usually as part of the create or editing workflow.

It now includes an optional confirmation dialog when the user taps the “Delete” icon in the previewer.

Delete confirmation dialog in attachment form cell

Card Header

Feature & Structure Enhancements! The right accessory in the main header includes two slots for custom components. The right accessory in the extended header includes one custom component.

The card component setup is better aligned with Android.

Three custom slots in main and extended header

Filter Feedback

Feature Enhancements! The filter feedback now features the stepper, slider, and list picker as new form cells – giving you even more flexibility and control in your filtering experience.

Stepper form cell (left) and slider form cell in filter feedback pattern (right)

Feedback Patterns

Feature Enhancements! Visual enhancements have been made to feedback patterns such as banners, multi-message handling. Material effects and relative position have been applied to toast message. Offline and error handling can be found in the banners, and empty state is now a part of the illustrated message.

Banner (left) and toast message (right)

Progress Indicators

Structure Enhancements! Guideline structure enhancements have been made to the progress indicators category.

New component guidelines added: activity indicator and progress & processing indicators.

Activity indicator (left) and progress indicator (right)

New Updates via Branches

Updated Design Kit! We’ve transitioned from creating new versions as separate files to updating within the same file using branches. This change ensures a single source of truth, improves collaboration, and simplifies version control by keeping all updates centralized and organized in one place.

SAP Fiori for iOS Design Kit

Variables – Cell Style

New variable! Cell style has been added to the variable collection. All the table view cells and form cells can now be switched between a full-width style or an inset grouped style, including the header cell and footer cell. Hairline control has been added to this variable collection as well.

Full-width cells (left) and inset grouped cells (right)

Elevation

New! The Elevation article goes into the details, visual cues, examples, and usage of the elevation system.

Elevation techniques: materials and shadow effect styles

Chart Colors

Update! Chart ordered and semantic colors have been updated to align with new chart colors from web.

Updated chart ordered colors in light and dark modes

Avatar and Avatar Stack

Feature Enhancements! We have added a grouped layout as well as top and bottom labels for the avatar stack.

From left to right and top to bottom: leading label, above label, trailing label, and below label

Document Scanner

Feature Enhancements! The document scanner allows for automatic and manual mode scanning with border detection, can also do multiple page scanning and editing.

Document scanner views

Multi-Message Handling

Feature Enhancements! Multi-message handling has been added to the feedback patterns. 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.

Multi-message handling

Form Cells

Feature Enhancements! Attachment form cell, filter form cell, and segmented control form cell now have required field behavior available.

From top to bottom: filter form cell, segmented control form cell, attachments form cell

Object Cell

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

Object cell with label button and rating control (top) and with avatar stack and overflow button (bottom)

Rating Control

Feature Enhancements! We have added half stars for read-only rating controls as well as optional leading and trailing text. The read-only star sizes have been enhanced and small sized editable and disabled rating controls have been removed for better accessibility.

From top to bottom: editable, read-only, disabled, and accented read-only rating controls. From left to right: large sized and small sized rating controls

Step Progress Indicator

Feature Enhancements! The step progress indicator has been enhanced with icon nodes as an alternative to numeric nodes.

Numeric nodes (left) and icon nodes (right)