Figma als Perspektivwechsel für Entwickler

Viele Entwickler begegnen User Experience zunächst im fertigen Entwurf: Screens werden in einem Design-Tool bereitgestellt und sollen anschließend möglichst genau in Code umgesetzt werden. Dabei bleiben UX-Entscheidungen für Entwickler oft eine „Black Box“.

Designwerkzeuge wie Figma helfen dabei, diese Perspektive zu erweitern. Sie ermöglichen Einblicke in die Denkweise von UX-Designern. So wird deutlich, dass gute Benutzeroberflächen aus strukturierten Überlegungen zu Nutzerzielen, Informationsarchitektur und Interaktionsabläufen entstehen – ein Verständnis, das die Umsetzung erleichtert und technische Lösungen verbessert. Dieser Teil der Artikelserie „UX goes Dev“ ergänzt den gleichnamigen Leitartikel und richtet sich bewusst an Entwickler, die UX nicht nur implementieren, sondern nachvollziehen möchten. 

Siehe dazu auch den Leitartikel UX goes Dev aus den dotnetpro 3/26.

UX-Grundlagen aus Entwicklersicht

User Experience wird von Entwicklern häufig als nachgelagerter Aspekt wahrgenommen: Zunächst entsteht die Funktionalität, anschließend wird eine Oberfläche darübergelegt. In der Praxis entsteht UX jedoch bereits während der technischen Konzeption. Architekturentscheidungen, Datenstrukturen und Zustandsmodelle beeinflussen unmittelbar, wie verständlich und zuverlässig sich eine Anwendung anfühlt. Gute UX beginnt daher nicht erst im Design-Tool, sondern bereits bei der Planung der Software.

Ein zentrales Prinzip ist die Vorhersehbarkeit. Nutzer erwarten konsistente Reaktionen auf ihre Eingaben. Entwickler tragen hierzu bei, indem sie einheitliche Interaktionsmuster implementieren und ähnliche Funktionen sich gleichartig verhalten lassen. Inkonsistenzen entstehen oft nicht durch Designfehler, sondern durch unterschiedliche technische Lösungen für ähnliche Probleme.

Ein weiterer grundlegender Faktor ist die Performance. Anwendungen, die verzögert reagieren oder lange Ladezeiten verursachen, werden als unzuverlässig wahrgenommen. Technische Maßnahmen wie asynchrone Verarbeitung, effiziente Datenabfragen und sinnvolle Zwischenspeicherung sind daher direkte Beiträge zur UX. Aus Nutzersicht ist eine schnelle Anwendung meist wichtiger als eine visuell perfekte Oberfläche.

Auch Fehlersituationen sind ein wesentlicher Bestandteil der UX. Entwickler entscheiden, wie Eingaben validiert werden, wann Fehlermeldungen erscheinen und welche Informationen bereitgestellt werden. Gute UX bedeutet hier, Fehler möglichst früh zu verhindern und verständliche Rückmeldungen zu geben. Technisch korrekte, aber unverständliche Fehlermeldungen helfen dem Nutzer kaum weiter. UX aus Entwicklersicht bedeutet somit, technische Qualität konsequent an den Bedürfnissen der Nutzer auszurichten. Saubere Architektur, klare Zustandsmodelle und robuste Implementierungen bilden die Grundlage für verständliche und vertrauenswürdige Anwendungen.

Wie Struktur und Hierarchie die Nutzerführung bestimmen

Benutzeroberflächen bestehen nicht nur aus einzelnen Elementen, sondern aus einer strukturierten Abfolge von Informationen und Interaktionen. Nutzerführung beschreibt dabei, wie Anwender durch eine Anwendung geleitet werden. Aus Entwicklersicht zeigt sich gute Nutzerführung vor allem in klaren Abläufen und logisch aufgebauten Screens. Wenn Nutzer lange suchen müssen oder häufig zwischen Seiten wechseln, liegt die Ursache oft in einer unklaren Struktur.

Die Informationsarchitektur bildet das Fundament der Benutzeroberfläche. Sie bestimmt, welche Informationen zusammengehören, wie Inhalte gruppiert werden und in welcher Reihenfolge sie erscheinen. Für Entwickler bedeutet das, Datenmodelle und UI-Strukturen aufeinander abzustimmen. Wenn die technische Struktur stark von der inhaltlichen Struktur abweicht, entstehen häufig komplexe und schwer verständliche Oberflächen.

Eng damit verbunden ist die visuelle Hierarchie. Sie sorgt dafür, dass wichtige Inhalte schneller wahrgenommen werden als weniger wichtige. Größenunterschiede, Abstände oder Hervorhebungen lenken die Aufmerksamkeit der Nutzer. Für Entwickler zeigt sich visuelle Hierarchie beispielsweise in Layout-Strukturen, Container-Aufteilungen oder Komponentenprioritäten. Ein gleichmäßig aufgebauter Screen ohne erkennbare Schwerpunkte wirkt schnell unübersichtlich.

Design-Tools wie Figma machen diese Zusammenhänge sichtbar, insbesondere durch klar strukturierte Ebenen und Komponenten. In der Ebenenansicht lässt sich nachvollziehen, wie einzelne Elemente zu Gruppen oder Containern zusammengefasst sind. Auto-Layout-Strukturen machen sichtbar, welche Elemente logisch zusammengehören und wie sich Abstände und Ausrichtungen systematisch wiederholen. Auch Komponenten und Varianten verdeutlichen, welche Elemente eine gemeinsame Funktion haben und wo Zustände (aktiv, deaktiviert) vorgesehen sind. Zusätzlich zeigen Raster, Spacing-Werte und definierte Textstile die zugrunde liegende visuelle Hierarchie.

Entwickler können so erkennen, welche Elemente bewusst betont wurden und welche eher unterstützende Informationen darstellen. Daraus können sie ableiten, wie Inhalte gruppiert werden und welche Reihenfolge der Aktivierung vorgesehen ist. Dadurch wird deutlich, dass Layoutentscheidungen nicht zufällig getroffen werden, sondern eine gezielte Nutzerführung unterstützen. Wer Nutzerführung und Struktur versteht, kann Benutzeroberflächen nicht nur korrekt umsetzen, sondern aktiv zur Verbesserung beitragen. Technische Umsetzung und konzeptionelle Struktur greifen dabei ineinander.

Übersetzung von UX-Entscheidungen in UI-Strukturen

Zwischen einem Designentwurf und der fertigen Anwendung liegt der Schritt der technischen Umsetzung. Für Entwickler besteht die Herausforderung darin, konzeptionelle UX-Entscheidungen in stabile und wartbare UI-Strukturen zu überführen. Dabei geht es nicht nur darum, einzelne Elemente korrekt darzustellen, sondern die zugrunde liegende Struktur des Designs zu verstehen.

Ein Screen in Figma ist selten als starres Layout gedacht. Häufig repräsentiert er ein flexibles System aus Komponenten, Abständen und Zuständen. Entwickler müssen daher erkennen, welche Elemente zusammengehören und welche Wiederholungen sich in Komponenten abstrahieren lassen. Eine direkte Umsetzung einzelner Screens führt oft zu redundanten Lösungen und erschwert spätere Erweiterungen.

Besonders wichtig ist die Abbildung von Zuständen. Designs enthalten meist verschiedene Varianten eines Screens, etwa für leere Listen, Fehlersituationen oder Ladezustände. Diese Varianten spiegeln unterschiedliche Nutzungssituationen wider. Entwickler müssen diese Zustände in klar definierte Zustandsmodelle überführen, damit das Verhalten der Anwendung nachvollziehbar bleibt.

Auch Layoutsysteme spielen eine zentrale Rolle. Abstände, Ausrichtungen und Größenverhältnisse folgen im Design meist einem konsistenten Raster. Wenn Entwickler diese Struktur erkennen und technisch abbilden, entstehen flexible Oberflächen, die sich leichter anpassen lassen. Moderne Layoutmechanismen unterstützen diese Umsetzung, wenn sie konsequent eingesetzt werden. Die Übersetzung von UX-Entscheidungen in UI-Strukturen bedeutet daher mehr als visuelle Genauigkeit. Ziel ist eine technische Struktur, die die Logik des Designs widerspiegelt und langfristig wartbar bleibt.

Zusammenarbeit mit Designern auf Augenhöhe

Eine erfolgreiche Produktentwicklung erfordert eine enge Zusammenarbeit zwischen Design und Entwicklung. In vielen Projekten beschränkt sich diese Zusammenarbeit jedoch auf die Übergabe fertiger Designs. Entwickler setzen um, Designer entwerfen – ein Austausch über Hintergründe und Entscheidungen findet nur selten statt (Bild 1).

Dadurch bleiben viele UX-Überlegungen unverständlich, und technische Einschränkungen werden erst spät sichtbar. Eine Zusammenarbeit auf Augenhöhe bedeutet, dass beide Seiten ihre Perspektiven einbringen. Entwickler verstehen die technischen Möglichkeiten und Grenzen einer Plattform, während Designer die Nutzerperspektive vertreten. Wenn beide frühzeitig zusammenarbeiten, entstehen Lösungen, die sowohl technisch sinnvoll als auch benutzerfreundlich sind.

Design-Tools wie Figma erleichtern diese Zusammenarbeit erheblich. Entwickler können direkt im Entwurf Maße, Abstände und Komponentenstrukturen nachvollziehen. Gleichzeitig ermöglichen Kommentare und Diskussionen eine schnelle Klärung von Fragen. Dadurch wird das Design nicht nur als Vorlage betrachtet, sondern als gemeinsames Arbeitsdokument.

Ein wichtiger Aspekt der Zusammenarbeit ist die gemeinsame Sprache. Begriffe wie Komponenten, Zustände oder Varianten sollten von beiden Seiten gleich verstanden werden. Gemeinsame Designsysteme und Komponentenbibliotheken unterstützen dieses Verständnis und reduzieren Missverständnisse.

Langfristig führt eine enge Zusammenarbeit zu besseren Produkten und effizienteren Entwicklungsprozessen. Entwickler werden stärker in konzeptionelle Entscheidungen eingebunden, während Designer ein besseres Verständnis für technische Zusammenhänge entwickeln. UX wird dadurch zu einer gemeinsamen Verantwortung statt zu einer isolierten Disziplin (Bild 2).

Fazit

UX zu verstehen bedeutet für Entwickler, über die reine Umsetzung von Oberflächen hinauszugehen. Wer Designentwürfe nur als Vorlage betrachtet, übersieht die konzeptionellen Entscheidungen, die hinter Struktur, Anordnung und Interaktion stehen. Erst durch das Verständnis von UX-Grundlagen, Nutzerführung und Informationsarchitektur wird deutlich, dass Benutzeroberflächen das Ergebnis systematischer Überlegungen sind und nicht nur aus visuellen Details bestehen.

Designwerkzeuge können dabei als Brücke zwischen Design und Entwicklung dienen. Sie ermöglichen es Entwicklern, Layoutstrukturen, Komponenten und Zustände besser nachzuvollziehen und UX-Entscheidungen bewusst in technische Lösungen zu übersetzen (Bild 3).

Dadurch entstehen Anwendungen, die nicht nur korrekt umgesetzt, sondern auch langfristig wartbar und konsistent sind. Besonders wichtig ist dabei die Zusammenarbeit von Entwicklern und Designern. Wenn beide Disziplinen ihre Perspektiven einbringen und eine gemeinsame Sprache entwickeln, verbessert sich nicht nur die Kommunikation, sondern auch die Qualität der Ergebnisse.