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)

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

Download

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

Download

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

Download

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

Download

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.

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.

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.

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

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.

• iOS: Download the SAP Fiori Mentor app for your iPad in the Apple App Store.
• Android: Download the SAP Fiori Mentor app for your Android devices on Google Play.

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

Download

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.

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. 

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

Download

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

Download

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

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

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

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

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:

• Persona (Download Template)
• “Good Draft” User Story Map (Download Template)
• End User Involvement Documentation (Download Template)
• Day in a Life, including Environment Analysis (Download Template)
• Completed Mobile Checklist (Download Template)

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.

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