Design-Systeme für UI-Komponenten

Aus Sicht der Softwaretechnik handelt es sich bei einem Design-System um eine Sammlung aufeinander abgestimmter Komponenten, die letztendlich auf das User-Interface/UI-Design fokussieren. Dabei basieren alle in dieser Sammlung enthaltenen Komponenten auf einheitlichen Design-Prinzipien. Im Idealfall sind alle über das Design-System bereitgestellten Komponenten auf eine hohe Wiederverwendbarkeit ausgerichtet. Alle UI-Komponenten des Design-Systems zielen auf die Programmierung von Anwendungen mit einer homogenen Benutzungsschnittstelle und einem reichhaltigem Benutzererlebnis (User-Experience, kurz: XD) ab.

Design-System erschließt optimale Benutzererfahrung für mehr Effizienz

Das Fundament eines jeden Design-Systems bilden neben den Design-Prinzipien als Leitlinie die Design Language/
Formensprache und der Style-Guide (Bild 1). Die Formensprache, manchmal auch Formenvokabular oder Mustersprache genannt, richtet den Fokus dabei auf die Gestaltung visueller Elemente: Formen als Sprache stellen ein Mittel der Verständigung dar. Im Zusammenhang mit der Integration von maschinellem Lernen/künstlicher Intelligenz in ein Design-System wird die Mustersprache auch als visuelle Grammatik oder Bildgrammatik bezeichnet.

Die Design-Sprache definiert sogenannte Design-Ele­men­te/-Mittel (Token/Materialien) wie zum Beispiel Farben, Stile/Layouts, Typografie, Icons oder Grid-Systeme mit der Zielsetzung, diese in allen damit zu gestaltenden UI-Elementen wiederzuverwenden.Der Style-Guide legt die Verwendung der Gestaltungselemente und deren Interaktionsformen gegenüber den Endbenutzern fest. Je nach Ausprägung des Style-Guides befinden sich auch fertige UI-Elemente im Style-Guide. Insofern baut der Style-Guide auf der Formensprache auf, greift auf deren Token/Materialien zurück und beschreibt, in welcher Art und Weise und in welchem Kontext diese verwendet werden.Visuelle Grammatik und Style-Guide stellen sicher, dass die daraus resultierenden UI-Komponenten dem Endbenutzer ein einheitliches und konsistentes Look-and-feel bieten. Zusätzlich trägt die Wiederverwendung der im Design-System enthaltenen UI-Komponenten (Bild 1) bereits durch ihre Konzep­tion dazu bei, die Produktivität und Effizienz über den gesamten Software-Life-Cycle für alle Anwendungen zu erhöhen. Die UI-Komponenten zielen darauf ab, die Bedürfnisse möglichst aller Benutzer optimal zu erfüllen; damit diese ­ihre Aufgaben möglichst effizient und gemäß ihrem Wissensstand vollkommen befriedigend erledigen können.Für die Gestaltung der UI-Komponenten und die Einbindung bewährter Benutzerlebnisse kommen geeignete Metho­den des UI/UX-Designs (kurz: UXD) mit einer ganzheitlichen Betrachtungsweise zum Einsatz. Dies verstärkt die Intention, dass ein Design-System für alle mit diesen UI-Komponenten entwickelten Anwendungen für deren Endbenutzer ein konsistentes Erscheinungsbild und benutzerzentrierte Interak­tionsformen sicherstellt. Erst unter diesen Voraussetzungen besitzt ein Design-System das Potenzial, eigene Anwendungen erfolgreich am Softwaremarkt zu positionieren.

Konzeption und Einbettung eines Design-Systems in die Entwicklung

Mit den Elementen der Design-Sprache gestaltet das Design-Team die UI-Komponenten; dabei bindet es auch gesammelte ­positive und negative Benutzererlebnisse mit ein. Das ­Design-Team besteht aus UI/UX-Experten und zusätzlich allen wichtigen im Entwicklungsprozess etablierten Rollen. Dazu gehören Vertreter aus den Bereichen Produktplanung/-design, Systemanalytik, Frontend-Entwicklung und Endanwender, aber auch Backend-Programmierung oder Test/Qualitätssicherung. Eine besondere Bedeutung für die Schaffung einer Marke nimmt die Zusammenarbeit des Design-Teams mit den Gesamtverantwortlichen aller Unternehmensbereiche ein.Wie jede Software besitzt ein Design-System ein Vorgehensmodell, einen Lebenszyklus und durchläuft Änderungen, die kontinuierlich in agilen Prozessen bearbeitet werden. Ein Design-System sollte mithilfe eines geeigneten Werkzeugs entwickelt werden. Auf dem Softwaremarkt gibt es dazu verschiedene UI/UX-Design-Tools wie Adobe XD, Figma, InVision oder Sketch. Da im Zentrum des Frontends immer ein Prototyping steht, muss das UI/UX-Design-Tool die Erstellung von Prototypen und deren Testing unterstützen. Analog dem Testen einer Anwendung unterliegt ein Design-System einem Testprozess, der bereits bei dessen Konzeption zu berücksichtigen ist.Aufgrund der zentralen Bedeutung der Zusammenarbeit aller Beteiligten sollte diese vom Werkzeug abgedeckt werden. Benötigt wird eine kollaborative Software, die gruppenorientierte Diskussionen mit den Arbeitsergebnissen verknüpft, diese optimal wiederverwendet und sie vom System-Design bis in die Entwicklung durchreicht. Der Grad der Wiederverwendung bei den Arbeitsergebnissen sollte sich möglichst kontinuierlich erhöhen. Das UI/UX-Design-Tool gewährleistet, dass Änderungen in der Design-Sprache sich automatisch im Design-System widerspiegeln. Ebenfalls sollten Änderungen im Design-System automatisch in alle mit ihm entwickelten Zwischen-/Endprodukte übernommen werden.Microsoft hat die Design-Sprache und das Design-System Fluent 2 mit dem UI/UX-Design-Tool Figma [1] entwickelt. Über eine eigene Webseite in der Figma-Community [2] macht Microsoft die zugehörigen Assets, verschiedene Libraries (UI-Kits) und die Schnittstellen zu Microsoft-Tools zugänglich (Bild 2). So findet man dort Elemente der Design-Sprache oder des Design-Toolkits für Accessibility Notation, Design-Layouts, Emojis, Icons, Spracherkennung, VS Code Icons, VS Code Color Mapper oder das VS Code Design-Toolkit. Ebenfalls stehen über die Webseite der Figma-Community UI-Kits oder App-Templates für Android, Azure Communication Services UI Library, Microsoft Teams, Power Apps, SharePoint, iOS oder Windows UI 3 zur Verfügung.

Entstehung der Design-Systeme Fluent, Fluent 2 und FAST Frame

Fluent entstand evolutionär über mehrere Jahre aus der Microsoft Design Language (MDL), auch kurz Metro genannt, und einer Verschmelzung geeigneter Design-Konzepte der grafischen Oberfläche von Windows Aero mit dem Skin von Windows Vista und Windows 7. Mit dem Launch von Windows 8 gab Microsoft die Konzeption einer eigenen modernen UI-Design-Sprache (Metro Design Language) bekannt. Zusammen mit Windows 10 stellte Microsoft die MDL 2 (Microsoft Design Language 2) der Öffentlichkeit vor. Im Jahr 2017 wurden einige Aspekte von MDL 2 (Licht, Bewegung/Motion, Animationen/Effekte, Materialien, Tiefe, Skalierung) in eine eigenständige Formensprache Fluent Design übernommen – damit war Fluent in Version 1 geboren [3].Auf Basis von Fluent 1 entwickelte Microsoft eine Reihe plattformunabhängiger UX-Frameworks unter dem Produktnamen Fluent UI, die in Word, Excel, PowerPoint bis One­Drive, PowerBI, SharePoint und Teams zum Einsatz kamen und teilweise noch kommen. In Fluent UI flossen vor allem die Erfahrungen mit Office UI Fabric (auch Fabric JS genannt) ein. Mit Windows 11 überarbeitete Microsoft Fluent 1 durch Einbezug innovativer UI/UX-Konzepte zu Fluent 2 [4]. Dazu zählen das Token-System, ein kohärentes Farbsystem, Standardisierung der Ecken, vor allem aber bessere Anpassbarkeit, robuste Nutzungshinweise und eine Notation für Barrierefreiheit. Dabei stand immer als Ziel im Mittelpunkt, die UX und den Übergang vom Design zur Entwicklung zu verbessern.Während Fluent sich in der Vergangenheit evolutionär über viele Jahre hinweg entwickelte, begann die Konzeption von FAST erst Anfang 2018 [5]. Das Microsoft-Team wählte ursprünglich den Namen FAST-DNA (Functional, Adaptive, Secure und Timeless Design Network Architecture). Bei FAST bildet das konfigurierbare Design-System FAST Frame das Fundament; dieses besteht aus Web Components, Tokens, Stylesheets und Styling-Tools. Alle Webkomponenten von FAST Frame erfüllen die zugehörigen Web-Standards des World Wide Web Consortium (W3C).Innerhalb des FAST-Projekts rückten immer mehr die Bi­bliotheken und Tools für die schnelle, produktive Entwicklung von Web-Apps in den Vordergrund. Dabei liefern die Komponenten von FAST für die erstellten Webanwendungen ein konsistentes Erscheinungsbild, das auf den Design-Prinzipien von Fluent basiert. Ferner berücksichtigt das Micro­soft-Team mit FAST auch das in der Softwareentwicklung für das Web immer noch vorherrschende Open-Source-Ökosystem Node.js. Beispielsweise unterstützt FAST eine Installa­tion seiner Web Components mittels NPM und Yarn, eine Programmierung mit HTML/JavaScript und ein Styling mit CSS.

Abgrenzung von Fluent 2 und FAST aus Sicht von Design und Entwicklung

FAST nutzt konzeptionell Fluent als Basis, so basieren beide auf einem gemeinsamen Vorrat an Gestaltungsprinzipien – was einen ersten Hinweis auf zwei zueinander kompatible Design-Systeme gibt. Die in beiden auf konzeptueller Ebene enthaltenen Design-Elemente, die letztendlich auch der Programmierer in der App sichtbar verwendet, verfolgen die Zielsetzung, bestmöglich die kognitiven Prozesse des Endanwenders zu unterstützen, um so dessen Entscheidungsfindung und Problemlösung zu optimieren.Zusätzlich wollen beide Design-Systeme Fluent und Fast ein Gefühl von Vertrauen und Zuverlässigkeit bei den Endbenutzern schaffen. Mit den entwickelten Apps sammeln Endanwender Erfahrungen (UX), die diese trotz ihrer unterschiedlichen Fähigkeiten auf neue, bessere Lösungen übertragen können. Zudem steigern mit beiden Design-Systemen programmierte Apps die Kreativität der Endbenutzer, erzeugen positive Emotionen und stärken so letztendlich eine eigene, selbst entwickelte Marke. Diese Außenwirkungen können bei den Endbenutzern zu einem sensorischen Branding für die eigenen Apps führen.Ergänzend existiert eine Koexistenz auf Entwicklungsebene: Fluent 2 und FAST lassen sich auch zusammen einsetzen, wenn eine hybride App sowohl native als auch webbasierte Komponenten erfordert. Dies erschließt der Windows-Welt die über das Web verfügbaren Komponenten. Für die umgekehrte Richtung gibt es (vermutlich aufgrund von zu wenigen Anwendungsfällen) aktuell keine direkte Unterstützung von Seiten Microsofts. Für diesen Fall würde sich eine Software-Bridge anbieten, die fertig programmierte Elemente oder ganze Komponenten der Fluent/Windows-Welt den Webkomponenten von FAST zugänglich macht.

Zielsysteme und App-Typen von Fluent 2 und FAST Frame

Fluent ist primär auf native Microsoft-Anwendungen und -Plattformen abgestimmt. Zu Fluent gehören Design-Elemente, Ressourcen und UI-Komponenten, die darauf abzielen, immersive, konsistente und intuitive Benutzererfahrungen in den Microsoft-Ökosystemen (.NET und Windows) zu schaffen. Fluent-Apps besitzen stimmige und in sich geschlossene Benutzeroberflächen mit besonderen grafischen Features. Neben Windows gehören dazu die Xbox und inzwischen auch die Microsoft-Plattformen Dynamics 365, Micro­soft 365 (Excel, Word, PowerPoint, Outlook et cetera), SharePoint, Teams und PowerBI mit jeweils spezifischen APIs für die Programmierung.Im Unterschied zu Fluent ist FAST nicht rein auf Microsoft-Plattformen ausgerichtet, vielmehr liegt der Fokus von FAST auf Webanwendungen (Web-Apps). Die in Fluent integrierte Design-Sprache wirkt sich positiv auf FAST Frame aus, das heißt, die mit den Fluent-Design-Prinzipien gestalteten FAST-Komponenten führen zu einer konsistenten Benutzererfahrung auf allen Plattformen. Das Look-and-feel der FAST-Komponenten vermittelt dem Betrachter und damit jedem Endbenutzer eine moderne Außenwirkung.Als Open-Source-Projekt legt FAST (in Anlehnung an das frühere Fluent UI) seinen Schwerpunkt auf plattformunabhängige Webkomponenten, die konsistent zur Design Language von Fluent sind. Analog zu Fluent UI, dessen Frameworks auf Fluent 1 basieren, greift FAST auf die Design-Sprache von Fluent 2 zurück. Dies untermauert nochmals, dass es sich bei Fluent 2 und FAST um zwei zueinander kompatible, sich ergänzende Design-Sys­teme handelt. Aus Programmiersicht stellt FAST eine Sammlung von JavaScript/TypeScript-Packages mit zusätzlichen Werkzeugen dar. Damit lassen sich die Webkomponenten von FAST auch in Kombination mit verschiedenen Web-Frameworks (Angular, ASP.NET, Aurelia, Blazor, React oder Vue) nutzen.

Design-Prinzipien von Fluent 2 und FAST Frame im Überblick

Die Gestaltungsprinzipien von Fluent 2 und von FAST Frame spiegeln sich in den Elementen der Design-Sprache wider; dazu gehören: Farben, Icons, Typografie, Layout, Bewegung, Erhebung, Material und Gebilde. Farben dienen in erster Linie dem Designer als Referenz und sind in keinem primären Element der Benutzeroberfläche von Fluent implementiert. Stattdessen stellt Fluent 2 Farbtöne über drei verschiedene Farbpaletten bereit: neutrale, mehrfach verwendete und produktbezogene (in den Microsoft-Apps Access, Excel, OneDrive, PowerPoint, Publisher, Teams, Visio, Word und weiteren verwendete Farben) zur Verfügung.Fluent 2 fasst Icons in drei Sammlungen zusammen: System-Icons, Produkt-Launch-Icons (Bild 3) und Icons für Dateitypen. System-Icons unterstützen zwei Themes (Regular, Filled), um deren Layout, visuelle Ausdrucksstärke und Einsatzbreite zu optimieren. Die jeweilige Plattform und der konkrete Anwendungsfall bestimmen die Größe eines Icons. Die Launch-Icons der Microsoft-Produkte können bedarfsgesteuert skaliert werden. Icons der Dateitypen drücken deren Einsatz- oder Verwendungszweck aus; diese können in ihrer Größe angepasst und als Vektoren (SVGs) oder im WebP-Grafikformat bereitgestellt werden. Für eine noch breitere Unterstützung verschiedener Browser sollten PNGs eingesetzt werden.

Seitens der Typografie verwendet Fluent 2 für Web und Windows die von Microsoft entworfene Schriftfamilie Segoe (UI); für macOS, iOS kommt San Francisco Pro von Apple und für Android Roboto zum Einsatz. Recht häufig setzt Fluent 2 für die Schriftstärken (auch Strichstärken genannt) die Stärkenklassen Regulär/Normal, Halbfett/Semibold und Fett/Bold mit den für das Ausgabemedium geeigneten Größen (Graden/Gewichten) ein.Das Fluent-Layout-System positioniert UI-Elemente und definiert, wie UI-Komponenten sich den verfügbaren Platz in der App teilen, ihn nutzen und in welchen Beziehungen sie unter- und zueinander stehen. Besonderen Wert legt das Design-System auf Ausdrucksstärke und effiziente, schnelle Benutzerinteraktion. Bewegungen oder Animationen geben dem Anwender Hilfestellung, seine Aufgabenstellung möglichst benutzergerecht, schnell und einfach zu erledigen.Erhebungen erzeugen visuelle Hinweise mittels Höhe, Tiefe, Schatten oder Licht, um die Lesbarkeit zu verbessern und die Bedeutung der UI-Elemente zu betonen. Materialien beschreiben die Beschaffenheit einer Oberfläche – dabei bietet Fluent 2 vier verschiedene Materialtypen an: Solid (Feststoff), Mica (Glimmer), Acrylic (Acryl) und Smoke (Rauch). Ein Materialtyp ist mit einer gewissen Durchlässigkeit verbunden: fest (undurchsichtig), verdeckt und transparent. Glimmer und Acryl sind häufig wie Feststoff undurchlässig. Rauch soll das darunterliegende Element dimmen, sodass es in den Hintergrund tritt. Mittels Gebilden stellt Fluent 2 verschiedene Formen bereit, die dem Anwender die Benutzeroberfläche schneller erschließen.

Highlights von Figma für das Arbeiten im Team und mit Komponenten

Für Designer steht Figma in verschiedenen Versionen bereit: als Web-App für einfachste Zusammenarbeit in Echtzeit über den Browser, als Desktop-App (macOS, Windows) für per­formanteres Arbeiten auf dem Arbeitsplatzrechner im Vergleich zur Web-App und als mobile App (Android, iOS), um Projekte von unterwegs zu betrachten. So unterstützt die Software von Figma ein auf die jeweiligen Bedürfnisse ausgerichtetes Arbeiten, passend zur aktuellen Arbeitsumgebung und deren Anforderungen. Neben den beeindruckenden Features für die Zusammenarbeit im Team und das Prototyping mit der Web-App sind die in Figma integrierte Versionierung, Variantenbildung und Komponentenorientierung hervorzuheben.Arbeiten mehrere Team-Mitglieder über das Web gleichzeitig an ein und demselben Entwurf und nehmen sie Änderungen vor, so sehen diese alle sofort, und zwar ohne zusätzlich notwendige Interaktionen. Eine integrierte Kommentarfunktion unterstützt die Ideenfindung durch Einbindung von Brainstorming im Team. Mit den Prototyping-Funktionen erstellt ein Designer interaktive Flows; diese simulieren, wie ein Benutzer mit den Oberflächen interagieren kann. Aufgrund der Cloud-Basierung des Tools erhält jede Datei und damit jeder Prototyp einen eindeutigen URL. Dieser Link lässt sich einfach kopieren, um Entwürfe und Prototypen schnell mit anderen zu teilen. Die Präsentation eines Prototyps hilft bei der Einbindung aller beteiligten Rollen in das Projekt und trägt zur Umsetzung von Design-Thinking bei.Komponenten in Figma dienen nicht nur der Wiederverwendung von Elementen im Projekt, sondern können auch die Konsistenz über verschiedene Projekte hinweg sicherstellen. Eine automatische Aktualisierung von Änderungen im Design gewährleistet Konsistenz in allen Arbeitsergebnissen. Figma erleichtert so den Designern wesentlich die Pflege von Elementen über verschiedene Projekte hinweg. Eine Datei mit dieser Zielsetzung bezeichnet Figma als Library/Bibliothek. Eine Figma-Datei mit vorgefertigten Komponenten, die nur in wenigen, spezifischen Projekten zum Einsatz kommen, nennt sich Template-Datei. Das neue Figma-Feature Dev Mode koppelt Design und Quellcode – es hilft Programmierern, ein besseres Verständnis zu den Elementen des Designs zu erlangen. Die im Dev Mode enthaltene VS-Code-Erweiterung Figma for VS Code liefert Vorschläge für die Umsetzung des Designs im Quellcode und verknüpft diesen mit den zugehörigen Design-Elementen.Figma unterscheidet Hauptkomponenten und Instanzen als Kopie einer Komponente, die mit einer Hauptkomponente verknüpft sind. Bei einer Instanz handelt es sich also um eine wiederverwendete Hauptkomponente. Sie erhält über die Verknüpfung alle an der Hauptkomponente vorgenommenen Änderungen, ohne dass seitens des Designers oder Programmierers ein zusätzlicher Arbeitsaufwand für die Konsolidierung anfällt. Schlussendlich unterstützt Figma nicht nur die Verwaltung von Komponenten, sondern auch von Bibliotheken. Eine Bibliothek stellt als Sammlung von Komponenten die Ausgangsbasis für deren Wiederverwendung in anderen Projekten dar. Sie gewährleistet mittels automatischer Aktualisierung eine projektübergreifende Konsistenz.

Das Design-System Fluent 2 über die Figma-Community erkunden

Das Arbeiten mit Figma setzt generell den Login eines Benutzers voraus – dieser erfolgt über die Web-App in einem Browser. Startet der Designer danach die Desktop-App, so erscheint der Home-Bereich des angemeldeten Benutzers. Im linken Fensterausschnitt befindet sich ganz unten der Eintrag Explore Community. Vor diesem Text steht das zugehörige Icon-Symbol der Figma-Community. Dieses Icon-Symbol hat Figma auch in die Menüleiste der Desktop-App neben dem Home-Icon des aktuellen Benutzers aufgenommen. Ein Klick auf dieses Icon-Symbol der Figma-Community oder auf den Menüeintrag Explore Community baut eine Verbindung zur Webseite der Figma-Community auf.Tippt man in der ganz oben stehenden Suchleiste die Zeichenkette Microsoft ein, so öffnet sich eine Drop-down-Liste (Bild 4), die alle passenden Treffer anzeigt. Die Drop-down-Liste teilt die gefunden Treffer in drei verschiedene Gruppen ein: Files, Plug-ins und Creators. Jede dieser Gruppen umfasst mehrere Einträge, von denen der Benutzer einen auswählen kann. Bei Files handelt es sich um Toolkits der Typen Figma-Libraries oder Figma-Templates. Aus dem Inhalt der Figma-Datei oder deren Namensgebung leitet sich der zugrunde liegende Dateityp ab.

Libraries fokussieren auf die Wiederverwendbarkeit und stellen über eine zentrale Verwaltung die Konsistenz und Effizienz im Design-Workflow sicher. Im Unterschied zu Libraries helfen Templates mit ihren vorfertigen Vorlagen beim schnelleren Start eines Projekts. Ein Plug-in stellt dem Designer zusätzliche Funktionalität für Figma bereit. Das bedeutet konkret, dass ein Plug-in die Figma-Software um zusätzliche Features erweitert, um so dem Designer seine Arbeit zu erleichtern. Die Gruppe Creators führt Mitglieder der Figma-Community auf, welche die in der Liste angezeigten Files oder Plug-ins über die Community bereitstellen.Ein Klick auf den Eintrag Microsoft in der Gruppe Creators zeigt sämtliche Ressourcen der Figma-Community an, die vom Team mit dem Namen Microsoft Design stammen. Nicht alle unter diesen Ressourcen aufgelisteten Einträge gehören zum Umfeld des Design-Systems Fluent 2. Häufig enthält eine derartige Ressource in ihrem Bezeichner die Angabe „Fluent“. Manche Ressourcen zur Version 1 von Fluent haben im Namen die Bezeichnung „Fluent 1“ mit aufgenommen. Das Microsoft-Design-Team hebt aus allen Ressourcen zwei Gruppen mit den Bezeichnungen Foundation und Core hervor. Diese Bezeichnung befindet sich im linken Anzeigebereich der jeweiligen Ressource unterhalb des Fluent-2-F-Buchstaben-Icons (Bild 2).

Figma-Ressourcen von Fluent 2 der Gruppe Foundation, Core und Shared

Zu den wichtigsten Fluent-2-Ressourcen des Microsoft-Design-Teams in der Figma-Community gehören die nachfolgenden Bibliotheken oder Templates. Das Fluent-2-Team unterteilt diese in drei Gruppen oder Kategorien: Foundation, Core und Shared – diese inhärente Aufteilung erschließt sich aufgrund der großen Anzahl an Figma-Ressourcen von Microsoft leider nur schwer. Zur ersten Gruppe Foundation gehören folgende fünf Figma-Dateien:

• Microsoft Fluent system iconography: Enthält die in den Produkten von Microsoft verwendeten System-Icons mit einer ausführlichen Anleitung zur Erstellung eigener Icons [6]. Der Eintrag Guidelines im Bereich Pages erläutert die Entstehung, ihre Eigenschaften und die Arbeitsweise mit den System-Icons. Zugehörige Ressourcen für die Programmierung befinden sich im GitHub-Repository Fluent UI System Icons. Microsoft stellt dieses GitHub-Repository für die Programmierung mit Android, iOS, macOS und Flutter sowie als Plain-SVG-Datei bereit.
• Fluent emoji – 1, 2 und 3: Das Microsoft-Team teilt Emojis in diese drei Figma-Bibliotheken auf. In der ersten Gruppe findet man Emojis zu Smileys & Emotion, Body sowie Animals & Nature. Die zweite Gruppe enthält Emojis zum Thema People, und die dritte deckt wieder mehrere Bereiche ab, nämlich Food & Drink, Travel & Places, Activities, Objects und Symbols. Eine Realisierung von Microsoft-Emojis enthält das GitHub-Repository Fluent Emoji [7]; insgesamt macht Microsoft so über 1 800 Emojis zugänglich. Einen schnellen Zugriff auf Fluent emoji – 1 bis 3 bietet die Website fluentemoji.com (Bild 5); sie unterstützt auch den Download einzeln ausgewählter Emojis als PNG- oder SVG-Datei für die Programmierung.

• Accessible design toolkit: Diese Figma-Datei legt ihren Schwerpunkt auf Anleitungen, Grundsätze und Checklisten zur Barrierefreiheit; das Microsoft-Design-Team gibt Hilfestellungen zur Umsetzung einer Bibliothek für Barrierefreiheit auch bei Einsatz des Figma-Plug-ins A11y – Focus Order.

Die zweite Gruppe Core der Figma-Ressourcen von Fluent 2 umfasst die folgenden beiden Community-Dateien:

• Microsoft Fluent 2 Web: Diese Figma-Datei eignet sich als Grundlage für den Aufbau einer Komponenten-Bibliothek, um das Design eigener Web-Apps mit React vorzunehmen; die Registerkarte Assets erschließt eine Fülle lokaler Komponenten, die der Designer direkt in die Bibliothek aufnehmen kann. Microsoft hat die Web-UI-Komponenten von Fluent 1 im Oktober 2023 vollständig auf die Version 2 umgestellt. Leider fehlen derzeit im Unterschied zur iOS-Edi­tion im Web-UI-Kit konkrete Beispiele. Über GitHub macht Microsoft das Fluent UI Web-MonoRepo zugänglich [8]; dabei handelt es sich um die Weiterentwicklung von Office UI Fabric React (office-ui-fabric-react) von Microsoft. Dieses MonoRepo enthält UI-Komponenten für die Programmierung mit React (v8), React Components (v9) und Web Components. Dabei bildet Web Components die Grundlage für das Package @microsoft/fast-foundation von FAST [9], das die Design-Language von Fluent unterstützt.
• Microsoft Fluent 2 iOS: In dieser Figma-Bibliothek hat Microsoft native Apple-Komponenten für die iOS-Plattform zusammengefasst; die Design-Phase ist noch nicht ganz abgeschlossen – einige Komponenten werden von Fluent 1 noch nach Version 2 migriert. Beispiele für den Einsatz im Design enthält die Figma-Page mit der Bezeichnung Examples. Im GitHub-Repository Fluent UI Apple (von Microsoft) [10] befinden sich die nativen Ressourcen für UIKit (iOS, iPadOS und tvOS) und AppKit (macOS), die auf das Fluent-UI-Design-System abgestimmt sind.

Zur dritten Gruppe Shared der Figma-Ressourcen von Fluent 2 gehört:

• Microsoft 365 UI Kit: Diese von Microsoft als Preview bereitgestellte Figma-Ressource ist auf das Micro­soft-365-Ökosystem ausgerichtet. Die Figma-Datei enthält Hauptkomponenten, Templates mit verschiedenen Einsatzszenarien und bewährte Vorgehensweisen, um mit einer App den fachlichen Workflow der Endbenutzer bestmöglich zu unterstützen. Damit verdeutlicht diese Figma-Ressource, wie Designer und Entwickler mit den in Figma enthaltenen Features effizient und produktiv arbeiten.

Weitere Microsoft-Ressourcen von Fluent für Programmierung verfügbar

Über die Figma-Community stellt Microsoft weitere Figma-Ressourcen zur Verfügung, von denen einige noch auf der Version 1 von Fluent basieren. Momentan findet eine schrittweise Migration der betroffenen Figma-Ressourcen nach Fluent 2 statt. Die Templates dieser Bibliotheken zielen auf die Entwicklung indi­vidueller Applikationen für die Microsoft-Produkte Azure Communication Services, Microsoft Teams, Power Platform, SharePoint, VS Code und Windows ab. Dabei erfolgt die Programmierung in der Regel mit einer eigenständigen Programmierumgebung, abgestimmt auf das jeweils konkrete Microsoft-Produkt. Darüber hinaus stehen im Umfeld eines jeden Produkts weitere Werkzeuge für ganz spe­zielle Aufgaben bereit.Das UI/UX-Design von Apps für die oben genannten Microsoft-Produkte unterstützen in der Figma-Community die folgenden Dateien:

• ACS UI Library Design Kit: Umfasst Ressourcen für das Design von Videotelefonie oder Chats mit der Azure Communication Services UI Library, die Microsoft für Fluent 1 und Version 2 mit React und weiteren eigenen JavaScript-Libraries realisiert hat. Die Design-Bibliothek enthält Composites und Components, die alle auf der Design-Language von Fluent 2 basieren. Während man Components als Bausteine in der Web-App wiederverwendet, dienen Composites als schlüsselfertige End-to-End-Lösungen, die man in eigene Anwendungen integrieren kann.
• Microsoft Teams UI Kit: Basiert auf Fluent 2 und umfasst Komponenten, Templates für Anwendungsfälle sowie Anleitungen mit Best Practices. Die anschließende Programmierung erfolgt mit Fluent UI React Components v 9. Diese Figma-Ressource bildet auch die Grundlage der Microsoft Teams App Templates, die über die Figma-Community verfügbar gemacht werden. Dabei handelt es sich um eine Sammlung von Templates für in Microsoft Teams gängige Anwendungsfälle und Workflows.
• Microsoft Power Apps: Dieses Figma UI Kit befindet sich im Review-Status und ist für die Produktion daher noch ungeeignet. Es enthält Komponenten, das Design einer Beispielanwendung und eine Leistungsbeschreibung mit Gebrauchsanleitung. Ein mit dieser Bibliothek spezifiziertes UI-Design überführt das über die Cloud zugängliche Po­wer-Apps-System mit der Funktion Erstellen in eine Power-Apps-Komponente, welche der Programmierer zu einer individuellen Anwendung erweitert. Dieses innovative Feature (Bild 6) beseitigt die ansonsten häufig anzutreffende Lücke zwischen UI/UX-Design und Programmierung.

• SharePoint Web UI Kit: Zielt mit den enthaltenen Templates, Komponenten, Beispielen für Webseiten und einer Gebrauchsanweisung auf das Design von SharePoint-Sites und -Webseiten ab. Diese Figma-Ressource unterstützt aktuell nur die Entwurfsphase; Werkzeuge für Fluent-kompatible Programmierung werden bisher keine genannt. Die Realisierung eines vorhandenen UI-Designs erfolgt derzeit mit den im SharePoint-Umfeld empfohlenen Werkzeugen.
• Visual Studio Code Toolkit: Enthält das Design-System von Microsoft für VS Code auf der Basis von Figma. Ergänzend zum Design-System gibt es zwei Figma-Libraries: Visual Studio Code Icons mit den Glyphen für VS Code-Icons und Visual Studio Code Color Mapper für die Anlage von SVG-Assets. Die letzten drei Figma-Ressourcen helfen beim Design von Erweiterungen für VS Code, deren Realisierung man über den Marketplace von Visual Studio bereitstellen kann. Für die Programmierung eignet sich das GitHub-Repository ­vscode-figma-toolkit.
• �  Windows UI 3: Diese Figma-Library hilft beim Design von Windows-Anwendungen mit Fluent 2, die auf Windows UI Version 3 (Abkürzung: WinUI 3) basieren. Bei WinUI 3 handelt es sich um die Windows UI Library des Windows App SDK, das für die Programmierung von Desktop-Apps für Windows 11 und Windows 10 (bis Version 1809) zum Einsatz kommt. Eine Rückwärtskompatibilität bis zur Version 1809 von Windows 10 hat Microsoft über das Projekt Re­union sichergestellt. Als Sprachen stehen C# mit XAML (in Kombination mit .NET) oder C++ zur Verfügung.

�  

UX-zentrierte Design-Systeme rücken ins Zentrum der Softwareentwicklung

UX-zentrierte Design-Systeme rücken ins
Zentrum der SoftwareentwicklungDer Einsatz von Fluent oder FAST verdeutlicht, dass Design-Systeme auf der Basis von Komponenten zunehmend die Ausgangsbasis der Softwareentwicklung bilden werden. Diesen Trend haben Figma, Google, IBM und Microsoft erkannt und bieten für die Entwicklung von Anwendungen verschiedene Design-Systeme und geeignete Tools an. Erst ein Design-System gewährleistet eine UX-zentrierte Sicht auf die im Umfeld der zu entwickelnden Anwendung erforderlichen kritischen Anforderungen. Daher sollten insbesondere strategische Anwendungen von unternehmensweiter Bedeutung die mit einem Design-System verbundenen Vorteile für ihren eigenen langfristigen Erfolg nutzen.Der Einsatz von Fluent oder FAST verdeutlicht, dass Design-Systeme auf der Basis von Komponenten zunehmend die Ausgangsbasis der Softwareentwicklung bilden werden. Diesen Trend haben Figma, Google, IBM und Microsoft erkannt und bieten für die Entwicklung von Anwendungen verschiedene Design-Systeme und geeignete Tools an.Jede Entwicklungsorganisation, die zwar eine Benutzerpartizipation betreibt, aber bisher wenig oder keinen Schwerpunkt auf eigenes UI/UX-Design – möglichst mittels Interaction Design (IxD), hoher Wiederverwendung und eines eigenen Brandings – legt, sollte den Einsatz eines Design-Systems für sich evaluieren. Die seitens Figma und Microsoft verfügbaren Design-Systeme eignen sich mit ihren Werkzeugen als Ausgangspunkte für die Planung einer individuellen produktiveren Entwicklungsstrategie. Jede Entwicklungsorganisation, die zwar eine Benutzerpartizipation betreibt, aber bisher wenig oder keinen Schwerpunkt auf eigenes UI/UX-Design – möglichst mittels Interaction Design (IxD), hoher Wiederverwendung und eines eigenen Brandings – legt, sollte den Einsatz eines Design-Systems für sich evaluieren. Die seitens Figma und Microsoft verfügbaren Design-Systeme eignen sich mit ihren Werkzeugen als Ausgangspunkte für die Planung einer individuellen produktiveren Entwicklungsstrategie.Diese mehrteilige Artikelserie zeigt anhand verschiedener Technologien auf, wie Entwickler Komponenten der Design-Systeme Fluent oder FAST in eigene Apps einbinden und damit längerfristig höhere Marktanteile im Wettbewerb gewinnen können.Diese mehrteilige Artikelserie zeigt anhand verschiedener Technologien auf, wie Entwickler Komponenten der Design-Systeme Fluent oder FAST in eigene Apps einbinden und damit längerfristig höhere Marktanteile im Wettbewerb gewinnen können.

Fussnoten

1. [1] Figma, http://www.figma.com
2. [2] Microsofts Webseite in der Figma-Community, http://www.figma.com/@microsoft
3. [3] Fluent 1, https://fluent1.microsoft.design
4. [4] Fluent 2, https://fluent2.microsoft.design
5. [5] FAST, http://www.fast.design
6. [6] GitHub-Repository der Fluent UI System Icons, http://www.dotnetpro.de/SL2404FluentUI1
7. [7] GitHub-Repository Fluent Emoji, http://www.dotnetpro.de/SL2404FluentUI2
8. [8] GitHub-Repository von Fluent UI Web, http://www.dotnetpro.de/SL2404FluentUI3
9. [9] GitHub-MonoRepo von FAST, http://www.dotnetpro.de/SL2404FluentUI4
10. GitHub-Repository von Fluent UI Apple (Microsoft), http://www.dotnetpro.de/SL2404FluentUI5
11. Behance, http://www.behance.net
12. Dribbble, http://www.dribbble.com
13. Envato Elements, https://elements.envato.com