Gestalten und nutzen mit FigmaMake, Teil 1: Eine Landingpage-Vorlage in drei Stunden mit FigmaMake und Gemini – ein neuer Webdesign-Workflow für den schnellen Entwurf, mit dem beschäftigte Geschäftsführer ihre Korrekturen effizient einarbeiten können

Hallo! Ich bin Hasshi und arbeite als UI-Designer bei Liberogic Inc.

Ein Thema, das mich in letzter Zeit beschäftigt: Die Erstellung der neuen Landingpage für unsere Dienstleistungen im Bereich Web-Accessibility kommt nur schleppend voran.

Der Geschäftsführer, der für die Struktur unserer eigenen Website verantwortlich ist, ist dankenswerterweise durch andere Projekte extrem eingespannt. So kommen wir aber einfach nicht weiter ...

„Gut, damit der Review des Geschäftsführers wenigstens etwas leichter wird, erstelle ich einfach mal eine erste Vorlage!“

Diese Idee war der Ausgangspunkt: schnelle LP-Produktion mit KI (Gemini) und einem Tool zur Design-Automatisierung (FigmaMake). In diesem Beitrag zeige ich Ihnen den vollständigen Ablauf und meine ehrlichen Gedanken dazu – aus Sicht eines Designers!

Ziel dieses Vorgehens: Mit einer ersten Vorlage das Feedback des Geschäftsführers anstoßen!

Perfekt muss es am Anfang nicht sein! Wichtig ist, dass der Geschäftsführer einen Entwurf hat, an dem er Kritik üben kann. Genau so ist es richtig!

Alle Schritte für die schnelle LP-Produktion (mit Übung geht es noch schneller!)

Hier ist eine realistische Aufschlüsselung des Zeitaufwands für den Workflow, den wir ausprobiert haben. Am meisten Zeit hat der Teil mit den "Wiederholungen" gekostet, in dem wir die Präzision des Designs verbessert haben.

1. 【Analyse】 Gemini, wie findest du diese Landingpage? (15 Min.)
2. 【Textgenerierung】 Gemini einen Landingpage-Text mit den Verbesserungsvorschlägen erstellen lassen (15 Min.)
3. 【Prompt-Erstellung】 Gemini einen "magischen Zauberspruch" für FigmaMake formulieren lassen (5 Min.)
4. 【Designgenerierung】 FigmaMake, leg los und erstell das Design! (5 Min.)
5. 【Wiederholungsschleife】 Durch das Hin und Her zwischen Analyse und Generierung die Präzision steigern (1,5 Std.)
6. 【Umwandlung in Figma】 Import in Figma über das Plugin Html to Design (5 Min.)
7. 【Figma-Korrekturen】 Layoutfehler und Verschiebungen final anpassen (30 Min.)

Schauen wir uns nun jeden Schritt im Detail an!

SCHRITT 1: 【Analyse】Gemini, wie findest du diese Landingpage? (15 Min.)

Zunächst lasse ich Gemini die bestehende Barrierefreiheits-Seite unseres Unternehmens lesen und bitte um ein ungeschöntes Feedback.

【Beispiel-Prompt für Gemini】

Analysiere bitte die Landingpage zur Web-Accessibility unter der folgenden URL und liste die Stärken sowie die Verbesserungspunkte auf. (usw.)

Innerhalb weniger Sekunden lag das Analyseergebnis vor. „„Es fehlen Fallstudien und Kundenstimmen, sodass der konkrete Nutzen nach der Einführung des Dienstes kaum vorstellbar ist“… Autsch, das trifft genau ins Schwarze … Aber das hätte ich selbst nie so formulieren können, danke, Gemini!“ Gemini hat damit genau die Schwachstelle benannt, die ich selbst schon halb geahnt hatte.

Also gut, zuerst die Bestandsaufnahme. Die aktuelle Seite habe ich selbst gebaut, aber ... Ich lasse mir von Gemini-Sensei am besten gleich ungeschminkt sagen, was mir selbst nicht auffällt!

SCHRITT 2: [Textgenerierung] Gemini einen Landingpage-Text mit den Verbesserungsvorschlägen erstellen lassen (15 Min.)

Ich füge das Analyseergebnis aus Schritt 1 ein und bitte darum, einen Text unter Einbeziehung der Verbesserungsvorschläge zu erstellen.

【Beispiel-Prompt für Gemini】

Erstelle auf Basis des vorherigen Analyseergebnisses eine Textstruktur für die Landingpage zur Web-Accessibility. (Mittlere Teile ausgelassen.) Neu hinzugefügte Elemente bitte eindeutig mit [Beispieltext] kennzeichnen.

Sobald konkrete Texte wie „[Beispiel Kundenstimme] Firma ○○: Anfragen über die Website um das 1,5-Fache gestiegen!“ auftauchen, wirkt die Seite gleich viel mehr wie eine Landingpage. Allein damit fühlt man sich schon, als hätte man die Arbeit erledigt.

Gut, dann gebe ich die eben erhaltene Kritikliste direkt an Gemini weiter und lasse daraus richtig gute Texte machen. Das ist der sinnvolle Einsatz von KI! ... Oh, und ich sollte die Texte unbedingt mit „[Beispieltext]“ markieren lassen, sonst verliere ich später noch den Überblick. Ich neige nämlich zu voreiligen Schlüssen ...

SCHRITT 3: [Prompt-Erstellung] Gemini bitten, den "magischen Zauberspruch" für FigmaMake zu formulieren (5 Min.)

Teile Gemini den Textaufbau aus Schritt 2 sowie deine Designvorstellung mit. Daraus wird ein englischer Prompt für FigmaMake generiert.

Wenn die Texte fertig sind, kommt endlich das Design – der spannendste Teil! Doch zuerst muss ein "Auftragsschreiben" (Prompt) für FigmaMake her. Mein holpriges Englisch würde nicht ankommen, deshalb übernimmt hier Gemini. Ich zähle auf dich!

SCHRITT 4: [Design-Generierung] FigmaMake, jetzt bist du dran! (5 Min.)

Jetzt den magischen Zauberspruch kopieren, einfügen und Enter drücken. Ob gleich ein perfektes Design herauskommt? Vielleicht... Eher nicht. Oder doch? Dieses Kribbeln fühlt sich ein bisschen wie Gacha an, und das macht Spaß.

Den generierten Prompt kopieren, auf "Design generieren" klicken. Diese paar Sekunden Wartezeit sind erstaunlich nervenaufreibend. Dann erscheint der erste Entwurf.

Wow, es hat funktioniert! Allerdings wirkt es noch recht schlicht ... Also geht es weiter mit Feinschliff bei Gestaltung und Formulierungen.

Aber ehrlich gesagt begann hier erst der eigentliche Teil.

SCHRITT 5: [Wiederholungsschleife] Mit Analyse und Generierung im Wechsel die Genauigkeit steigern (1,5 Stunden)

Ab jetzt wird mit der KI gebrainstormt. Anhand des in FigmaMake erstellten Designs bespricht man mit Gemini, was man sich anders wünscht, und verbessert so Schritt für Schritt den Prompt. Eine mühsame, aber geduldige Feinarbeit.

"Ah, nein, nicht da!", rutscht mir unwillkürlich heraus, und meine Selbstgespräche werden ziemlich laut. Wahrscheinlich hallt es durchs ganze Büro. Seltsamerweise macht mir dieser Austausch aber immer mehr Spaß.

Ja, wie erwartet hat es nicht auf Anhieb geklappt! Hab ich ja gewusst! Ein bisschen gehofft hatte ich aber schon! Jetzt geht es richtig los: ein Zusammenspiel mit der KI. Ich bin der Regisseur, und Gemini ist sozusagen mein Coach?

Und hier ist das endgültige Ergebnis.

Im Vergleich zur ersten Zeichnung hat es sich deutlich verbessert. Allerdings ist es mühsam, unnötige Teile zu entfernen oder neue hinzuzufügen. (Vermutlich übersetze ich die Japanischen Anweisungen ins Englische, und dabei geht die Absicht oft verloren...)

Da ich dachte, dass ich in FigmaMake nicht weiterkomme, habe ich mich zu einer Brute-Force-Lösung entschieden: Ich habe den Entwurf zunächst in Figma-Daten umgewandelt und ihn dann dort überarbeitet.

SCHRITT 6: [Figma-Export] Import in Figma mit dem Plugin Html to Design (5 Min.)

Sobald die Gestaltungsrichtung einigermaßen feststeht, übertragen wir die Daten endlich nach Figma. Die Schritte dazu finden Sie unten.

1. Den in FigmaMake erstellten Entwurf veröffentlichen wir zunächst als Webseite.
2. Starten Sie das Figma-Plugin "Html to Design".
3. Geben Sie die URL der veröffentlichten FigmaMake-Seite ein und starten Sie den Import!

Dafür wird das Plugin "Html to Design" verwendet. Die URL der in FigmaMake veröffentlichten Seite kopieren, einfügen und auf den Button klicken. Schon wird die Webseite in Figma-Ebenen umgewandelt. Was für eine praktische Zeit, in der wir leben...

Veröffentlichen von FigmaMake

Zuerst wird FigmaMake veröffentlicht. Nach einem Klick auf "Veröffentlichen" wechselt der Status auf "Veröffentlicht".

Das Figma-Plugin "Html to Design" öffnen, die URL des veröffentlichten FigmaMake eingeben und den Import starten!

Das Plugin öffnen und die zuvor kopierte URL einfügen. Anschließend einfach auf die Schaltfläche "Importieren" klicken, und schon ist alles erledigt!

Nach einigen Minuten wird das in Figma exportierte Design angezeigt.

Zum Schluss die Veröffentlichung zurücknehmen

Sobald alle Schritte abgeschlossen sind, setzen Sie den Status mit "Veröffentlichung aufheben" wieder auf nicht öffentlich zurück.

Bedenken

Derzeit gibt es keine Funktionen wie Passwortschutz für veröffentlichte Seiten oder die Einrichtung von Entwicklungsumgebungen. Bei Einsatz für die Neugestaltung von Unternehmenswebseiten ist daher auf mögliche Datenlecks zu achten.

Grundsätzlich sind die Auswirkungen gering, wenn man ausschließlich eigene Inhalte verwendet oder mit Dummy-Daten einen ersten Entwurf erstellt. Deshalb empfiehlt es sich, je nach Projekt zu entscheiden, welche Variante man nutzt (bei Projekten, bei denen eine externe Weitergabe nicht zulässig ist, unbedingt keinesfalls verwenden).

Gut, es fängt langsam an, richtig gut auszusehen! Jetzt kommt mein Heimspiel: Figma! Danke für's Warten, mein Freund!

STEP 7: [Figma-Korrektur] Letzte Feinabstimmung bei Layoutfehlern (30 Min.)

Die frisch importierten Daten sind noch sehr roh. Es gibt rätselhafte Gruppierungen, und Textfelder ragen über ihre Container hinaus. Es gibt also jede Menge Angriffsfläche für Kritik.

Jetzt heißt es vor allem Detailarbeit: Auto-Layouts neu setzen, verstreute Elemente zu Komponenten zusammenfassen und die Abstände im Gesamtbild harmonisieren ... Dieser zusätzliche Aufwand hebt die Designqualität deutlich an und macht daraus einen wirklich brauchbaren Entwurf.

Das fertige Ergebnis sieht so aus:

Je weiter es in der Landingpage nach unten geht, desto mehr nimmt die Detailtiefe des Designs ab. Liegt das an der Funktionsweise der KI oder an meinen Anweisungen? Ich werde auf jeden Fall weiter experimentieren und verschiedene Ansätze ausprobieren.

Import, erledigt ... Nun ja, das Layout ist deutlich lebhafter ausgefallen, als ich erwartet hatte! Aber die KI hat sich ja redlich bemüht. Jetzt kommt es darauf an, alles sauber zu ordnen. Hier zeigt sich meine ganze Liebe zum Detail.

Fazit: Die wichtigsten Erkenntnisse zum „KI-gestützten Design“ aus der Praxis

Die wichtigste Erkenntnis aus diesem Produktionsablauf: KI ist kein „Zauberstab“, sondern ein „fähiger Partner“.

• Die Zeitersparnis beim Erstellen eines Entwurfs ist enorm: Es geht deutlich schneller, als sich ausgehend von null mit einer Gliederung herumzuschlagen.
• Der Kern liegt im Trial-and-Error: Um ein gutes Design zu entwickeln, braucht es Ausdauer, um immer wieder im Dialog mit der KI nachzubessern.
• Das Finish macht am Ende der Mensch: Man sollte die Ergebnisse der KI nicht ungeprüft übernehmen. Dass ein Designer mit klarer Absicht die letzte Feinarbeit leistet, entscheidet über die Qualität.

Übrigens: Als ich diesen Entwurf zaghaft dem Geschäftsführer gezeigt habe, hieß es: "Oh, interessant! Damit lässt sich die Sache viel leichter vorantreiben! Allein ein Entwurf macht schon einen großen Unterschied, danke!"

Yes, das hat sich gelohnt! Die Mühe hat sich ausgezahlt … Heute Abend gibt es ein verdientes Bier!

Das war's für heute! Den eigentlichen Umbau zur Landingpage veröffentliche ich als [Teil 2], nachdem der Geschäftsführer seine Korrekturen eingebracht hat und das Design final ausgearbeitet ist!

Wie wäre es, wenn Sie selbst einmal ausprobieren, neue Designs gemeinsam mit einer KI zu entwickeln?