Kontakt News Events JOBS

Einführung in die Gestaltung von SAP-Oberflächen mit Figma

Thema: UX, Entwicklung

Talea Schweers

Bei Figma handelt es sich um ein leistungsstarkes Designtool für die Zusammenarbeit in Teams. Figma bietet die Möglichkeit Prototypen zu erstellen und diese mit anderen zu teilen. Dadurch können Teams zusammen an einem Prototypen arbeiten und direkt Feedback geben. Hinzu kommt, dass neben dem Design auch eine Navigation hinzugefügt werden kann. So kann ein Prototyp klickbar gemacht werden.

Anwendung von Figma für SAP Fiori Apps

Um Figma für die Erstellung von Prototypen für SAP Fiori Apps nutzen zu können, gibt es Templates, die heruntergeladen werden können. Mit diesen werden die verfügbaren SAPUI5 Komponenten zur Verfügung gestellt. Durch diese können die verschiedenen Möglichkeiten von SAPUI5 nachgebildet werden und es können klickbare SAP Fiori Apps erstellt werden. Dazu zählen auch Komponenten für die Darstellung des Fiori Launchpads. Darüber hinaus gibt es diese Templates für Mobile Anwendungen und Desktop Anwendungen.

Aufbau

Figma beginnt mit einer Startseite. Auf dieser sind die verschiedenen Teams und Projekte abgebildet. Zusätzlich gibt es bereits ein paar eingebundene Templates, die direkt genutzt werden können.

Sobald ein Projekt angeklickt wird, öffnet sich eine neue Seite. Im Onlinemodus verschwindet die Startseite als Tab. In der gedownloadeten App wird ein neuer Tab geöffnet. Dadurch ist eine einfache Navigation möglich.

Du willst Teil von unserem Team werden?

Hier geht es zu unserem Stellenangebot für die Stelle SAP Softwareentwickler *in Fiori!

Zum Stellenangebot

Die Projektansicht ist grundsätzlich in drei Teile einzuteilen. Im linken Bereich befinden sich verschiedene Seiten. Damit kann das Projekt in sich organisiert werden. Darunter befinden sich verschiedene Frames. Diese stellen Zeichenflächen dar, die eine Gruppe von Elementen bündeln. Nur diese sind beim Starten eines Prototyps sichtbar. Zusätzlich kann links innerhalb von eingebundenen externen Bibliotheken gesucht werden.

In der Mitte befindet sich die eigentliche Arbeitsfläche. Dort sind die verschiedenen Frames mit den Elementen abgebildet. Diese können dort in einer Vorschau betrachtet werden.

Auf der rechten Seite sind verschiedene Einstellungsmöglichkeiten zu finden. Dort kann beispielsweise die Größe der Elemente verändert werden. Zudem können dort weitere Einstellungen zur Komponente vorgenommen werden. Eine Komponente ist ein sich wiederholendes Element mit verschiedenen Einstellungsmöglichkeiten. Von dieser können Instanzen abgeleitet werden, die anpassbar sind. Ein Beispiel dafür ist beispielsweise ein Button. Dieser kann Primary, Secondary, Semantic error oder vieles weitere sein. Diese Einstellungen wurden durch die Komponente mitgegeben und werden auch Varianten einer Komponente genannt. Eingebunden werden kann die Komponente „Button“ durch das Template, welches von der SAP zur Verfügung gestellt wird.

Vorteile und Nachteile

Vorteile

Viele Gestaltungsmöglichkeiten
Wird immer online betrieben -> Plattformübergreifend (Egal ob Mac oder Windows)
Synchron parallel an einer Datei arbeiten möglich
Farben, die im Dokument sind, werden direkt bei der Farbauswahl angezeigt
Main Komponenten (Vier Rauten) -> daraus können mehrere Instanzen abgeleitet werden
Automatische Anpassung aller Instanzen bei Änderung der Main Komponente
Main Komponente erleichtert Teamarbeit (Einer aktualisiert eine Komponente und die anderen Teammitglieder können diese updaten/synchronisieren)
Möglichkeit, eigene Styles zu erstellen
Mehrere Tabs öffnen (Desktop Version)
Frames und Pages zur Organisation
Diverse Gestaltungsmöglichkeiten durch verschiedene Varianten
Einfaches Zurücksetzen von Instanzen
Möglichkeit, individuelle Elemente einzufügen

Nachteile

Erstmal aufwändig sich einzuarbeiten
Weniger dynamische Möglichkeiten (Keine Sortier-, Filter- und Gruppierfunktionen) -> man kann nicht mit Daten arbeiten
Offline sind weniger Optionen vorhanden
Weniger Möglichkeiten beim Erstellen dynamischer Prototypen
Einschränkungen in den SAP-Vorlagen -> nicht alle Elemente enthalten
Größen der Instanzen nicht immer verstellbar

Kosten

Um Figma nutzen zu können, muss ein Konto angelegt werden. Zu Beginn kann ein kostenloses Abo ausgewählt werden. Dieses beinhaltet allerdings ein paar Einschränkungen. Es können maximal drei Projekte erstellt werden, es gibt eine Historie bis zu 30 Tagen, zwei Bearbeiter sind erlaubt und mehrere Zuschauer und es kann keine externe Bibliothek verlinkt werden.
Wenn mit einem größeren Team gearbeitet werden soll, ist die Professional Version für 12 Euro im Monat sinnvoll. Dadurch kann im Team gearbeitet werden, es können unbegrenzt Figma-Dateien angelegt werden und es ist ein unbegrenzter Versionsverlauf einzusehen.

Darüber hinaus gibt es die Organization-Version für 45 Euro im Monat und Enterprise-Versionen für 75 Euro im Monat. Dadurch werden unter anderem Single-Sign-On Funktionen oder auch die Einbindung von REST APIs für Variablen ermöglicht.

Fazit

Figma ist ein leistungsstarkes Designtool mit dem Prototypen kollaborativ in Teams erstellt werden können. Damit können nicht nur Prototypen für SAP Fiori Apps erstellt werden, sondern auch für viele andere Anwendungsfälle. Durch die Verwendung von einfachen Formen kann jede beliebige Oberfläche nachgebildet werden. Durch die Einbindung von externen Bibliotheken und Templates wie bei SAP Fiori sind noch viele weitere Möglichkeiten mit Figma möglich. Sie möchten gerne selbst einen Prototyp erstellt haben und wissen nicht, wie dieser aussehen könnte, melden Sie sich gerne! Wir erstellen gerne einen Prototyp für Sie!