4
This Figma Design Kit contains SAP Fiori for iOS UI components, patterns, page types, and foundation. It helps accelerate design and development processes and encourages consistency across SAP applications.
Download the 72 font: Desktop | Web
Download the San Francisco font here.
Download SF Symbols here.
This Figma Design Kit contains SAP Fiori for iOS UI components, patterns, page types, and foundation. It helps accelerate design and development processes and encourages consistency across SAP applications.
Download the 72 font: Desktop | Web
Download the San Francisco font here.
Download SF Symbols here.
Updated design kit! The SAP Fiori for iOS 24.4 Design Kit (formerly known as “UI Kit”) has undergone significant changes:
Foundations:
Updated: Adaptive design, colors, materials and effects
Components:
New: Linear progress indicator
Updated: Carousel layout, data table, masonry layout
Patterns:
Updated: Feedback indicators, illustrated message, single-user onboarding
This Figma UI Kit contains SAP Fiori for iOS UI components, patterns, page types, and foundation. It helps accelerate design and development processes and encourages consistency across SAP applications.
Download the 72 font: Desktop | Web
Download the San Francisco font here.
Download SF Symbols here.
Foundations:
New Design Token Color Variables: implemented across Light, Dark and Increase Contrast (Light & Dark) modes, aligned with Android
Updated Iconography: using SAP Fiori custom symbol library
Components:
New: Cards and card system, Key Value Table View Cell
Updated: Buttons, Filter Feedback Bar, Form Cells (disabled states, error handling, inline validation), Attachment Form Cell, Stepper Form Cell, Illustrated Message enhancement, Modals, Navigation Bar, Toolbar
Patterns:
New: List Picker, Skeleton Loading
This Figma UI Kit contains SAP Fiori for iOS UI components, patterns, page types, and foundation. It helps accelerate design and development processes and encourages consistency across SAP applications.
Download the 72 font: Desktop | Web
Download the San Francisco font here.
Download SF Symbols here.
This Figma UI Kit contains SAP Fiori for iOS UI components, patterns, page types, and foundation. It helps accelerate design and development processes and encourages consistency across SAP applications.
Download the 72 font: Desktop | Web
Download the San Francisco font here.
Download SF Symbols here.
The SAP Fiori Mentor app is an interactive playground for mobile designers and developers that enables them to explore the flexibility of mobile components and patterns available through the SAP BTP Software Development Kits for Android and iOS.
You can view live previews of all UI components and change parameters to see the effect immediately. Once a component is customized to your liking, view and copy the ready-made code snippet. You can also learn more about the backend components such as onboarding flows, SAP Foundation & OData.
Download it now – it’s available on Google Play and App Store for iPad.
Building on Google’s Material Design and Apple’s Human Interface Guidelines, the out-of-the-box UI components extend the SAP mobile design systems with components designed for enterprise use cases and a variety of industry applications. These include the visual update of core OS components, feature enhancements, and the creation of completely new components.
By adjusting component settings within the app, you can live preview the behavior, interaction, and features of components. This not only speeds up the communication between design and development but also allows you to identify the right component for your requirements and user needs. On top of that, the SAP Fiori Mentor app helps you to adapt standard components to best support your specific scenarios.
The app provides developers the option to export code samples with predefined settings that can be exported into their preferred development tool. Designers on the other hand can easily understand the scope of functionality for a specific component, specify their designs with applicable parameters, and hand over the respective code snippets to their development partners.
The SAP Fiori Mentor app and additional enablement resources support you in designing and building applications with SAP Fiori for Android and iOS.
Download the SAP Fiori Mentor app now for Android & iOS.
App Studio is a 90-min creative session that brings app designers & system designers together in a creative space to enhance the app’s user experience.
We think of the App Studio as an idea exchange forum that ensures we raise our game on how SAP applications are experienced on Android, iOS, Wear OS and watchOS.
Not by being prescriptive but by offering candor and deep analysis of the app design based on the SAP Fiori Design System, Apple Human Interface Guidelines, and Google Material Design.
We are already preparing the next great updates for you. Below, you can find a summary of our backlog and a glimpse of the next hot release candidates and discoveries you may want to be a part of.
Please contact our designers in case of requirements: olga.martynchik@sap.com
Please contact our designer in case of requirements: jens.maurer@sap.com
Some larger discoveries are announced via our Fiori Mobile Announcements Sign Up Group. Stay tuned!
New
Enhancements
Watch our release sessions to understand more about the scope.
Check out our Fiori Mobile Announcements Sign Up Group to never miss a sneak preview or update.
Any questions? Please contact Mobile Design Ops.
This is your one-stop destination for all of our design resources and services. Are you looking for a design review or do you want to raise a new feature? This is where you can find everything you need.
We think of the App Studio as an idea forum that ensures we raise our game on how SAP applications are experienced on Android and iOS.
Not by being prescriptive but by offering candor and deep analysis of the app experience based on the SAP Fiori design system and Apple HIG/Material Design.
Gain and exchange ideas for your mobile app design and broaden your knowledge of the SAP Fiori for Android & iOS design systems and language, Google Material Design, and Apple Design Guidelines.
Services that are designed for mobile designers to face day-to-day design challenges and to stay up to date.
In the design consultation, you can discuss your component challenge, get guidance on the usage of components and patterns based on the Fiori iOS/Android Guidelines and get a neutral perspective from an external expert.
Do you have a question regarding a design challenge? Ask the Fiori Design Community!
We are planning to move the community to Stack@SAP. In the meantime, please use the Fiori Design Community on SAP Build Work Zone.
Get first-hand access to the latest SAP Fiori for iOS and Android announcements and be an influencer in the mobile design system. Sign up now.
Services that are designed for mobile enthusiasts to be deeper involved in shaping the design system.
Do you have a new design requirement for the Design System? We are looking for your input to evolve the Design System and ultimately provide an excellent user experience to our customers. Find out how to raise new features.
Are you interested in what new components and enhancements are being worked on and on the roadmap? We are completely transparent and give you full access to our release backlogs*. Have a look!
Check out our next release candidates & discoveries
Release Backlog in Jira:
*We commit to all “very high” backlog items, “high” items are stretch goals, and medium items are only worked on from the design side without dev implementation yet.
Design Sprint Reviews give insights into what has been accomplished. We present the latest progress of new components and enhancements. Keep in mind that this might not lead directly to implementation. Everyone is invited to take part. If you are interested, please let us know.
With the Design Kits, designers can use predefined design system components, colors, and typography to design their applications. The UI design kits are available for the design tool Figma.
The SAP Fiori for iOS design guidelines help you create insightful and powerful applications with extensive descriptions of behavior, interaction, and specification of components and patterns.
Our app icon design direction complements the Horizon visual theme and creates a recognizable mobile brand. The balance between individual icon metaphors, characteristic shapes, and coherent visual design embraces the SAP mobile product family.
The SAP Fiori Mentor app is an interactive documentation that helps designers and developers discover capabilities of the SAP BTP Software Development Kit, specifically on the UI component library, “SAP Fiori for iOS.”
Fiori for iOS 7.0 (Figma Library)
Do you want to stay up-to-date with all news around SAP Fiori for Android & iOS?
With our Fiori Mobile Announcements Sign-up group, you’ll be informed about all events, receive our newsletter, and get insights into what is planned in the next releases.
Sign up for Sneak Previews on new components and patterns to get early insights into how a component works and provide feedback on your requirements.
Sign up to get notified about the latest announcements!
The objective of the Sneak Preview Session is to understand how a new component works and provide feedback on it in an early stage to influence the development. It’s an interactive Figma Workshop – active participation is desirable.
What‘s In
What‘s Out
Have you missed our last Release Rollout Session for SAP Fiori for iOS 24.4 and SAP Fiori for Android 24.4?
Check out the recording here.
Sign up for a 30-min design consultation session on SAP Fiori for iOS for your app. Book your session here.
The objective of the consultation is to discuss your app design challenge, get guidance on the usage of components and patterns based on the SAP Fiori iOS/Android guidelines, and get a neutral perspective from an external expert.
What‘s in
What‘s out
What do we need from the requester?
At SAP, we continuously enhance our design system SAP Fiori for iOS and Android to meet the need of SAP mobile apps and keep up with the latest updates on the respective operating systems.
Do you have a new design requirement for the design system? We are looking for your input to evolve the design system and ultimately to provide an excellent user experience to our customers.
In the following, we explain the journey of an initial mobile design request to an implemented SDK component and design system guideline.
In case you want to report an iOS SDK Bug, please use the following IOSSDKBUG Jira Board.
SAP Fiori for iOS SDK – Sketch Design Library 6.0 (Beta version)
Add Library to Sketch | Download
SAP Fiori for iOS SDK – Sketch Design Stencil 6.0 (Compact layout)
Download
The Design Led Development Process (DLD) helps to ensure projects provide a great user experience.
The process has three main phases – Discover, Design, and Develop – each of which ends with a D-Gate (Design Gate) that must be passed before the next phase can start.
For more details on the standard DLD process, as rolled out by SAP Design, please visit: https://experience.sap.com/internal/fiori-design-web/design-led-development-process/.
The following app team roles are required to participate in the D-Gates:
Before each D-Gate, the app team must ensure all members are are aligned regarding the content that will be shown during the D-Gate.
The following documents are required:
Optional:
The following D-Gate results are possible:
The result should be given at the end of the D-Gate. If this is not possible, the final D-Gate result needs to be provided within 3 working days.
The following documents are required:
Optional:
The following three D-Gate results are possible:
The result should be given at the end of the D-Gate. If this is not possible, the final D-Gate result needs to be provided within 3 working days.
The following documents are required:
SAP Design also needs to be able to test the mobile app at least 3 days before the D-Gate meeting.
The following three D-Gate results are possible:
The result should be given at the end of the D-Gate. If this is not possible, the final D-Gate result needs to be provided within 3 working days.
SAP Fiori for iOS Stencils – Compact
SAP Fiori for iOS Stencils – Regular
Processing your feedback
Your feedback has been sent to the SAP Fiori design team. Thank you for your helping us to improve our guidelines!
