Über den Autor: Maximilian Gräf ist ein erfahrener SAP Fiori UX Designer und Experte in der Gestaltung neuer Fiori Apps mit Figma. Er war unter anderem für SAP, E.ON, CANCOM oder die Bundesagentur für Arbeit an der Gestaltung neuer Fiori Apps beteiligt.
Warum SAP Fiori die Zukunft ist
Die SAP-Welt steigt nach und nach in Richtung Fiori um. Alte Technologien wie SAP GUI oder WDA gehören der Vergangenheit an und werden durch das moderne Look and Feel der Fiori-Oberflächen ersetzt.
Die User profitieren hierbei von einer deutlich besseren Nutzererfahrung. Die einzelnen Apps sind konsistenter und einheitlicher, was vor allem neue Anwender oder Gelegenheitsuser bei der reibungslosen Arbeit unterstützt. Nicht zu unterschätzen ist der Fakt, dass 80 % aller User im Fiori-Umfeld Apps nur gelegentlich (ca. 2h/Woche) nutzen und somit nicht jede App in- und auswendig kennen.
Doch auch Power User profitieren von Fiori Apps und den neuen Features, die diese mitbringen. SAP Fiori ebnet nämlich auch den Weg in Richtung KI – so kann SAPs neuer KI-Assistent „Joule“ in direkter Nutzung von Fiori Apps eingesetzt werden.
SAP Fiori eröffnet also zahlreiche Potenziale – für ein modernes Look and Feel, aber auch für den Einsatz der zahlreichen Standardanwendungen, die SAP in der Fiori Apps Library bereitstellt.
Eigene Fiori Apps zu designen ist richtig!
Doch wenn der SAP-Standard nicht zu den eigenen Anforderungen passt, ist der beste Weg, eigene Fiori Apps zu designen und zu entwickeln. So kann man für die eigenen Anwender die bestmögliche Lösung schaffen und behält die volle Kontrolle über die zugehörigen Prozesse und Arbeitsabläufe.
Im Idealfall kann man Key User direkt bei der Ausgestaltung neuer Fiori Apps involvieren. Dies sorgt am Ende für eine hohe Nutzerakzeptanz und glückliche Anwender.
Mit Figma Fiori Apps designen
Figma ist ein sehr bekanntes Prototyping-Tool, mit dem UX-Designer üblicherweise Screendesigns und Klickdummies für neue Apps und Webseiten erstellen. Das Tool ist zwar nicht spezifisch nur auf SAP Fiori ausgerichtet, kann aber in Verbindung mit von SAP bereitgestellten Vorlagen (den SAP Fiori Design Stencils) hervorragend genutzt werden, um Fiori Apps zu designen.
Es lohnt sich, mit einem Tool wie Figma Fiori Apps zu designen, bevor diese in die Entwicklung gehen. Denn so wird die geplante Lösung greifbar, noch bevor der große Aufwand investiert wird, der mit der technischen Entwicklung einhergeht. Die zukünftigen Anwender können basierend auf Screendesigns ihr Feedback geben, mit dem die Fiori App direkt optimiert werden kann. Dies garantiert eine optimale Lösung, ohne dass später viele teure Nachbesserungen an der produktiven App erfolgen müssen.
Das Designen von Fiori Apps in Figma bedeutet konkret, dass wir Screendesigns erstellen. Solche Screendesigns zeigen detailgetreu, wie die Fiori App am Ende tatsächlich aussehen wird. Die Unterschiede zur finalen Entwicklung sind dabei minimal.
Wir können die Fiori Screendesigns in Figma auch einfach zu Klick-Prototypen arrangieren. So lassen sich Interaktionen und Nutzerflows (z. B. das Öffnen von Dialogen oder die Navigation zwischen Screendesigns) anschaulich demonstrieren.
Folgend findest Du die die Fiori App, welche wir gemeinsam in dieser Anleitung in Figma bauen werden:
Hinweis: Fiori Apps können sehr detailliert in Figma designed werden. Die finalen Screendesigns sind von der Implementierung oft nicht zu unterscheiden. In Figma könnena uch Interaktionen wie: Navigation zwischen Screens oder Dialoge unkompliziert umgesetzt werden.
Anleitung: So kannst Du Fiori Apps mit Figma designen
1. Figma installieren
Figma ist das beste Tool, um Fiori Apps zu designen – gerade weil es SAP offiziell mit der Bereitstellung von Design-Vorlagen unterstützt. Figma kann gleichermaßen im Browser als auch als installierte Variante genutzt werden.
Persönlich würde ich Dir empfehlen, Figma zu installieren, da hier die Performance oft noch ein wenig besser ist als im Browser. Den Download findest Du auf der offiziellen Webseite:
In jedem Fall benötigst Du noch einen kostenlosen Figma-Account, den Du Dir nun erstellen solltest.
2. SAP Fiori Schriftarten installieren
Damit Du nahtlos mit den Fiori Vorlagen in Figma arbeiten kannst, musst Du nun noch kurz zwei Schriftarten auf deinem PC installieren.
Das ist zum einen die SAP Schriftart „72“, welche Du hier von SAP herunterladen kannst:
Und zum anderen die „Business Icon“-Schriftart, welche Du hier von SAP herunterladen kannst:
Entpacke beide .zip-Dateien und installiere im Anschluss die Schriftarten.
3. Fiori Vorlagen in Figma öffnen (SAP S/4HANA Web UI Kit)
Um nun mit der Erstellung von Designs für Fiori Apps in Figma zu starten, ist es erforderlich, die offiziellen Vorlagen von SAP zu öffnen. Diese Vorlagen beinhalten alle UI-Elemente, die es in Fiori gibt. Von Buttons, Tabellen oder Auswahlfeldern bis hin zu kompletten Seiten und Fiori Floorplans, wie z. B. dem List Report oder der Object Page, findest Du hier alles, was Du benötigst, um Fiori Apps zu designen.
SAP stellt verschiedene Vorlagen bereit, je nachdem, ob Du eine Fiori App für das Web, Android oder iOS erstellst. Doch in 90 % der Fälle wirst Du eigene Fiori Apps für dein SAP S/4HANA gestalten. Daher findest Du die passenden Vorlagen hier:
Hinweis: SAP aktualisiert und erweitert diese Vorlage regelmäßig. Von daher lohnt es sich, alle paar Monate die Fiori Vorlagen neu zu importieren!
4. Überblick zu den Fiori Vorlagen in Figma
Wenn Du das Web UI Kit in Figma geöffnet hast, solltest Du im linken Bereich von Figma eine lange Liste an „Seiten“ sehen. In diesen vielen Seiten findest Du die einzelnen UI-Elemente und Vorlagen von SAP Fiori, die Du nun nutzen kannst.
Nimm Dir am besten ein paar Momente, um Dir einen Überblick zu verschaffen. So finden wir hier z. B. in der Seite „Buttons“ all die zahlreichen Button-Arten von Fiori. Unter „Responsive Table“ findest Du schon etwas Komplexeres: die Tabellen, die Du in deinen Fiori Apps nutzen kannst. Und wenn Du sehr weit runterscrollst, findest Du beispielsweise unter „List Report“ auch Layout-Vorlagen für alle Fiori Elements Floorplans.
Und genau diese Vorlage schnappen wir uns im nächsten Schritt!
Designe deine erste Fiori App mit Fiori Elements Vorlagen
Aus meiner Erfahrung als Fiori UX Designer werden 90 % aller Fiori Apps unter Verwendung von Fiori Elements umgesetzt. Fiori Elements ist eine Möglichkeit, die Entwicklung (und das Design) eigener Fiori Apps zu beschleunigen, indem man fertige Vorlagen („Floorplans“) einsetzt. Wenn Du schon mal eine Fiori App gesehen hast, dann hast Du höchstwahrscheinlich auch schon einen solchen Floorplan gesehen.
Für unsere erste Fiori App verwenden wir auch so einen Floorplan als Grundlage, um den Design-Prozess zu beschleunigen und gleichzeitig eine solide Lösung zu bauen.
Die Idee für unsere fiktive Fiori App
Unsere Fiori App soll folgenden fiktiven Use Case erfüllen:
- Auf einer Übersichtsseite: Alle Rechnungen auflisten und filterbar machen, die mein Unternehmen an Kunden gestellt hat.
- Auf einer Detailansicht: Umfassende Informationen zu einer spezifischen Rechnung bereitstellen.
Aus diesem Use Case ergibt sich, dass wir zwei Screendesigns benötigen: die Übersichtsseite und die Detailansicht. Idealerweise können wir hier also zwei klassische Fiori Elements Floorplans verwenden: den List Report (für die Übersichtsseite) und die Object Page (für die Detailansicht).
Design eines List Reports in Figma
Starten wir also mit dem List Report. Hierfür öffnen wir erneut die zuvor bereits geöffneten Fiori Vorlagen in Figma und gehen auf die Seite „List Report“. Dort kopieren wir auf der linken Seite die Ebene „XL 1440px“ und fügen diese in eine neue Figma-Datei ein.
Eine neue Figma-Datei können wir erstellen, indem wir auf das kleine Figma-Icon oben links klicken -> Datei -> Neue Design Datei. In der neuen Design-Datei fügst Du dann mit Strg + V die List-Report-Vorlage ein!
Was Du nun siehst, ist eine vorhandene Vorlage für einen List Report – der perfekte Ausgangspunkt für unser Design. Diese Vorlage enthält Beispieldaten, die für unsere fiktive Fiori App nicht passend sind – die können wir aber ganz einfach ändern.
Texte anpassen
Wenn Du „T“ drückst und dann mit dem Mauszeiger auf einen vorhandenen Text klickst, kannst Du diesen ändern. Damit kannst Du nun z. B. die Filter-Namen, Spalten-Überschriften oder Texte in den Tabellen und Buttons anpassen.
Hinweis: Wenn das Ändern eines Textes nicht möglich ist, kann es sein, dass die erforderlichen Schriftarten nicht installiert. Sollten eine Änderungen trotz installierter Schriftarten nicht möglich sein, empfehle ich den Desktop-Client von Figma zu verwenden.
UI-Elemente löschen
Wenn Du Elemente nicht mehr benötigst, kannst Du diese löschen. Hierfür musst Du das entsprechende Element anklicken und drückst dann „Entfernen“.Hinweis: Eventuell musst Du mehrfach auf ein Element klicken, um es zu selektieren, da Du dich quasi durch die Hierarchie im Design klickst.So kannst Du nun z. B. auch Filter, Buttons oder Tabellenzeilen löschen. Wenn Du dich mal verklickst, kannst Du mit Strg + Z das Ganze wieder rückgängig machen.
UI-Elemente anpassen
Viele UI-Elemente können auch angepasst werden. Wenn Du z. B. den „Create“-Button auswählst, siehst Du auf der rechten Seite Eigenschaften, die Du ändern kannst. Wenn Du z. B. den Type auf „Primary“ änderst, wird der Button zum Primärbutton und bekommt einen blauen Hintergrund. So kannst Du das Look-and-Feel sehr vieler UI-Elemente nach deinen Wünschen anpassen. Probiere ruhig alle Optionen aus – Du kannst nichts falsch machen! ;)
Du kannst nun beispielsweise auch die Tabelle („Responsive Table“) im Design auswählen und bei der Eigenschaft „Structure“ den Wert „Columns“ auswählen. Das sorgt dafür, dass Du die einzelnen Spalten der Tabelle einfacher anpassen (löschen oder hinzufügen) kannst.
Für unsere Beispiel-Fiori-App
In unserem Beispiel passe ich nun die Texte in den Filtern und der Tabelle entsprechend dem Use Case an. Nicht benötigte Filter und Spalten in der Tabelle entferne ich dabei. Das Endergebnis ist unsere Übersichtsseite für die Rechnungen!
Design einer Object Page in Figma
Nun möchten wir für unsere fiktive Fiori App noch die Detailseite einer einzelnen Rechnung erstellen. Hierfür gehen wir wieder in die Fiori Vorlagen und wechseln auf die Seite „Object Page“. Hier sehen wir nun verschiedene Ausprägungen der Object Page für unterschiedliche Bildschirmgrößen.
Wir klicken einfach auf die Object Page Variante, die ganz links oben ist, kopieren diese erneut in die Zwischenablage und fügen sie in unser Figma-Design ein, in dem wir auch den List Report platziert haben.
Ähnlich wie bei dem List Report können wir die einzelnen UI-Elemente der Object Page auch nach Belieben anpassen – sprich wir können: Texte ändern, Elemente anpassen oder entfernen.
Anpassung des Floorplans für unsere Beispiel-Fiori-App
In unserem Beispiel entfernen wir vor allem einige UI-Elemente, die wir nicht benötigen – zum Beispiel die Grafik und das Popover oben links. Wir passen Texte und Tabellen an, damit es zu unserem Use Case passt.
Prototyping: Verlinkung der Übersichts- und Detailseite
Wir haben nun zwei sehr einfache Ansichten für unsere Fiori App designed. Nun können wir noch einen Schritt weitergehen und Interaktionen einfügen.
Für dieses Beispiel bauen wir noch die Navigation von der Übersichtsseite zur Detailseite ein, denn dies ist ein integraler Bestandteil unserer geplanten App.
Hierfür müssen wir zunächst in den "Prototype"-Modus wechseln - dies machen wir durch Klick auf den "Prototype"-Reiter im Panel oben rechts.
Anschließend wählen wir den Pfeil in der letzten Spalte der Tabelle aus der Übersichtsseite aus und ziehen via Drag-and-:Drop einen Pfeil auf die Detailseite.
Im Anschluss können wir die Interaktion auch im Präsentationsmodus testen. Hierfür wählen wir die Übersichtsseite aus und Klicken auf den Play-Button oben rechts. Dies öffnet einen neuen Tab.
Wenn wir alles richtig gemacht haben, können wir nun via Klick auf den Pfeil in der Übersichtstabelle auf die Detailseite navigieren!
Glückwunsch - Du hast deine erste Fiori App designed!
In unserem Beispiel haben wir nun zwei einfache Screendesigns basierend auf vorhandenen Vorlagen („Floorplans“) erstellt und über das Prototyping miteinander verknüpft.
Wenn Du bis hierhin gekommen bist: Glückwunsch - Du hast deine erste Fiori App erfolgreich designed! :)
Tiefergreifende Anpassungen der Floorplans und Design komplexer Fiori Apps
Es ist häufig erforderlich und nützlich, die Designs noch weiter auszubauen. Prinzipiell kann jeder Aspekt eines solchen Screendesigns in Figma angepasst und erweitert werden. Es können neue UI-Elemente hinzugefügt, das Layouting angepasst oder Interaktionen wie z. B. das Öffnen von Dialogen und Navigation bis hin zu konkreten Features in Figma realisiert werden.
Die Umsetzungsmöglichkeiten haben hierbei keine Grenzen. Wenn keiner der Fiori Elements Floorplans für deinen Use Case passend ist, kannst Du auch eine Fiori Freestyle App in Figma designen.
All dies erfordert allerdings fortgeschrittene Skills und Techniken im Umgang mit Figma für Fiori, welche ich in diesem Einsteiger-Guide bewusst nicht inkludieren möchte, da diese ohne direkte Anleitung durch einen Experten oft nicht das gewünschte Ziel erreichen.
Mein Angebot, um jede Fiori App perfekt in Figma zu designen
Gerne helfe ich Dir oder deinem Unternehmen, Figma für das Design von Fiori Apps professionell einzusetzen. Damit können neue Fiori Apps ideal und ohne große Aufwände geplant und gleichzeitig eine hohe Nutzerakzeptanz garantiert werden. Das ist sowohl nützlich bei der Ablösung alter SAP GUI Transaktionen als auch bei der Einführung komplett neuer Fiori Apps.
Um Fiori Apps perfekt in Figma zu designen, habe ich zwei Angebote an Dich:
- Schulung: Fiori Apps mit Figma designen - Hierbei zeige ich Dir und deinem Unternehmen in einem eintägigen Workshop, wie mit Figma wirklich jede Fiori App designt werden kann. Wir gehen dabei auch auf erweiterte Techniken, wie z. B. das Prototyping, ein und ich teile meine Best Practices aus meiner fast zehnjährigen Tätigkeit als Fiori UX Designer.
- Direkte Unterstützung von mir als Fiori UX Design Expert -Ich erstelle für Dich und dein Unternehmen Screendesigns und Klickdummies für Fiori Apps basierend auf einem kurzen Briefing. Im Anschluss liefere ich hochdetaillierte Designs und berate auch gerne bei der Umsetzung.
Hast Du Interesse an meinem Angebot oder Fragen rund um den Einsatz von Figma zur Erstellung von Screendesigns für Fiori Apps?
Dann schreibe mir gerne eine lockere E-Mail an mg@futurisma.de oder eine Nachricht auf LinkedIn. Ich helfe Dir gerne weiter!
.webp)
.webp)