Vibe, Design & Code mit Figma Make: Tipps und Tricks anhand eines fiktiven Retro-Spacegames

👉 Spaceoperator

Was als schneller Konzeptentwurf für ein fiktives Spacegame und als erster echter Funktionstest von Figma Make begann, hat sich durch die Möglichkeiten von Figma Make in ein bereits weit fortgeschrittenes Spiel mit Sounds, Animationen und logischer Interaktivität verwandelt. Der erste Prototyp war in 10 Minuten erstellt, die aktuelle Version entstand über viele Iterationen (und mehrere Stunden) hinweg.

Was ist Figma Make?

Figma Make ist mehr als nur ein Tool für visuelles Design – es ist ein kreativer Playground für Designer:innen und alle, die schnell interaktive Prototypen mit Funktionen bauen wollen. Seit ein paar Wochen ist Figma Make in der Open Beta – wer ein aktives Figma-Abo hat, kann direkt loslegen. Features im Überblick:

• Codegenerierung mit Claude Sonnet 4

• Prompteingabe + Bild-Uploads

• Prototyping mit interaktiven Komponenten, Animationen und Sound

• Iteratives Bearbeiten (inkl. Point & Edit Tool für visuelle Anpassungen)
  

Verfeinern bis alles passt

Der erste Entwurf entsteht in wenigen Minuten – doch dann begann der spannende Teil: Iterieren, Verfeinern, Testen. Jede Anpassung in Figma Make bedeutet, dass der Code neu geschrieben wird – bei einfachen Prototypen schnell erledigt, bei komplexeren dauert es mehrere Minuten. Der Code ist momentan nicht clean genug um direkt für Produkte verwendbar zu sein, aber für viele Einsatzbereiche gut genug. Möchte man den Prototyp in ein echtes Produkt verwandeln, müssen Code evaluiert, verstanden und dann bereinigt werden.

Ausserdem gibt es keine Möglichkeit Figma Make mit dem herkömmlichen Figma Designeditor zu verbinden, man kann also entweder Vibedesignen oder herkömmllich arbeiten, aber nicht alle Elemente selbst ausbessern. Es gibt allerdings die Funktion wie aus Figma gewohnt Designlibaries zu verknüpfen – dies funktioniert momentan allerdings nur teilweise.

Wir verwendeten Figma Make seither für mehrere Prototypen und Beautyshots, die uns statt einer Woche Arbeit nur 1 Tag kosten.

Die Vorteile liegen auf der Hand: Vibe Designen statt Komponenten bauen, iterieren und ausprobieren und fertige Klick-dummies mit Funktionen (wie Audio) die sonst in Figma nur mit Plugins möglich wären, um mit Kunden über Featuremöglichkeiten und Designideen zu sprechen. _________________________________________________________________

Tipps und Tricks:

• Bei komplexen Prozessen und Platformen hilft die Promptvorbeitung mit ChatGPT: Definieren des Prompts für Figma Make wird leichter, wenn ChatGPT zusammenfasst was vorhanden sein soll. Ziel, Layout, Designelemente, Prozessflows, Screenshots aus der Definitionsphase etc. Kurzum: Alles  in ChatGPT reinwerfen, was man bereits hat und erklären, was der Output sein soll: Beispielsweise ein Prompt für ein AI Designtool für ein funktionales Retrogame mit diesen und jenen Funktionen.
  

• Screen-Größe und Layout-Grenzen zu Beginn definieren: Beispielsweise „Desktop Screensize“ oder zB. 1920x1200px. Von Haus aus wird Figma Make Elemente responsive zu gestalten, allerdings ist es ratsam sich schon vorher den Bereich zu überlegen.

  
  

• Um ähnliche Designs zu vermeiden, die Figma Make oft als erste Variante präsentiert, ist es ratsam viel zu definieren: Fonts, Fontgrößen, Radius von Ecken, Farben etc.

  
  

• Screenshots als Designbeispiel nutzen Achtung: Definieren, dass der Inhalt nicht genutzt werden soll, um nur das Design zu beachten

  
  

• Sounds oder andere Dateien per URL einbinden Einfach in einen Cloudstorage laden und von dort per Prompt abrufen lassen. Interessant ist, dass Figma Make die eingebauten Browserfunktionen von Web Audio API nutzen kann um synthetische Sounds mit Frequenz, Attack, Sustain und Decay zu erzeugen, falls keine Audiodateien vorhanden sind.

  
  

• Fenster, Inhalte oder Elemente stehen manchmal aus dem Bereich oder überlappen. Dies kann vermieden werden, in dem man darauf hinweist, dass Elemente nicht aus ihrem Bereich stehen dürfen und entweder mit Scrollleiste versehen werden sollen, oder in der Höhe angepasst.

• Um lange Ladezeiten bei Änderungen (kompletter Code wird neu geschrieben) zu vermeiden, den Click and Point Cursor verwenden um einzelne Elemente anzupassen. Farben, Radius oder Schriftstärke können auch manuell schnell geändert werden.

  
  

• Änderungen können natürlich auch manuell im Code vorgenommen werden, aber bei der nächsten Codeänderung durch das Programm werden diese ignoriert. Dies sollte also nochmal im Prompt ausgedrückt werden. ("Beachte Codeänderungen" oder copy paste der Codestellen).

  
  

• Es ist gut zu wissen wie Elemente in der Designsprache genannt werden, um gezielt Dinge umzusetzen. Wer das nicht weiss kann hier auch gern ChatGPT bemühen.

  
  

• Um ungewünschte Änderungen rückgängig zu machen, gibt es im Promptfenster die Versionierung: Dort kann man mit dem kleinen Wiederherstellungsicon auf die vorige Version zurückkehren. Aber Achtung: Manchmal kann man sich damit trotzdem das Design zerschiessen, daher ist es ratsam immer wieder lokale Dateien zu speichern, oder das File zu duplizieren.

  __________________________________________________________________

Fazit

Figma Make eignet sich perfekt für:

• schnelle Prototypen

• interaktive Demos

• Design-Experimente mit funktionalem Code

• Designer die keine Lust mehr haben, selbst zu designen weil sie bereits so AI-verwöhnt sind 😉
  

Noch ist nicht alles perfekt, aber es ist eine der spannendsten Entwicklungen im Designbereich seit Langem.

Wenn du Lust hast, dein eigenes Retro-Game oder Interface auszuprobieren – probier Figma Make aus. Und vergiss nicht: Iterationen sind der neue Flow. 🚀🎮