Vom Figma-Entwurf zur Projektstruktur

Die Idee für eine App ist schnell formuliert – der Weg zu einem funktionierenden Prototyp dauert dagegen häufig deutlich länger. Gerade in frühen Projektphasen möchten Teams jedoch möglichst schnell sehen, wie sich eine Anwendung anfühlt: Welche Screens werden benötigt? Wie navigiert man durch die App? Welche Eingaben sind erforderlich?

Mit der KI-Funktion Figma Make lässt sich dieser Schritt deutlich beschleunigen. Aus einer textlichen Beschreibung erzeugt das Tool innerhalb weniger Sekunden einen ersten interaktiven Prototyp. Der Entwurf kann anschließend direkt im Dialog mit der KI weiterentwickelt werden.

Im hier vorgestellten Praxisprojekt entsteht Schritt für Schritt ein digitales Fotobuch. Zu jedem Foto sollen eine Ortsangabe (Location) und eine persönliche Notiz gespeichert werden können. Ziel ist kein fertiges Produkt, sondern ein klickbarer Prototyp, der Konzept, Struktur und Interaktion der Anwendung demonstriert.

Schritt 1: Die Idee als Prompt formulieren

Der erste Schritt besteht darin, die App möglichst klar zu beschreiben. In Figma Make geschieht dies über einen Prompt. Je präziser die Beschreibung, desto besser kann die KI den gewünschten Entwurf erzeugen. Ein Beispielprompt könnte so aussehen:

„Erstelle eine mobile App für ein digitales Fotobuch. Die Startseite zeigt eine Galerie mit Fotos. Durch Anklicken eines Fotos öffnet sich eine Detailansicht. Dort sollen das Bild groß angezeigt sowie ein Ort und eine persönliche Notiz gespeichert werden können. Die Oberfläche soll minimalistisch sein und den Fokus auf die Bilder legen.“

Dieser Prompt beschreibt bereits Struktur, Funktionen und Gestaltungsidee der Anwendung.

Schritt 2: Den ersten Prototyp erzeugen

Nach dem Absenden des Prompts generiert Figma Make einen ersten Entwurf. Dabei entstehen mehrere UI-Elemente:

• eine Galerie mit Fotokarten,
• ein Detailbereich für das ausgewählte Bild,
• Eingabefelder für Metadaten,
• einfache Navigationsmöglichkeiten.

Im konkreten Beispiel wird sofort eine übersichtliche Galerieansicht erzeugt. Unter der Überschrift „Mein Fotobuch“ werden mehrere Bilder in einem Grid-Layout mit großen, abgerundeten Karten dargestellt (Bild 1).

Die Fotos stehen klar im Mittelpunkt und nehmen einen Großteil des Bildschirms ein – genau wie im Prompt gefordert. Auf der linken Seite zeigt Figma Make zusätzlich den generierten Kontext und die Funktionsbeschreibung der App. Hier wird bereits deutlich, dass die KI nicht nur das Layout erzeugt, sondern auch die zugrunde liegende Struktur versteht: Galerie, Detailansicht und lokale Speicherung der Notizen sind bereits vorgesehen. Obwohl die Detailansicht im Screenshot noch nicht aktiv geöffnet ist, deutet die Beschreibung darauf hin, dass beim Klick auf ein Bild eine separate Ansicht mit großem Foto sowie Eingabemöglichkeiten für Ort und Notiz entsteht. Damit ist die grundlegende Interaktionslogik bereits angelegt. Der generierte Entwurf ist zwar noch generisch, trifft aber bereits sehr gut die gewünschte Richtung. Genau darin liegt der größte Vorteil des Tools: Innerhalb weniger Augenblicke entsteht eine visuelle und funktionale Grundlage, auf deren Basis sich gezielt weiterarbeiten lässt.

Schritt 3: Iterationen über den Chat

Der erste Entwurf ist selten perfekt. Statt jedoch von vorne zu beginnen, kann der Prototyp schrittweise weiterentwickelt werden. Über den integrierten Chat lassen sich gezielt Änderungen anstoßen: zum Beispiel Testbilder oder zusätzliche Buttons zum Bearbeiten und Speichern hinzufügen, etwa für die Anzeige des Ortes (Location) unterhalb des Fotos beziehungsweise für eine strukturierte Darstellung der Notizen. Durch mehrere kleine Iterationen nähert sich der Entwurf immer stärker der gewünschten Anwendung an.

Ein Vorteil von Figma Make besteht darin, dass sich zusätzliche Inhalte als Kontext hinzufügen lassen. Dazu können beispielsweise Bilder oder Designelemente angehängt werden. Im Fotobuch-Beispiel könnten einige Beispielbilder eingebunden werden, damit die KI erkennt, wie die Galerie aussehen soll. Ebenso lassen sich Referenzen für das Layout angeben, etwa ein Beispiel für eine elegante Kartenansicht oder eine minimalistische Bilddarstellung (Bild 2).

Schritt 4: Interaktionen ausbauen

Ein guter Prototyp zeigt nicht nur statische Screens, sondern auch Interaktionen. Deshalb wird im nächsten Schritt das Verhalten der Anwendung ergänzt. Im Fotobuch entstehen beispielsweise Abläufe wie das Öffnen der Detailansicht durch einen Klick auf ein Foto, das Bearbeiten von Ort und Notiz sowie das Speichern der Änderungen über einen Button und schließlich die Rücknavigation zur Galerie über einen entsprechenden Link. Darüber hinaus können weitere Interaktionen ergänzt werden, etwa visuelles Feedback bei Aktionen zum Beispiel in Form von Ladeindikatoren oder Bestätigungsmeldungen, sanfte Übergänge zwischen Ansichten oder das Hervorheben aktiver Elemente. Auch Fehlermeldungen oder Validierungen bei Eingaben tragen dazu bei, den Prototyp realitätsnäher zu gestalten. Solche Interaktionen machen den Prototyp deutlich lebendiger und helfen dabei, die Benutzerführung frühzeitig zu testen und gezielt zu optimieren.

Schritt 5: Änderungen direkt im Entwurf vornehmen

Nicht jede Anpassung muss über den Chat erfolgen. Figma Make erlaubt es auch, direkt im generierten Entwurf oder im Code Änderungen vorzunehmen. So lassen sich beispielsweise Beschriftungen anpassen, Layouts verschieben und zusätzliche UI-Elemente einfügen. Diese Kombination aus KI-Generierung und manueller Bearbeitung ermöglicht eine sehr schnelle Iteration. Auch wenn der Prototyp noch keine echte Datenbank benötigt, kann man bereits einfache Logik simulieren. Beispielsweise lassen sich Notizen speichern oder Zustände wie „noch kein Eintrag vorhanden“ darstellen. Damit entsteht ein realistischer Eindruck davon, wie die Anwendung später funktionieren könnte.

Schritt 6: Prototyp testen und teilen

Zum Abschluss wird der Prototyp getestet. Navigation, Eingaben und Interaktionen lassen sich direkt in der Vorschau ausprobieren. Der Entwurf kann anschließend mit anderen geteilt werden, etwa mit Teammitgliedern, Stakeholdern oder potenziellen Nutzern. Dadurch erhält man frühzeitig Feedback zur Idee.

Von Bild zum Code

Im Hintergrund erzeugt Figma Make nicht nur visuelle Entwürfe, sondern tatsächlich ausführbaren Code für die UI-Komponenten. Dazu gehören Layout, Typografie, Icons und Farbschemata, die konsistent über Utility-Klassen und wiederverwendbare Komponenten organisiert sind. Inhalte wie Texte, Kategorien oder Routing-Informationen werden aus separaten Datenquellen eingebunden, sodass eine klare Trennung zwischen Darstellung und Inhalt entsteht.

Damit entwickelt sich Figma Make von einem reinen Design-Tool zu einem Code-generierenden Prototyping-Werkzeug. Diese Eigenschaft ist entscheidend, da die erstellten Prototypen nicht nur statische Mockups bleiben, sondern bereits lauffähig sind und realistische Interaktionen ermöglichen. Gleichzeitig eröffnet dieser Ansatz neue Perspektiven für die Weiterentwicklung über die Designphase hinaus. Sobald ein Prototyp generiert wurde, können Entwickler direkt eingreifen. Im Vorschau-Panel steht ein Code-Inspector beziehungsweise Editor zur Verfügung, in dem sich der generierte Code live betrachten und anpassen lässt. In der Standardkonfiguration basiert dieser Code auf einer webbasierten Architektur mit TypeScript als Programmiersprache und der Bibliothek React.

Für viele Projekte ist dies jedoch nur ein Zwischenschritt. Ziel kann es beispielsweise sein, die Entwürfe in eine .NET-basierte Umgebung zu überführen, etwa in Form von XAML- und C#-Code für die Uno Platform. Hierfür lässt sich ein entsprechendes Uno-Plug-in in Figma installieren. In der kostenfreien Variante sind bereits erste Exporte möglich, was für Tests und Prototyping ausreichend ist (Bild 3).

Der Ablauf ist dabei einfach: Ein bestehender Designentwurf wird in ein Figma-Projekt mit aktiviertem Uno-Export übernommen. Anschließend kann der Root-Frame einer Seite ausgewählt und direkt in XAML-Code exportiert werden. Auf diese Weise entsteht eine Brücke zwischen KI-gestütztem Design, visuellem Prototyping und konkreter technischer Umsetzung in einer .NET-Umgebung.