【Figma Make erstellen und nutzen: Teil 1】Figma Make und Gemini in 3 Stunden! Der neue Web-Entwicklungs-Workflow für rasante Erstellung von LP-Entwürfen, die die „Korrekturmarkierungen" eines beschäftigten Geschäftsführers voranbringen

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

Meine aktuelle Sorge ist, dass die Erstellung der neuen Landing Page für unseren Web-Accessibility-Service nur langsam vorankommt.

Der Geschäftsführer, der bei uns für den Seitenaufbau zuständig ist, ist zum Glück gerade mit anderen Dingen überlastet. Aber so kommen wir nicht voran….

Okay, lass mich schnell einen Entwurf vorbereiten, damit der Review für den CEO einfacher wird!

Was aus einer spontanen Idee begann: Blitzschnelle LP-Erstellung mit AI (Gemini) und dem Design-Automatisierungstool (FigmaMake). Dieses Mal stelle ich euch den gesamten Prozess und meine ehrlichen Gedanken aus einer Designer-Perspektive vor – komplett ohne etwas auszulassen!

Ziel dieses Mal: Mit einem Entwurf das Feedback des Geschäftsführers herauskitzeln!

Niemand erwartet Perfektion von Anfang an! Ja! Das Wichtigste ist, dass der Chef zuerst einen leichten Ball zum Kritisieren serviert bekommt – das muss einfach so sein!

Kompletter Ablauf für ultraschnelle LP-Erstellung (noch schneller mit Übung!)

Die realistische Zeitverteilung des Produktions-Workflows, den wir diesmal getestet haben, sieht folgendermaßen aus. Der zeitaufwändigste Teil war die "Wiederholungsschleife", in der wir die Design-Genauigkeit verbesserten.

1. [Analyse] Gemini, wie findest du diese LP? (15 Minuten)
2. [Text-Generierung] Lasse Gemini den LP-Text mit Verbesserungspunkten erstellen (15 Minuten)
3. [Prompt-Erstellung] Lasse Gemini den "magischen Befehl" für FigmaMake erstellen (5 Minuten)
4. [Design-Generierung] FigmaMake, gleich beim ersten Mal gemacht! (5 Minuten)
5. [Wiederholungsschleife] Hin- und Herwechsel zwischen Analyse und Generierung für höhere Genauigkeit (1,5 Stunden)
6. [Figma-Konvertierung] Mit dem Html to Design-Plugin in Figma importieren (5 Minuten)
7. [Figma-Anpassung] Layout-Fehler und andere Elemente abschließend korrigieren (30 Minuten)

Schauen wir uns nun die einzelnen Schritte im Detail an!

SCHRITT 1: 【Analyse】Gemini-Lehrer, wie sieht diese LP aus? (15 Minuten)

Zunächst lassen wir Gemini unsere bestehende Webseite zum Thema Barrierefreiheit analysieren und erhalten ehrliches Feedback ohne Rücksichtnahme.

【Beispiel-Prompt für Gemini】

Analysieren Sie die Landing Page zum Thema Web-Accessibility der folgenden URL und listen Sie die Stärken und Verbesserungspunkte auf. (gekürzt)

Und schon nach wenigen Sekunden liegt die Analyseergebnis vor. 「『Es gibt keine Fallstudien oder Kundenstimmen, und der konkrete Nutzen nach der Dienstimplementierung ist schwer vorstellbar』…wow, das trifft den Nagel auf den Kopf…! Aber das hätte ich selbst nicht sagen können, danke Gemini!』 Gemini hat die Herausforderungen, die ich selbst nur vage gespürt habe, präzise in Worte gefasst.

Also dann, erst mal die aktuelle Situation erfassen. Ich habe die Seite selbst erstellt, aber… auf jeden Fall möchte ich, dass Gemini-Lehrer mir genau zeigt, was ich übersehe!

SCHRITT 2: 【Texterstellung】Lassen Sie Gemini LP-Text mit Verbesserungen erstellen (15 Minuten)

Kopieren Sie das Analyseergebnis aus SCHRITT 1 und bitten Sie um Texterstellung mit eingearbeiteten Verbesserungsvorschlägen.

【Beispiel-Prompt für Gemini】

Erstellen Sie auf Basis des vorangegangenen Analyseergebnisses einen Textstrukturvorschlag für die Web-Accessibility-LP. (gekürzt) Bitte kennzeichnen Sie neu hinzuzufügende Elemente deutlich als 【Beispieltext】.

「【Kundenstimmen-Beispiel】Beispielunternehmen XY: Anfragen über die Website sind um 50 % gestiegen!』 Wenn solch konkreter Text herauskommt, wirkt die LP gleich viel professioneller. Man hat dabei schon das Gefühl, gute Arbeit geleistet zu haben.

Alles klar, ich nehme die Feedback-Liste, die ich gerade bekommen habe, und gebe sie einfach an Gemini weiter, um den Text zu verbessern. Das ist ja die perfekte Nutzung von KI! …Moment, aber ich sollte dich bitten, ein Erkennungszeichen wie »【Beispieltext】« hinzuzufügen, damit ich später nicht verwirrt bin. Ich bin nämlich schnell voreilig…

SCHRITT 3: 【Prompt-Erstellung】Den "magischen Befehl" für FigmaMake mit Gemini erstellen lassen (5 Minuten)

Sie teilen den in STEP2 erstellten Textgliederungsvorschlag und ein Bild des gewünschten Designs, um einen englischen Prompt für Figma zu generieren.

Wenn der Text fertig ist, geht es zum Design! Der spaßigste Teil!… Aber vorher muss ich eine „Anfrage (Prompt)" für FigmaMake vorbereiten. Mit meinem gebrochenem Englisch werde ich mich nicht verständlich machen können, also vertraue ich hier auf Gemini. Ich zähle auf dich!

SCHRITT 4: 【Design-Generierung】Figma, kümmere dich darum! (5 Min.)

Okay, magischer Code kopieren und einfügen, Enter drücken!... Naja. Und schon hat man ein perfektes Design?... Wohl kaum. Aber vielleicht doch? Das spannende Gefühl erinnert mich irgendwie an ein Gacha-Spiel – macht Spaß.

Generierte Prompts kopieren und einfügen, dann auf die Schaltfläche zur Design-Generierung klicken. Diese wenigen Sekunden Wartezeit machen mich tatsächlich ein bisschen aufgeregt. Und dann das erste Design, das herauskommt.

Oh, es hat funktioniert!! Aber es ist noch ziemlich einfach…. Wir werden das Design weiter optimieren und die Texte überarbeiten.

Aber ja, das war eigentlich der Anfang des eigentlichen Werks.

SCHRITT 5: [Wiederholte Schleife] Genauigkeit durch iterativen Austausch von Analyse und Generierung erhöhen (1,5 Stunden)

Ab hier beginnt die Brainstorming-Zeit mit KI. Während ich das mit FigmaMake generierte Design betrachte, bespreche ich mit Gemini, wie ich es verbessern möchte, und optimiere schrittweise die Prompts.

"Ach nein, das nicht!" – manchmal wird mein Selbstgespräch unwillkürlich laut. Das hallt wahrscheinlich durchs ganze Büro. Aber seltsamerweise wird dieser Austausch mit der KI immer mehr zum Vergnügen.

Ja, natürlich hat es nicht beim ersten Mal geklappt! Das hätte ich mir denken können! Aber ich hatte trotzdem ein bisschen gehofft! Jetzt beginnt die echte Arbeit – die enge Zusammenarbeit mit KI. Ich bin wie der Regisseur, Gemini wie der Coach, sozusagen.

Und hier ist das endgültige Ergebnis

Das Ergebnis ist deutlich aufgeräumter als beim ersten Entwurf. Allerdings ist es mühsam, unnötige Teile zu löschen oder hinzuzufügen (wahrscheinlich geben die Anweisungen durch die Übersetzung vom Japanischen ins Englische oft nicht richtig meine Absicht wieder).

Da ich dachte, dass FigmaMake an seine Grenzen stößt, habe ich kurzerhand die Daten in Figma konvertiert und von dort aus bearbeitet.

SCHRITT 6: [Figma-Export] Mit dem Html to Design-Plugin in Figma importieren (5 Min)

Wenn die Design-Richtung einigermaßen feststeht, ist es Zeit, die Daten in Figma zu übertragen. Die Schritte finden Sie unten.

1. Das mit FigmaMake generierte Design wird zunächst als Webseite veröffentlicht.
2. Starten Sie das Figma-Plugin "Html to Design".
3. Geben Sie die URL der veröffentlichten FigmaMake ein und führen Sie den Import aus!

Verwenden Sie das Plugin "Html to Design". Kopieren Sie die URL der in FigmaMake veröffentlichten Seite und klicken Sie auf die Schaltfläche. Das war schon alles – die Webseite wird in Figma-Ebenen umgewandelt. Die Welt ist wirklich bequem geworden...

FigmaMake veröffentlichen

Veröffentlichen Sie zuerst FigmaMake. Wenn Sie auf "Veröffentlichen" klicken, ändert sich der Status in "Veröffentlicht".

Starten Sie das Figma-Plugin "Html to Design", geben Sie die URL der veröffentlichten FigmaMake ein und führen Sie den Import aus!

Starten Sie das Plugin und fügen Sie die soeben erhaltene URL ein. Klicken Sie dann auf die Schaltfläche "Importieren", um den Vorgang abzuschließen!

Nach einigen Minuten wird das exportierte Design in Figma angezeigt.

Abschließend den veröffentlichten Status aufheben

Nachdem Sie alle Schritte abgeschlossen haben, heben Sie die Veröffentlichung auf, um den privaten Status wiederherzustellen.

Bedenken

Da derzeit Funktionen wie Passwortschutz für den öffentlichen Status oder das Erstellen von Entwicklungsumgebungen nicht verfügbar sind, ist Vorsicht erforderlich, wenn Sie dieses Tool für Website-Überarbeitungen von Unternehmen verwenden, um Datenlecks und ähnliche Probleme zu vermeiden.

Grundsätzlich sollte es keine Auswirkungen haben, wenn Sie nur mit firmeneigenen Inhalten oder mit Dummy-Informationen als Vorlage arbeiten. Ich würde empfehlen, je nach Projekt die richtige Methode zu wählen (bitte verwenden Sie diese absolut nicht für Projekte, die extern nicht freigegeben werden dürfen).

Sehr gut, das sieht ja schon viel besser aus! Jetzt komme ich ins Spiel – Figma ist mein Revier! Danke der Geduld, Partner!

SCHRITT 7: [Figma-Anpassung] Letzte Feinabstimmungen von Layout-Problemen usw. (30 Minuten)

Die gerade importierten Daten sind noch sehr grob. Es gibt geheimnisvolle Gruppierungen, Textfelder, die herausspringen – überall gibt es Verbesserungspotenzial.

Von hier an geht es um akribische, detaillierte Optimierungsarbeit. Auto-Layout neu anwenden, verstreute Elemente zu Komponenten zusammenfassen, Abstände im Gesamtlayout justieren … Diese zusätzliche Sorgfalt hebt die Designqualität erheblich und verwandelt das Ergebnis in eine echte, solide Grundlage.

Hier ist das fertige Ergebnis

Wenn ich weiter unten auf der LP scrolle, wird die Design-Granularität niedriger – ist das eine unvermeidliche Eigenschaft von AI oder liegt es an meinen Eingabeaufforderungen...? Ich werde weiterhin verschiedene Versuche anstellen und optimieren.

Importieren, ja... Hmm, das Layout wirkt lebendiger als erwartet und springt da rum! Naja, das ist das Ergebnis von KI-Arbeit. Jetzt wird es meine Aufgabe sein, das Ganze schön aufzuräumen – da zeige ich meine Liebe zum Detail.

Fazit: Die wichtigsten Erkenntnisse zum „KI-Kollaborationsdesign" aus unserer praktischen Erfahrung

Was ich in diesem Produktionsprozess erfahren habe, ist, dass AI nicht ein „Zauberstab" ist, sondern ein „brillanter Partner".

• Massive Zeiteinsparungen beim Erstellen von Entwürfen: Deutlich schneller, als von Grund auf Strukturvorschläge zu durchdenken.
• Trial and Error ist der Schlüssel: Um gutes Design zu schaffen, braucht es Ausdauer beim wiederholten Dialog mit KI.
• Am Ende zählt die menschliche Hand: Die von KI erstellten Arbeiten dürfen nicht blind übernommen werden – Designer müssen mit Absicht den Schliff geben, um die Qualität zu sichern.

Apropos: Als ich diesen Entwurf dem Geschäftsführer zögerlich zeigte... „Oh, interessant! Das macht es viel leichter, das Gespräch voranzutreiben! Ein Entwurf als Ausgangspunkt macht einen großen Unterschied – danke dir dafür!" So seine Reaktion.

Ja! Die ganze Mühe hat sich gelohnt…! Heute Abend schmeckt das Bier großartig!

Damit endet der erste Teil! Den tatsächlichen Landingpage-Bereich werden wir nach den Anmerkungen des Geschäftsführers überarbeiten und anschließend als [[zweiter Teil]] veröffentlichen!

Warum probieren Sie nicht auch neue Designerstellung durch die Zusammenarbeit mit KI aus?