SAP Fiori for iOS – Design Kit

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.

Design Kit

SAP Fiori for iOS 24.12 (Figma Library)

SAP Fiori for iOS 24.12
SAP Fiori for iOS 24.12

Design Kit 24.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.

What’s New in Design Kit

Updated design kit! The SAP Fiori for iOS 24.4 Design Kit (formerly known as “UI Kit”) has undergone significant changes:

  • Variables: Dark and dark elevated color modes (previously called “Theme”) are removed from the Design Kit. Use the icon next to the “Layer” panel to switch “Color Modes” using color variables. Some components with a variety of “Semantic Color” or “Accent Color” choices use the corresponding variable settings to switch the color.
How to use variables for switching color modes
How to use variables for switching color modes
  • In-page layout: There are up to four sections on each component page: info card, master component, subcomponents, and example screens. The master component(s) with possible variants are the components that users can use directly in the design. Please avoid directly using subcomponents. 
New in-page layout
New in-page layout
  • Component properties: Most of the components’ properties have been updated with more flexibility. New properties include variants, boolean controls, text swaps, instance swaps, and nested components. 
New component properties
New component properties
  • Info card: The info card on every component page has been changed in structure. The following information can be found with the new structure: versions & status, component introduction, new updates & warnings, component structure & properties, additional information (nested components, variable settings, relevant links, technical name, search metadata, etc.). 
New info card
New info card

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

SAP Fiori for iOS 24.4
SAP Fiori for iOS 24.4

Download

SAP Fiori for iOS 24.4 (Figma Library)

UI Kit 10.0

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.

What’s New in UI Kit

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

SAP Fiori for iOS 10.0
SAP Fiori for iOS 10.0

Download

SAP Fiori for iOS 10.0 (Figma Library)

UI Kit 9.2

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.

What’s New in UI Kit

  • Updated structure: input & selection 
  • Updated foundations: accessibility, colors, rich text document 
  • Updated components: filter feedback bar, list picker form cell, rating control form cell, step progress indicator, text inputs
SAP Fiori for iOS 9.2
SAP Fiori for iOS 9.2

Download

SAP Fiori for iOS 9.2 (Figma Library)

UI Kit 9.1

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.

What’s New in UI Kit

  • Updated foundation: colors, icons
  • Updated components: analytic data table card, data table, empty state viewer, slider form cell, text input form cell, buttons, timeline, timeline preview, tags, toolbar
  • Updated patterns: quick sort
SAP Fiori for iOS 9.1
SAP Fiori for iOS 9.1

Download

SAP Fiori for iOS 9.1 (Figma Library)

SAP Fiori Mentor App

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.

SAP Fiori Mentor App for Android and iOS is available on Google Play and App Store
SAP Fiori Mentor App for Android and iOS is available on Google Play and App Store

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.

Explore the Power of UI Components

Flexible UI 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.

Live preview of a component with a variety of settings
Live preview of a component with a variety of settings

Preview and Export Code

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.

You can easily preview and export the code for any UI component
You can easily preview and export the code for any UI component

And Many More Features

  • Inspiration from a wide variety of UI components
  • Simulation of UI component behavior in phone and tablet mode
  • Preview and export of code samples with predefined settings
  • Fundamental backend components
  • Best practices for component usage
The SAP Fiori Mentor app features a wide variety of UI components
The SAP Fiori Mentor app features a wide variety of UI components

Start Exploring Today!

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.

Download the SAP Fiori Mentor app on App Store and Google Play
Download the SAP Fiori Mentor app on App Store and Google Play

UI Kit 9.0

This Figma UI Kit contains SAP Fiori for iOS UI components, patterns, page types and foundation. This is intended to help accelerate design and development process and encourage consistency across SAP applications.

Download the San Francisco fonts here.

Download SF Symbols here.

What’s New in UI Kit

  • Updated chart and branding colors
  • Updated components: Text Input, Navigation Bar, Tab Bar, Filter Form Cell, Segmented Control Form Cell, Slider, Switch, Stepper
  • Updated patterns: Sort & Filter

Download

Fiori for iOS 9.0 (Figma Library)

Mobile App Studio

Design Jamming with SAP Design!

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.

Sign up for the App Studio

Register via Fiori Mobile App Studio Sign Up Group

What is in for you?

  1. Raise your app experience
    Gain inspiration and expert feedback for your mobile app design. Discuss with impact and without hierarchy by engaging with global SAP mobile design experts.
  2. Get Design System Feedback
    Broaden your knowledge of the SAP Fiori for Android & iOS Design System, Google Material Design & Apple Human Interface Guidelines.
  3. Share and Care
    Foster a culture of “designing in the open” by having design iterations and bringing in fresh perspectives. Strengthen your network amongst designers at SAP.

You will get:

  1. Captured ideas and recommendations on design challenges discussed in the expert round.
  2. Be part of the Mobile App Repository, an open collection of mobile app design at SAP.

What does the session look like?

  1. Show us your app (30 min)
    Help us understand the context of your app and users and initial Q&A about the app (everybody).Set the stage with the app goal & context and show us what you have. No need to prepare any time-consuming presentation. Are you in the final stage of your project with thorough documentation and every detail carefully considered? Fine. Do you only have a sketch of an idea you drew on your knee on a sticky note? Also fine.
  2. Say what you need (15 min)
    Tell us what design challenges you have. Tell us what kind of feedback we can best support you with based on your chosen focus e.g. “I need your help with the app matching the Android / Apple App Experience.” “Do you feel the presented user flows are intuitive and help our users?”
  3. Active Design Jamming (45 min)
    Idea exchange based on your chosen focus and additional topics. Ask questions and play around with ideas. We will record all ideas on the idea wall in the pre-read for your reference. All feedback is welcome in this studio session. In the end, it’s up to you to use what is most helpful for you. 
Step
01
Prepare the App Studio Space
  1. Join the App Studio Figma Team and make yourself familiar with the service.
  2. Duplicate the [Template] App Studio from the project “How to App Studio” to “2022 Sessions”.
  3. Fill out the Template pre-read page before registering for the App Studio and rename the file with your app name.
Overview and explanation of the App Studio
Overview and explanation of the App Studio
Pre-read of the App Studio
Pre-read of the App Studio
Step
02
Register for a session
The session is offered bi-weekly and is open for registration to all SAP mobile applications.

  1. Register via Fiori Mobile App Studio Sign Up group.
  2. Sign up with your app name, choose your focus, and link to your prepared Figma pre-read (see step 1).
  3. We are looking forward to design jamming with you!

Sign up for an App Studio slot
Sign up for an App Studio slot

Sign up today

Register via Fiori Mobile App Studio Sign Up Group

Stencil 8.0

This design stencil in Figma contain SAP Fiori for iOS UI components, patterns, page types and foundation. The file is intended to help accelerate design and development process and encourage consistency across SAP applications.

Download the San Francisco fonts here.

Download SF Symbols here.

What’s New in Stencil

  • Updated core, accents, and fill colors
  • Updated components: Text Input Field, Object Header
  • Added more device mockups
  • Fixed resizing issue and add variable supports

Download

Fiori for iOS 8.0 (Figma Library)

Stencil 7.0

This design stencil in Figma contain SAP Fiori for iOS UI components, patterns, page types and foundation. The file is intended to help accelerate design and development process and encourage consistency across SAP applications.

Download the San Francisco fonts here.

Download SF Symbols here.

What’s New in Stencil

  • Updated colors to SAP Horizon themes
  • Updated to 72 font styles
  • Increased coverage of UI components
  • New component: Order Picker Form Cell
  • Added examples in the stencil

Download

Fiori for iOS 7.0 (Figma Library)

Stencil 6.1

These downloadable sketch files contain SAP Fiori for iOS UI components for compact width as well as regular width. UI elements like bars, controls, views and some examples of patterns are also included.

Download the San Francisco fonts here.

Download SF Symbols here.

 

What’s New in V6.1

Figma Design Library (Beta version)

  • Major Migration to Figma

Stencils

  • Introducing AR Annotation, Sidebar, In-line Signature Form Cell
  • Separation of Dimension Selector and Segmented Control

 

Download

Fiori for iOS 6.1 – Figma Design Library v1-beta
View in Figma

 

Stencils 6.1

These downloadable sketch files contain SAP Fiori for iOS UI components for compact width as well as regular width. UI elements like bars, controls, views and some examples of patterns are also included.

Download the San Francisco fonts here.

Download SF Symbols here.

 

What’s New in V6.1

Figma Design Library (Beta version)

  • Major Migration to Figma

Stencils

  • Introducing AR Annotation, Sidebar, In-line Signature Form Cell
  • Separation of Dimension Selector and Segmented Control

 

Download

Fiori for iOS 6.1 – Figma Design Library v1-beta
View in Figma

 

Design Consultations

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

  • Review and discussion of components used in mockup
  • Guidance on a possible design component/pattern for use

 

What‘s out

  • Design of new concepts
  • Application design/mockup creation
  • Overall review of the app

 

What do we need from the requester?

  • Product name and business area
  • Description of design challenge
  • Related component/pattern

Stencils 6.0

These downloadable sketch files contain SAP Fiori for iOS UI components for compact width as well as regular width. UI elements like bars, controls, views and some examples of patterns are also included.

Download the San Francisco fonts here.

Download SF Symbols here.

 

What’s New in V6.0

Design Library (Beta version)

  • New design library containing all Sketch symbols is introduced
  • New color system is introduced with all new Light and Dark mode color palette.

Stencils

  • Stencil files are now used for showcasing SDK components.
  • Introduce Multi-user onboarding, new chart types, and Data Table in compact width layout

 

Download

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

 

Design Led Development Process (Service on hold)

Warning
We are putting the D-Gate design service on hold and therefore won’t be able to schedule new D-Gates for the time being. A new service will be announced soon.

A Binding Development Process

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/.

D-Gates – General Guidelines

The following app team roles are required to participate in the D-Gates:

  • D-Gate 0: PO, UX Designer, User Researcher
  • D-Gate 1: PO, UX Designer, Lead Architect
  • D-Gate 2: PO, UX Designer, Lead Architect, Lead Developer (optional)

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.

 

D-Gate 0

Purpose, Roles, and Responsibilities

Purpose: Design Gate 0 ensures that your user research is substantiated, that you have a holistic view of the addressed business roles, and that your focus is on the end users.

Deliverables & Execution

The following documents are required:

Optional:

  • User Research Results Documentation

Results and Consequences

The following D-Gate results are possible:

  • Passed. The app project can advance to the next phase of the DLD
  • Not passed. The app project CANNOT advance to the next phase of the DLD

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.

 

D-Gate 1

Purpose, Roles, and Responsibilities

Purpose: Design-Gate 1 ensures the compliance of the planned design with the SAP Fiori for iOS Design Guidelines to leverage the implementation of a great user experience.

Deliverables & Execution

The following documents are required:

  • Key task flow as Mock-Ups
  • “Final” User Story Map
  • Information Architecture
  • End-user validation result documentation

Optional:

  • Golden Thread

Download Template

Results and Consequences

The following three D-Gate results are possible:

  • Passed. The app project can advance to the next phase of the DLD
  • Not passed. The app project CANNOT advance to the next phase of the DLD
  • Passed with Conditions. The app project can advance to the next phase of the DLD, but all issues flagged during the review will need to be resolved by the next stage, and will be checked during D-Gate 2.

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.

 

D-Gate 2

Purpose, Roles, and Responsibilities

Purpose: Design Gate 2 ensures that the final implementation and design are executed according to the SAP Fiori for iOS Design Guidelines. The review includes a demo of the app, presented by the app POs to the reviewers.

Deliverables & Execution

The following documents are required:

  • Demo IPA file, plus needed login information
  • Log of UX changes from D-Gate 1

SAP Design also needs to be able to test the mobile app at least 3 days before the D-Gate meeting.

Results and Consequences

The following three D-Gate results are possible:

  • Passed. The app project can be released
  • Not passed. The app project CANNOT be released
  • Passed with Conditions. The app team needs to resolve all issues flagged during the review before RTC, and must present a demo to SAP Design before a release decision is made

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.

Stencils 5.1

These downloadable sketch files contain SAP Fiori for iOS UI components for compact width as well as regular width. UI elements like bars, controls, views and some examples of patterns are also included.

Download the San Francisco fonts here.

Download SF Symbols here.

 

What’s New in V5.1

Regular

  • New components, Signature Form Capture and What’s New, are added.
  • Names of components and patterns have been updated to align with structure of Guidelines.
  • Colors and typography have been updated to be easier to consume.

Compact

  • New components, Signature Form Capture and What’s New, are added.
  • Names of components and patterns have been updated to align with structure of Guidelines.
  • Colors and typography have been updated to be easier to consume.

 

Download

SAP Fiori for iOS Stencils – Compact

Uploaded on Jun 26, 2020

SAP Fiori for iOS Stencils – Regular

Uploaded on Jun 26, 2020