Designsysteme und Tools: Von Figma zu UNO Platform Studio

Designsysteme spielen eine zentrale Rolle, wenn moderne Anwendungen über mehrere Plattformen hinweg ein einheitliches Erlebnis bieten sollen. Im Zusammenspiel von Figma als Designwerkzeug und der UNO Platform als technischer Basis entsteht ein effizienter Workflow für konsistente UI-Entwicklung. 

Digitale Produkte wachsen heute rasant – neue Features, neue Plattformen und immer größere Teams prägen den Entwicklungsalltag. Damit steigt die Notwendigkeit, ein konsistentes und verlässliches Nutzererlebnis zu schaffen. Designsysteme bieten genau dafür die Grundlage. Sie vereinen visuelle Regeln, Interaktionsmuster und wiederverwendbare Komponenten zu einem gemeinsamen Rahmen, der Design und Entwicklung verbindet. Wie wichtig dieser Ansatz ist, zeigen die großen, etablierten Systeme der Branche: Material Design, Cupertino und Fluent (Bild 1).

• Material Design: Setzt auf klare Strukturen, einheitliche Raster, durchdachte Typografie und physikalisch inspirierte Interaktionsprinzipien. Wiederkehrende Muster erzeugen Verlässlichkeit – unabhängig davon, ob eine App auf Android, im Web oder auf anderen Plattformen läuft.
• Cupertino: Apples Designphilosophie steht für Präzision, Leichtigkeit und einen sehr klaren visuellen Stil. Knackige Typografie, sanfte Animationen und konsequente Abstände sorgen dafür, dass iOS-Apps oft wie aus einem Guss wirken. Das gelingt, weil Apple ein streng definiertes und durchgängig genutztes System bereitstellt.
• Fluent: Microsofts Designsystem ist besonders auf Skalierbarkeit ausgelegt. Es deckt Desktop, Mobile, Web und Office-Produkte ab und zeigt, wie ein System wachsen kann, ohne an Kohärenz zu verlieren. Durch flexible Komponenten und adaptive Patterns lässt es sich problemlos an unterschiedliche Formfaktoren anpassen.

Die drei Kernvorteile von Designsystemen sind:

• Konsistenz: UI-Elemente, Interaktionen und visuelle Entscheidungen bleiben über alle Anwendungen hinweg harmonisch.
• Wiederverwendbarkeit: Komponenten müssen nicht immer wieder neu gebaut werden. Man pflegt sie zentral und nutzt sie überall.
• Skalierbarkeit: Teams können parallel arbeiten, neue Mitglieder schneller onboarden und Produkte effizient weiterentwickeln.

Ein Designsystem reduziert Komplexität, minimiert Fehlerquellen und stärkt die Produktqualität. Je konsequenter es genutzt wird, desto mehr können Teams sich auf das Wesentliche konzentrieren: Innovation, statt ständig Grundbausteine neu zu erfinden. 

Design in Uno Platform: Resource Dictionaries, Styles, Themes, Farb- und Typografie-Systeme

Bei der Entwicklung mit der Uno Platform spielt das Zusammenspiel von XAML-/C#-UI, Resource Dictionaries, Styles und Themes eine zentrale Rolle für konsistente und plattformübergreifende Gestaltung. Ein gezielt aufgebautes Designsystem beginnt damit, Ressourcen (Farben, Schriften, Abstände) zentral zu definieren und dann über Styles beziehungsweise Themes auf Controls anzuwenden. Hier setzt Uno Platform mit seiner Architektur an.

Resource Dictionaries sind das Kerninstrument: In der App-Ressource (zum Beispiel App.xaml) oder auf Seiten- beziehungsweise tieferer Ebene lassen sich einzelne ResourceDictionary-Instanzen einbinden oder über MergedDictionaries zusammenführen. Über diesen Mechanismus können zum Beispiel Dateien wie Colors.xaml mit Farbdefinitionen, Typography.xaml mit Schriften und Styles.xaml mit Styles eingebunden werden. Uno unterstützt explizit das Hinzufügen von Theme-Dictionaries (zum Beispiel Light/Dark) über die Property ResourceDictionary.ThemeDictionaries.

Styles und Themes bauen darauf auf: Ein Style definiert zum Beispiel ein Aussehen für Elemente wie einen Button, eine TextBox et cetera, inklusive Settern für Eigenschaften wie FontSize, Foreground, Background und dergleichen. In Uno kann man dies über ein Style<T> oder per XAML definieren. Themes hingegen definieren eine Sammlung von Ressourcen (Farben, Brushes, Schriftfamilien) für verschiedene Modi (zum Beispiel Hell versus Dunkel) und gegebenenfalls Plattform­unterschiede. Die Bibliothek Uno.Themes bietet hierfür vorgefertigte Designsysteme (Material, Cupertino, Fluent), inklusive Farb- und Typografie-Systemen.

Im Bereich Farb-Systeme unterstützt Uno etwa mit Uno Material das Definieren eigener Farbpaletten für Light- und Dark-Themes. Ein Beispiel: In einer Farb-Override-Datei (ColorPaletteOverride.xaml) kann man gezielt Farben mit Schlüsselwerten für Light versus Dark definieren, zum Beispiel <Color x:Key="PrimaryColor">#6750A4</Color> (Light) beziehungsweise <Color x:Key="PrimaryColor">#D0BCFF</Color> (Dark) im selben ResourceDictionary unter ThemeDictionaries. Die Farbressourcen sind dann als ThemeResources verfügbar und können in Styles oder XAML direkt referenziert werden. Im Bereich Typografie-Systeme (Schriften, Schriftgrößen, Gewichtungen) können über Ressourcen zum Beispiel FontFamily-Schlüssel, FontSize-Schlüssel et cetera zentral gesetzt und in Styles wiederverwendet werden. Uno Material beispielsweise bringt standardmäßig die Schriftfamilien MaterialLightFontFamily, MaterialRegularFontFamily und MaterialMediumFontFamily mit, die bei Bedarf überschrieben werden können.

Ein typischer Aufbau einer App mit Designsystem in Uno könnte so aussehen: In App.xaml wird eine ResourceDictionary.MergedDictionaries-Liste definiert, darin zuerst die Bibliotheks-Ressourcen (zum Beispiel <MaterialTheme/> oder <CupertinoTheme/>) und danach eigene Override-Ressourcen (zum Beispiel Farben, Schrift, Styles). Farb- und Typografie-Ressourcen werden in separaten Dateien angelegt mit Theme Dictionaries für Light-/Dark-Varianten. Styles für Controls basieren auf impliziten beziehungsweise expliziten Styles, die auf die Ressourcen verweisen und gegebenenfalls über Style-Vererbung (BasedOn) angelegt werden. Die Anwendung gestaltet sich dann wie folgt: In XAML oder C# werden dann StaticResource- beziehungsweise ThemeResource-Verweise gesetzt, zum Beispiel Background="{ThemeResource PrimaryBrush}" oder Style="{StaticResource MyButtonStyle}".

Vorteile dieses Ansatzes: Änderungen der Farb-­ oder Schrift­definitionen wirken sich automatisch über alle Elemente aus, die diese Ressourcen nutzen. Das macht die Pflege einfacher und sorgt für visuelle Konsistenz. Zudem bietet die Unterstützung von Themes (Light/Dark) eine bessere Anpassbarkeit für Plattformen mit unterschiedlichen Benutzerpräferenzen.

UNO Platform Studio: Aufbau und Pflege eines Designsystems direkt in UNO

UNO Platform Studio erweitert den klassischen Entwicklungsprozess um eine visuelle und Workflow-orientierte Umgebung, in der Designsysteme nicht nur verwendet, sondern aktiv aufgebaut und gepflegt werden können. Damit schließt das Tool eine wichtige Lücke zwischen Figma-Design und produktionsreifer UI-Implementierung. Zentraler Bestandteil von Uno Platform Studio ist die Möglichkeit, Design Tokens wie Farben, Typografie, Abstände oder Abrundungen sauber und strukturiert zu verwalten. Diese Tokens lassen sich im Studio anlegen, gruppieren und sofort auf Controls anwenden. Anders als bei einer rein XAML-basierten Organisation sieht man die Auswirkungen unmittelbar in der Vorschau. Änderungen an Farben oder Typografie spiegeln sich sofort in allen verknüpften Komponenten wider.

Uno Platform Studio ermöglicht das Erstellen wiederverwendbarer UI-Bausteine, die später als Custom Controls oder User Controls in der App genutzt werden. Buttons, Cards, Listen oder komplexe Eingabeelemente können direkt im Editor gestaltet und parametrierbar gemacht werden. Dadurch entsteht – XAML-basiert – ein produktionsnahes Komponenten-Inventar. Entwickler können Material-, Fluent- oder Cupertino-Styles aktivieren und anschließend im Studio eigene Overrides definieren. Farbpaletten, Light/Dark-Varianten und Typografie-Sets lassen sich visuell prüfen und als XAML-Ressourcen exportieren. Dadurch wird das Studio zu einem Werkzeug, das Designsysteme nicht nur visualisiert, sondern strukturiert weiterentwickelt. Alle im Studio erzeugten Tokens und Komponenten werden als XAML-Dateien oder Klassen gespeichert, sodass keine Insellösung entsteht. 

Figma-Integration: Import von Komponenten und Zusammenarbeit zwischen Designer und Entwickler

Die Verbindung zwischen Design und Entwicklung ist oft einer der kritischsten Punkte im UI-Prozess. Figma ist heute das Standardwerkzeug für Interface-Design, und die UNO Platform bietet mit der Figma-Integration einen strukturierten Workflow, um Designs effizient in produktionsfähigen Code zu überführen. Dadurch entfällt ein Großteil der manuellen Übersetzungsarbeit zwischen Pixel-Layout und XAML-Implementierung. 

Der Prozess beginnt in Figma: Designer erstellen Frames, Komponenten, Variants und Auto-Layout-Strukturen, die bereits den Charakter eines Designsystems tragen. Farben, Typografie und Spacing werden über Figma-Styles definiert, während Komponenten als wiederverwendbare UI-Bausteine dienen. Die UNO Platform nutzt diese Struktur, um daraus verwertbare Informationen für die XAML-Welt abzuleiten. 

Über das UNO-Figma-Plug-in können Entwickler oder Designer das Figma-Design direkt analysieren. Das Plug-in erkennt Komponenten, Tokens, Layer-Struktur, Constraints und sogar Interaktionshinweise. Anschließend generiert es XAML-Layouts und C#-Code, die im Projekt weiterverwendet und verfeinert werden können. Das Plug-in respektiert Auto-Layout-Regeln und übersetzt diese in Grid-, StackPanel- oder Border-Strukturen, sodass das resultierende Layout sehr nah am Figma-Design bleibt. 

Ein wesentlicher Vorteil besteht darin, dass das Figma-Designsystem – also definierte Farben, Textstile und Komponentenvarianten – als Design Tokens in Uno übernommen werden kann. Die generierten Ressourcen landen in Resource Dictionaries und können anschließend Teil des Projektdesignsystems werden. Dadurch wird verhindert, dass Designer und Entwickler parallel unterschiedliche Definitionen pflegen. Die Zusammenarbeit zwischen beiden Rollen verbessert sich erheblich (vergleiche auch Bild 2):

• Designer arbeiten in Figma mit realen Komponenten, die später in der App existieren.
• Entwickler erhalten reproduzierbare, strukturiert exportierte UI-Bausteine statt Screenshots oder manuelle Anweisungen.
• Änderungen im Design lassen sich schneller erkennen und erneut exportieren, ohne das Layout komplett neu aufzubauen.

In größeren Teams entsteht so ein agiler, zirkulärer Workflow: Das Designsystem wird in Figma gepflegt, über das Uno-Plug-in synchronisiert und in der Entwicklung weiterverwendet. Neue UI-Elemente können sowohl im Code als auch in Figma iteriert werden, ohne dass die Systemkonsistenz verloren geht.

Insgesamt sorgt der Ansatz dafür, dass weniger Redundanzen entstehen und der Übergang vom visuellen Design zur realen Anwendung präzise und nachvollziehbar bleibt.

Beispiel: Von der Figma-Komponente zum Uno-Control

Um den kompletten Workflow greifbar zu machen, betrachten wir ein Beispiel: die Umsetzung einer Figma-Card-Komponente in ein wiederverwendbares Control für eine Uno Platform. In Figma erstellt der Designer zunächst eine Card-Komponente, bestehend aus Container, Schatten, Abständen und Typografie-Styles. Alle visuellen Eigenschaften werden über Design Tokens wie PrimaryColor, SurfaceColor, BodyText oder CornerRadius definiert. Durch das Auto-Layout bleibt die Komponente flexibel und skalierbar. Über das Uno-Figma-Plug-in wird die Komponente exportiert. Das Plug-in analysiert die Struktur und wandelt Container, Text und Icons in entsprechende XAML-Elemente um: ein Grid für das Layout, Border für die Hintergrundform, TextBlock für Titel und Beschreibung. Dabei werden Farben, Schriftgrößen und Abstände automatisch in ein ResourceDictionary überführt. Das Exportergebnis dient als Grundlage für ein wiederverwendbares Control. Die generierte XAML wird in ein UserControl oder in ein CustomControl überführt. Letzteres erlaubt das Definieren von Dependency Properties wie Title, Subtitle et cetera. Dadurch kann das Control später frei konfiguriert und mehrfach eingesetzt werden.

In der zugehörigen Generic.xaml werden Designsystem-Styles eingebunden, zum Beispiel MaterialCardStyle, und mit den Figma-Tokens verknüpft. Dadurch wird sichergestellt, dass die Komponente optisch konsistent bleibt, auch wenn Farben oder Typografie später global geändert werden. 

Im nächsten Schritt wird die Komponente in einer Page getestet. Dank der Auto-Layout-Informationen passt sich die Card automatisch an unterschiedliche Bildschirmgrößen an, sei es im Web (WebAssembly), unter Windows, Android oder iOS.

Fazit und Ausblick

Designsysteme bilden das Fundament für konsistente, wartbare und plattformübergreifende Benutzeroberflächen. Durch eine zentrale Ressourcenverwaltung und einen gut abgestimmten Austausch zwischen Design und Entwicklung lassen sich UI-Komponenten schnell erstellen, pflegen und in verschiedenen Projekten wiederverwenden. Die Figma-Integration unterstützt dabei einen modernen, iterativen Workflow und reduziert Reibungsverluste im gesamten Produktteam. 

[1] Veikko Krypczyk, UI-Gestaltung mit Uno, dotnetpro 12/2025, Seite 114 ff.