8 Tipps für deinen Start mit Figma Make

Auf der Config 2025 haben wir unsere neue Funktion Figma Make vorgestellt, mit der du mit wenigen Prompts vom Konzept zum Prototyp gelangst. Wir haben Figma Make monatelang intern intensiv getestet. Basierend darauf findest du hier acht praktische Tipps und Best Practices plus Beispiel-Prompts.

1. Gib deinen ersten Prompt mit Details ein

Je mehr Details du im ersten Prompt zu deinem Design angibst, desto weniger Änderungen sind anschließend nötig, um das gewünschte Ergebnis zu erhalten. „Es ist besser, schon im ersten Anlauf so nah wie möglich an deine Vision heranzukommen, damit dann nur noch kleine Anpassungen nötig sind. Die Korrektur des Outputs mit mehreren Folgeprompts nimmt viel mehr Zeit in Anspruch“, sagt Designerin Advocate Ana Boyer.

Diese sind einige wichtige Details, die du in deinem ersten Prompt angeben solltest:

• Aufgabe: Was Figma Make tun soll
• Kontext: Wo dieser Flow oder Bildschirm verwendet werden soll
• Wichtige Designelemente: Wichtige Elemente, die Figma Make integrieren soll
• Erwartetes Verhalten: Was mit diesen Elementen bei einer Interaktion passieren soll
• Einschränkungen: Details zum Gerät, Layout oder visuellen Styling

Für diese Strategie ist es wichtig, dass du schon vor der Prompt-Eingabe bei Figma Make eine klare Vision hast, wie dein Produkt-Flow aussehen soll und welche Spezifikationen verwendet werden sollen, und dass du diesen Kontext mit den richtigen Prompts bereitstellst. Du kannst auch KI-Assistenten nutzen, um deine Prompts zu optimieren. Sie bieten detaillierte Hinweise und einsatzbereite Code-Schnipsel, die du direkt in dein Figma Make einfügen kannst, um fortgeschrittene Effekte zu erzielen.

Extra-Tipp: Wenn dein erster Prompt nicht das gewünschte Ergebnis liefert, versuche, ihn anders zu formulieren. Anstatt beispielsweise Richte zwei Elemente vertikal aus zu verwenden, versuche die Anfrage so umzuformulieren: Verschiebe dieses Element um 20 Pixel nach unten oder Füge zwischen diesen Schaltflächen 16 Pixel Leerraum ein.

Ein praktisches Beispiel

Greg Huntoon, Designer Advocate Manager bei Figma, versuchte es mit verschiedenen Ansätzen, bis er auf einen Prompt stieß, der eine funktionierende erste Version für sein Visualisierungskit für Mauseffekte ergab. Sein erfolgreichster Prompt enthielt Folgendes:

• Projektübersicht
• Plattformspezifikation
• Zweck und Anwendungsfall
• Liste der Kernfunktionen
• Designstil-Richtlinien
• Technische Spezifikationen

Greg fügte auch diesen expliziten ersten Schritt in seinen Prompt ein: Erster Schritt: Erstelle die Basis-Raster-Überlagerungskomponente mit einstellbaren Dimensionen und Platzhalter-Hover-Zuständen.

2. Bereinige deine Design-Dateien, bevor du sie in Figma Make importierst

Während Figma Make Designs von Grund auf neu erstellen kann (0→1), zeichnet es sich auch dadurch aus, dass es deine bestehenden Figma-Designs in interaktive Prototypen verwandeln kann (1→1). Um Figma Make dabei zu helfen, das bestmögliche Ergebnis zu erzielen, solltest du Zeit mit der Organisation und Hygiene der Dateien verbringen und sicherstellen, dass du alle Frames aufräumst, die du kopieren und in das Prompt-Feld einfügen möchtest. Je sauberer dein Design-Input, desto besser dein Output. Die Verwendung der richtigen Frame-Einschränkungen und Auto-Layout-Einstellungen ist der wichtigste Parameter, um sicherzustellen, dass deine Design-Dateien gut in Figma Make übersetzt werden. Aber auch die Benennung von Ebenen basierend auf ihrem Inhalt oder Zweck kann hilfreich sein.

Du kannst einige der vorhandenen KI-Funktionen von Figma Design (z. B. „Auto-Layout vorschlagen“ und „Ebenen mit KI umbenennen“) oder Plugins wie „Dokument bereinigen“ verwenden, um deine Frames schnell aufzuräumen und sie für die Einbindung in Figma Make vorzubereiten.

Extra-Tipp: Selbst mit dem besten Ebenen-Setup kann Figma Make Design-Dateien manchmal etwas zu wörtlich in seine eigenen Einschränkungen übersetzen. Wenn dein Design über die Ränder der Vorschau hinausgeht, gibst du einen Prompt wie diesen ein: Skaliere dies auf die Größe meines Bildschirms und mach es responsiv. Und wenn du bestimmte Dimensionen im Kopf hast, kannst du auch einen Prompt wie diesen verwenden: Behalte die Größe eines Handys bei.

Ein praktisches Beispiel

Die Figma-Produktmanagerin Holly Li hat die Musikplayer-Mikro-Interaktion unten erfolgreich mit einem einzigen Prompt erstellt, nachdem sie in Figma Design zuerst eine robuste Auto-Layout-Struktur eingerichtet hat.

Hier ist ihr Prompt: Bitte mach diesen CD-Player interaktiv, die CD sollte sich drehen, wenn ich einen Track abspiele. Danke!

3. Zerlege komplexe Projekte in handhabbare Schritte

Selbst mit einem soliden ersten Prompt können komplexe Projekte viele zusätzliche Folgeprompts erfordern. Das Zerlegen dieser Folgeprompts in kleinere, gezielte Schritte führt zu besseren Ergebnissen, als der Versuch, alles auf einmal zu beheben. „Je kleiner der Umfang, desto detaillierter kann das LLM sein“, sagt Produktdesignerin Tammy Taabassum. „Wie gut Figma Make abschneidet, hängt davon ab, wie groß oder kompliziert deine Anfrage ist und wie konkret deine Anweisungen sind.“

Wenn dein erster Prompt groß und detailliert ist, schaffst du eine Grundlage. Davon ausgehend kannst du nach und nach kleine Änderungen vornehmen. Mit diesem schrittweisen Ansatz kannst du nach deinem ersten Prompt allmählich komplexe Benutzeroberflächen entwickeln, mehrseitige Flows Frame für Frame aufbauen und dabei die Kontrolle über das allgemeine Designkonzept behalten.

Extra-Tipp: Verfolge diesen schrittweisen Ansatz weiter, indem du Figma Make explizit aufforderst, für jedes Element einen eigenen Code-Ordner zu erstellen. Mit diesem Schritt verbesserst du die Code-Organisation und stellst die Wartbarkeit über mehrere Prompts hinweg sicher. Und bei besonders anspruchsvollen Projekten kannst du auf diese Weise potenzielle Fehler isolieren.

Ein praktisches Beispiel

Für die Erstellung eines voll funktionsfähigen Finanz-Dashboards mit einem Onboarding-Flow nutzte Alpha-Testerin Antonella Rodriguez insgesamt mehr als 150 Prompts. Sie begann mit einer allgemeinen Beschreibung der benötigten Kernfunktionen, des gewünschten Layouts und eines visuellen Bezugspunkts. Dann bereinigte sie den ersten Output und befasste sich mit dem Inhalt jeder einzelnen Seite, um sie Stück für Stück zu füllen.

Einige der von Antonella verwendeten Folgeprompts lauteten:

• Füge Post-its auf der Journal-Seite hinzu, um Notizen hinzuzufügen.
• Füge auf der Seite „Finanzen“ eine Tabelle mit Kategorie, Art der Ausgaben, Betrag in USD, Betrag in Pesos, Notizen und Datum hinzu.
• Füge ein Kontrollkästchen hinzu, mit dem ausgewählt wird, welche Währung verwendet wird, USD oder ARS.

Für die Erstellung einer interaktiven 3D-Welt für die diesjährige Config London-Keynote arbeitete Produktdesignerin Tammy Taabassum mit verschiedenen Elementen. Nach einem ersten Prompt zum Erstellen eines 3D-London-Explorers mit berühmten Sehenswürdigkeiten forderte Tammy Figma Make auf, jedes 3D-Wahrzeichen – Big Ben, London Eye, Tower Bridge usw. – in separate codierte Dateien aufzuteilen. Dadurch war es einfacher und schneller möglich, einzelne Komponenten zu verfeinern, ohne die gesamte Umgebung der Datei zu verändern.

Von Tammy verwendeter Prompt:Kannst du den Big Ben-Code in eine neue Datei verschieben?

4. Nutze deine eigenen Komponenten, um visuelle Konsistenz zu gewährleisten

Bei der Arbeit in Figma Make kann das Kopieren einer Komponente – oder eines Frames mit mehreren Komponenten – sehr viel bewirken. Komponenten aus deiner Bibliothek, die bereits mit Auto-Layout und konsistenter Ebenenbenennung ausgestattet sind, lassen sich oft gut in dein Make übertragen.

Du kannst auch Komponenten in das Prompt-Feld von Figma Make einfügen, um einen visuellen Bezugspunkt für das Design zu erhalten, das erstellt wird. Indem Figma Make ein Gefühl dafür bekommt, wie ein Teil der Benutzeroberfläche aussieht, kann es den Stil und die Abstände anpassen sowie effektiv den Regeln deines Designsystems folgen, ohne dass zusätzliche Erklärungen oder Klarstellungen erforderlich sind.

Extra-Tipp: Das Zeige- und Bearbeitungswerkzeug von Figma Make ist eine hervorragende Möglichkeit, die generischen Komponenten in deiner ersten Version gegen spezifische UI aus deinen Bibliotheken auszutauschen. Wähle ein Element in der Vorschau aus, füge deine eigene Komponente in das Prompt-Feld ein und verwende diesen Prompt: Ersetze diese Komponente durch dieses Design.

Ein praktisches Beispiel

Das Designer Advocate-Team hat die untenstehende Produktivitäts-App mit Komponenten aus dem neuesten Material 3 Design Kit erstellt. Um diese App zu erstellen, fügten sie zwei Komponenten aus der Designsystem-Datei in Figma Make ein, gefolgt von diesem Prompt:

Baue eine Produktivitäts-App, die den Benutzer*innen hilft, Aufgaben zu verwalten und zu priorisieren, den Überblick über ihren Kalender zu behalten und schriftliche und Sprachnotizen zu sammeln. Verwende die beigefügte Navigationskomponente und passe ihren Inhalt nach Bedarf an. Für den Kalender-Tab verwende die beigefügte Kalenderkomponente. Der Rest der Seiten sollte optisch dem Stil dieser Komponenten entsprechen.

Das Team erweiterte dann die erste Grundversion, indem es Komponenten mit dem Zeige- und Bearbeitungswerkzeug auswählte und dann Figma Make aufforderte, sie durch Material 3 Design Kit-Varianten zu ersetzen.

5. Nimm visuelle Anpassungen mit dem Zeige- und Bearbeitungswerkzeug vor

Mit dem Zeige- und Bearbeitungswerkzeug kannst du auch schnelle, grundlegende Anpassungen vornehmen (z. B. Farbe oder Schriftart ändern), indem du auf ein Element zeigst, darauf klickst und es entweder über die Symbolleiste oder mit einem weiteren Prompt bearbeitest. Durch diese direkte Manipulation kannst du visuelle Eigenschaften wie Farbe, Eckenradius, Abstände und Typografie sofort und nahtlos ändern.

Extra-Tipp: Wenn du das Zeige- und Bearbeitungswerkzeug verwendest, hängen die verfügbaren Bearbeitungsoptionen vom ausgewählten Elementtyp ab. Bei Textelementen kannst du Schriftarten, Farben und Formatierungen anpassen, während bei Containern der Schwerpunkt auf Hintergrundfarben und Abständen liegt. Bilder haben ihre eigenen Optionen, einschließlich der Möglichkeit, Ersatzbilder hochzuladen.

Ein praktisches Beispiel

Im Beispiel des Musik-Players unten wird das Zeige- und Bearbeitungswerkzeug verwendet, um Details wie Schriftgröße und Formatierung schnell anzupassen.

6. Greife für schnelle Bearbeitungen auf den Code-Tab zu – keine Entwicklerkenntnisse erforderlich

Beim Erstellen in Figma Make lassen sich manche kleine, nicht visuelle Änderungen am besten innerhalb des Codes bearbeiten. Die Schaltfläche „Gehe zur Quelle“ zeigt dir den Code hinter einem Element, damit du einen Blick hinter die Kulissen werfen und die Werte für das Element anpassen kannst. Figma Make beschriftet seinen gesamten Code auf leicht verständliche Weise, sodass auch Personen ohne Programmiererfahrung erkennen können, welcher Teil des Codes welches Verhalten innerhalb des Builds steuert.Aktualisierte Werte im Code werden ohne manuelle Aktualisierung sofort in deiner Vorschau angezeigt und erleichtern dir das schnelle Testen mehrerer Produktfunktionen.

Extra-Tipp: Wenn eine Einstellung auf Seitenebene nicht über „Gehe zur Quelle“ aufgerufen werden kann, kannst du die semantischen Ebenen in einem Code-Ordner mit den Tastenkürzeln cmd+F (Mac) bzw. Strg+F (PC) durchsuchen.

Ein praktisches Beispiel

Diese Methode eignet sich hervorragend, um schnell mit Eigenschaften wie Animationen zu iterieren. Wenn wir zum Beispiel testen wollen, wie sich die Vinylplatte in Hollys Musikplayer-Datei dreht, können wir einfach den Quellcode des Elements aufrufen, die Codebasis schnell nach dem Geschwindigkeitsparameter durchsuchen und die Geschwindigkeit manuell über den Code anpassen, bis sie in der Vorschau das gewünschte Verhalten zeigt.

7. Integriere realistische Daten in dein Make

Um einen dynamischen Prototyp zum Leben zu erwecken, kannst du in Figma Make Benutzeroberflächen mit benutzerdefinierten oder Echtzeitdaten erstellen, z. B. mit Aktienkursen und Wettervorhersagen. Es gibt verschiedene Möglichkeiten, wie du Daten in deine Figma Make-Dateien importieren kannst, ohne sie in APIs einzubinden:

• Frag Figma Make nach der Art der Daten, die du anzeigen möchtest.
• Fordere Figma Make explizit auf, einen Einstiegspunkt für den Datenimport in deine Benutzeroberfläche aufzunehmen, wenn du eine genauere Kontrolle über deinen Datensatz wünschst.

Extra-Tipp: Denke daran, dass Figma Make bei Bedarf mit jeder Computerhardware verbunden werden kann, auf die dein Browser Zugriff hat. Das ermöglicht das Erstellen von Prototypen für Interaktionen mit verschiedenen Tastatureingaben, Toneingaben oder sogar Kameraeingaben. Dies veranschaulicht zum Beispiel Mini-Photobooth-App der Produktdesignerin Daniela Muntyan.

Ein praktisches Beispiel

Als der Produktdesigner Ryan Reid mit der MTA-API einen Time Tracker für die U-Bahn-Linien von New York City entwickelte, sammelte Figma Make automatisch Daten von U-Bahn-Linien und -stationen und generierte auf intelligente Weise Scheindaten, die die Ankunft von Zügen in Echtzeit simulierten – ohne jegliche API-Verbindung.

Ryans Prompt: Erstelle eine Website, auf der man die U-Bahn-Abfahrtzeiten in New York City mithilfe der NYC MTA-APIs verfolgen kann. Auf der Website sollte man eine U-Bahn-Linie und eine U-Bahn-Station auswählen können, um alle Abfahrzeiten in chronologischer Reihenfolge anzusehen. Damit die Navigation übersichtlich und einfach ist, sollte die Website aus einer einzigen Seite bestehen, auf der man durch Auswahl einer Linie und einer Station auf der rechten Seite weitere Informationen erhält.

In ähnlicher Weise generierte das Figma-Team auch einen Fake-Datensatz von Lauf-Trainingseinheiten mit dem internen GPT, lud ihn als CSV-Datei herunter und forderte Figma Make auf, eine Upload-Mechanik im Marathontrainer hinzuzufügen. Das Ergebnis ist ein Dashboard-Design, das sich dynamisch an jede hochgeladene CSV-Datenbank anpasst, wenn die richtige Formatierung verwendet wird.

Ein Beispiel-Prompt:

Ich möchte ein Analyse-Dashboard erstellen, das die Entwicklung meines Marathontrainings im Laufe der Zeit anzeigt.

Das Dashboard sollte eine Zusammenfassung meines letzten Trainings enthalten, einschließlich der wichtigsten Zahlen und eines Liniendiagramms meines zeitlichen Verlaufs. X-Achse: Trainingsdatum, Y-Achse: gelaufene Distanz an jedem Trainingsdatum.

Bevor die Analysen erscheinen, sollte die Seite leer sein und einen Platzhalter enthalten, der mich auffordert, eine CSV-Datei hochzuladen. Du nimmst dann diese CSV-Datei, die mit den folgenden Informationen formatiert wird, um sie in das oben beschriebene Dashboard zu verwandeln: Datum, Entfernung_km, Zeit_Minuten, Durchschnittstempo, Herzfrequenz, Kalorien_verbrannt, Höhenmeter.

8. Mache Figma Make zu einem Übergabeassistenten

Indem du Make aufforderst, Benutzeroberflächen zu erstellen, die produktionsreife Code-Schnipsel generieren, kannst du dein eigenes Übergabe-Tool entwickeln, das Designentscheidungen trifft und Code-Output erzeugt, den du mit Entwicklern teilen kannst. Dieser Ansatz gibt dir mehr Raum zum Ausprobieren, Experimentieren und Iterieren, bevor du zur nächsten Phase übergehst.

Extra-Tipp: Wenn der generierte Code nicht deinen Entwicklungsanforderungen entspricht, kannst du Figma Make stattdessen auffordern, dir bestimmte Elemente und Verhaltensweisen als generischen Pseudocode im Chat zu geben. Ein Beispiel-Prompt könnte so aussehen: Behalte den Code genau so, wie er ist, aber beschreibe mir, wie dieser Teil in Pseudocode implementiert wird. Wenn möglich, beschreibe auch die Besonderheiten der Plattform für (Name der Plattform einfügen).

Ein praktisches Beispiel

Designer Advocate Luis Ouriach nutzte Figma Make als seinen Übergabeassistenten, als er seinen eigenen OKLCH Palette Builder erstellte. Mit seiner App kannst du ein vollständiges Farbsystem erstellen, das von einer primären Markenfarbe ausgeht und die resultierenden CSS-Variablen sowie den Tailwind-CSS-Output enthält, der zur Übergabe bereit ist.

Der Prompt von Luis:Erstelle eine OKLCH-Farbpalette, in die du deine primäre Markenfarbe einträgst und die dann den vollständigen Farbverlauf für die üblichen Farben erstellt: Grün, Blau, Rot, Gelb, Orange und Grau. Du kannst entscheiden, wie viele Farben du in jedem Verlauf haben möchtest, zum Beispiel drei von jeder Farbe in verschiedenen Schattierungen.

In ähnlicher Weise hat Developer Advocate Jake Albaugh seine eigene Mini-App entwickelt, um die Animationen zu verfeinern, die auf ein bestimmtes Stück UI angewendet werden – in diesem Fall eine Luxus-Bankkarte. Jake bat Figma Make, Steuerelemente für visuelle Effekte und den JSON-Output von Animationsparametern zu integrieren, um wiederverwendbaren Code für ein anderes Produkt zu erstellen, das er entwickelte.

Einer der Prompts von Jake: Sorge dafür, dass es einen JSON-Code-Output gibt, der alle Parameter beschreibt (einschließlich der minimalen und maximalen Neigung jeder Achse), die sich ändern, wenn sich die Eingabe ändert.

Sei nicht ungeduldig

Wie bei jedem KI-Tool ist das Prompting eine Frage von Versuch und Irrtum, bis du einen Ansatz findest, der für dich funktioniert. Die Beta-Version von Figma Make steht jetzt allen Figma-Benutzer*innen mit einer Full-Lizenz zur Verfügung. Wir sind gespannt, wie kreativ du dieses Tool nutzen wirst, um neue Ideen zum Leben zu erwecken.

Wir fangen gerade erst an, die Möglichkeiten dieses Tools zu erkunden – und wir freuen uns darauf, dies gemeinsam mit dir zu tun.