SAP Fiori for iOS — Design Skill

Figma UI Kit

File key: 1450853598524410675 Community URL: https://www.figma.com/community/file/1450853598524410675/sap-fiori-for-ios-ui-kit

How to read a component from Figma

get_figma_data(fileKey: "1450853598524410675", nodeId: "<nodeId>", depth: 3)

Known Page Node IDs (depth=1 from file root)

Core Rule: NEVER hardcode hex values

Always use Fiori color tokens. The API is:

// Dynamic color (adapts to Light / Dark automatically)
Color.preferredColor(.primaryLabel)

// In a view modifier context
.foregroundStyle(Color.preferredColor(.tintColor))

// Force a specific scheme
Color.preferredColor(.tintColor, background: .darkConstant)

See references/foundations/colors.md and references/colors.md for the full token table.

Figma Variant → SwiftUI Mapping

FioriButton

// Primary button
FioriButton { _ in Text("Continue") }
    .fioriButtonStyle(.fioriPrimaryButtonStyle)

// Secondary
FioriButton { _ in Text("Cancel") }
    .fioriButtonStyle(.fioriSecondaryButtonStyle)

// Full width
FioriButton { _ in Text("Submit") }
    .fioriButtonStyle(.fioriPrimaryButtonStyle)
    .frame(maxWidth: .infinity)

Typography

Text("Hello")
    .font(.fiori(forTextStyle: .headline))

Text("42")
    .font(.fiori(fixedSize: 36, weight: .light))  // fixed KPI number

Navigation

Cards

List / ObjectItem

Forms

Animation Specs

// Standard button press feedback
struct FioriButtonPress: ViewModifier {
    @State private var isPressed = false
    func body(content: Content) -> some View {
        content
            .scaleEffect(isPressed ? 0.97 : 1.0)
            .animation(.spring(response: 0.2, dampingFraction: 0.8), value: isPressed)
            .simultaneousGesture(DragGesture(minimumDistance: 0)
                .onChanged { _ in isPressed = true }
                .onEnded { _ in isPressed = false })
    }
}

FioriTheme Setup

// AppDelegate — call at launch
import FioriThemeManager

func application(_ application: UIApplication,
                 didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    ThemeManager.shared.setPaletteVersion(.v8)  // pin to current Fiori Next palette
    Font.registerFioriFonts()                   // register SAP 72 typeface
    return true
}

// To override individual tokens:
ThemeManager.shared.setHexColor("FF6000", for: .tintColor, variant: .light)
ThemeManager.shared.reset()  // clear all overrides

Quick Start SwiftUI Template

import SwiftUI
import FioriSwiftUICore
import FioriThemeManager

struct FioriScreenTemplate: View {
    var body: some View {
        NavigationStack {
            List {
                ObjectItem {
                    Text("Invoice #1234")
                } subtitle: {
                    Text("SAP SE")
                } footnote: {
                    Text("Due: 30 Jan 2026")
                } detailImage: {
                    Image(systemName: "doc.text")
                }
            }
            .navigationTitle("My Items")
            .toolbar {
                ToolbarItem(placement: .primaryAction) {
                    FioriButton { _ in Image(systemName: "plus") }
                        .fioriButtonStyle(FioriPrimaryButtonStyle())
                }
            }
        }
    }
}

File Directory

All content lives under references/. When reading any file, always use the full path from the skill root as listed below. Never guess a path — look it up here first.

Foundations — references/foundations/

Components — references/components/

Patterns — references/patterns/

Page Types — references/page-types/

Joule — references/joule/

In-App AI Design — references/in-app-ai-design/

Platform Extensions

Resources & Discovery