【Figma Make nutzen und umsetzen: Teil 2】Figma Make und Gemini – mehr als 3 Stunden Arbeit! Vom LP-Rohenttwurf bis zur fertigen Webdesign – der Weg mit den produktiven Anmerkungen des vielbeschäftigten CEOs

Dieser Artikel wurde ursprünglich während der LP-Konstruktion im vergangenen Jahr geschrieben. Obwohl es sich um einen Artikel aus dieser Zeit handelt, hat sich die KI rasant weiterentwickelt, und mit der Veröffentlichung heute ist der Inhalt leider bereits veraltet…. Die Geschwindigkeit des KI-Fortschritts ist wirklich beeindruckend. Wenn man bedenkt, dass sich 2026 noch weiter beschleunigen wird, müssen Designer wirklich Schritt halten und sich informieren, um nicht den Anschluss zu verlieren…. Das ist wirklich erstaunlich. Mit Figma Make und Gemini 3 sind heute noch mehr Möglichkeiten entstanden. Bitte betrachten Sie diesen Artikel als das Tagebuch eines Designers, der zwar KI einsetzt, sich aber auch von ihrer rasanten Entwicklung überrumpelt fühlt. Und an den hinzugefügten Stellen fügen wir solche Ergänzungstexte (oder sagen wir mal: Anmerkungen) ein, damit Sie sie als Sekundenkanal genießen können.

Hallo!

Mein Name ist Hasshi, ich bin UI-Designer bei Liberogic.

Im vorherigen Artikel berichtete ich stolz davon, dass ich mit Figma Make und Gemini in 3 Stunden einen LP-Rohenttwurf erstellt habe!

Dies ist das Ergebnis aus dem vorherigen Artikel.

Den vorherigen Artikel finden Sie hier.

【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

https://www.liberogic.jp/topics/20250723-figmamake/

Dieser Artikel ist die Fortsetzung.

Nach meinem Bericht an den Geschäftsführer war ich in gehobener Stimmung.

Damit können wir selbst auf die verrücktesten Anforderungen des Geschäftsführers blitzschnell reagieren!

Bei dieser Qualität in nur 3 Stunden kann man nicht meckern!

„……Es gab mal eine Zeit, in der ich auch so gedacht habe. Haha"

Dieses Mal war es das Danach, das ich voller Zuversicht dem Geschäftsführer eingereicht hatte

Wir präsentieren Ihnen „Die Korrektur aus der Hölle"⭐️･:*+.\\(( °ω° ))/.:+✨

Um es zusammenzufassen:

Das schöne Layout, das in Figma erstellt wurde, verschwand spurlos aufgrund der Kommentare des Geschäftsführers.

Ich denke, das wird auch heute noch passieren, da die KI voranschreitet.

Lernpunkt dieser Erfahrung: FigmaMake ist unschlagbar für „Dashboards und Wireframes", aber möglicherweise noch nicht reif für „emotional ansprechende Landingpages".

Die kürzliche Entwicklung der AI geht schnell voran, und die heutige AI lässt sich auf vielfältigere Weise nutzen. Das ist wirklich beeindruckend!

Präsentation des Geschäftsführers: Die Mauer der Vaguheit „Machen Sie es einfach schöner"

Das einigermaßen sauber gestaltete SaaS-ähnliche LP-Konzept, das ich beim letzten Mal erstellt hatte. Ich habe es dem Geschäftsführer mit großer Zuversicht gezeigt.

„Chef! Ich habe den Entwurf für die LP, die wir besprochen haben, mit KI-Unterstützung blitzschnell erstellt! Wie sieht es mit dieser Struktur aus?"

Oh, das ging ja schnell. (Schaut auf den Bildschirm) ...Hmm, aber es wirkt irgendwie steif.

Zu steif? (Naja, bei einem B2B-Service ist Vertrauen wichtig, da ist eine solch strukturierte Herangehensweise eher…)

Könnten wir das nicht mehr so gestalten, dass es Aufregung auslöst – mit einem richtigen Wow-Effekt und knackig und flüssig wirkt? Und hier, mach hier noch mehr Bewegung rein, das soll stylish aussehen und richtig aufgehübscht wirken

Da ist es. Die Geheimwaffe: „einfach gut aussehen lassen".

Das ist die Anweisung, die alle Designer am meisten fürchten und die AI am wenigsten verstehen kann – Platz 1 der Liste.

Ich höre oft Sätze wie „das wirkt gut" oder „das sieht etwas gehetzt aus". Man muss lernen, zwischen den Zeilen zu lesen und die tiefere Bedeutung hinter den Worten zu verstehen. Designer müssen heutzutage auch ihre Kommunikationsfähigkeiten unter Beweis stellen. Für jemanden wie mich, der Schwierigkeiten hat, mit Menschen zu sprechen und oft unbedarft wirkt, ist das eine große Herausforderung – jeden Tag ist wie eine Trainingseinheit. (Hätte ich gewusst, dass Kommunikationsfähigkeiten so wichtig für Designer sind, hätte ich mich schon als Kind darin üben sollen. Ach je.)

Bei Kundenaufträgen würde man an dieser Stelle tiefer in die unbewussten Motivationen und Wünsche des Kunden eindringen, aber da der CEO stark eingebunden ist, ist es schwierig, ausreichend Zeit für solche Gespräche zu finden.

Aufgrund der Beziehung zwischen Geschäftsführer und Mitarbeitern kann es manchmal vorkommen, dass dies zu vag bleibt und die Anforderungen und Anfragen zu oberflächlich werden.

Und dann beginnt die Phase, in der das Team die Aussagen des beschäftigten Geschäftsführers gemeinsam analysiert und neu interpretiert.

Das ist eine Ausrede. Das war nur meine Ausrede. Wirklich.

Innere Gedanken (Was bedeutet „irgendwie gut"!? Selbst Gemini-Sensei kann das nicht vollständig erfassen! Bitte hört auf, Änderungsanweisungen nur mit Onomatopoetika wie „Boom" und „Zing" zu geben!?)

Dieses Gefühl hat sich bis heute nicht geändert

Figma Make vs. die strengen Kommentare des Geschäftsführers

Das war dann der eigentliche Kampf.

Wir arbeiten daran, die vagen Vorstellungen des CEOs zu konkretisieren, indem wir die in Figma erstellte Basis mit Korrektionen versehen, aber…

Hier zeigen sich Inkompatibilitäten zwischen den Werkzeugen.

Das, was FigmaMake generiert, ist letztendlich ein „logisch korrektes Web-Layout". Eine ordentlich strukturierte Boxanordnung, die mit Auto Layout streng aufgebaut ist.

Das ist wieder eine beeindruckende Seite der KI-Entwicklung. Wenn ich heute den gleichen Prompt verwende, ist die Präzision deutlich besser. Man merkt wirklich den Fortschritt der KI (ich habe ein Referenzbild unten angehängt).

Es ist schön anzuschauen und lehrreich, und als Vorlagethema ist es benutzerfreundlich.

Doch der Wunsch des Geschäftsführers war

"Wie wäre es, wenn wir Texturen im Hintergrund verstreuen!!„Lass die Elemente über den Rahmen hinausragen!"„Versuch doch mal, schiefe Schnitte einzubauen?"

nur emotionale Verzierungen, die Logik ignorieren.

Jedes Mal, wenn ich dekorative Bilder in die von Figma generierten Daten zwinge, schreit Auto Layout auf und das gesamte Layout wird chaotisch durcheinander.

Gedanken im Kopf (Aaah! Wenn ich dieses Hintergrundbild einfüge, rutscht der gesamte Bereich darunter nach unten! FigmaMake-kun, das ist nicht deine Schuld, du machst alles richtig. Es ist nur so, dass ich die Anforderungen des Geschäftsführers noch nicht vollständig erfüllen kann…!)

Die Sinnlosigkeit, am Ende alles manuell neu erstellen zu müssen

"Hier muss der Abstand verringert werden!""Der Button sollte mehr Bewegung haben!"

Um mit den zahlreichen kritischen Anmerkungen (roten Markierungen) Schritt zu halten, musste ich widerwillig das von FigmaMake erstellte Auto Layout deaktivieren, die generierten Komponenten zerlegen und sie manuell neu anordnen.

Einige Stunden später. Was auf dem Bildschirm blieb, war ein völlig anderes Designdokument, von dem kein Hauch von FigmaMake mehr zu sehen war.

Und hier ist der überarbeitete erste Entwurf. Das Design unterschied sich völlig vom ursprünglichen Entwurf.

Außerdem haben alle vorhandenen Elemente Auto Layout aktiviert, aber wenn ich sie von FigmaMake nach Figma kopiere, wird das Auto Layout irgendwie in einigen Bereichen deaktiviert, und ich muss das Auto Layout erneut konfigurieren und ähnliche Arbeiten erledigen.

Bevor ich es merkte, hatte die Überarbeitung erheblich viel Zeit in Anspruch genommen.

Innere Gedanken (Moment? Das ... wäre es nicht schneller gewesen, das von Anfang an manuell in Photoshop oder Figma zu machen? Was war mit meinen großartigen 3 Stunden?)

Als mir in der Tiefe der Nacht im Büro diese Tatsache bewusst wurde, überkam mich ein Gefühl der Leere. Und es war mein Senior, der mir einen Energy Drink gab.

Senior: "Ich bin mit meiner Arbeit fertig und gehe nach Hause!!"

Der Senior geht flott davon. Du wirst mir also nicht helfen?

Fazit: Stärken und Schwächen von FigmaMake

Durch diese schwierige Fehlerbehebung habe ich die Charakteristiken von FigmaMake besser verstanden.

Wenn man es falsch einsetzt, erhöht sich der Aufwand für die Korrekturen sogar.

✅ Wofür FigmaMake sehr gut geeignet ist (= schnell fertiggestellt)

• Admin-Oberflächen, Dashboards, App-Screens usw.
  • Für ordentliche Grid-Layouts, Formulare und Tabellen ist es unschlagbar.
  • Da es "logische Strukturen" im Handumdrehen erstellt, entstehen Ergebnisse von solch hoher Qualität für SaaS-Admin-Oberflächen usw., dass man sie direkt verwenden könnte (natürlich sind noch Nachbearbeitungen erforderlich).
• Initiale Wireframes und Strukturvorschläge
  • In der Phase "Überprüfung von zu vielen oder zu wenigen Elementen" kann man es auch für Landingpages nutzen (solange das Design noch nicht ausgearbeitet ist).
  • Auch bei der Festlegung von Anforderungen ist es äußerst praktisch, da man verschiedene Muster erstellen kann.
  • Wenn ich Kundenanforderungen verbalisiere, diese gleich vor Ort umsetzt und dann zum Abgleich von Vorstellungen nutze, hat sich das als äußerst wertvoll erwiesen.

❌ Was FigmaMake nicht gut kann (= manuelle Arbeit erforderlich)

• Visuelle Gestaltung von LP (Landing Page)
  • "Ich bin noch nicht so geschickt darin, durch "subtile Details" und "dekorative Elemente" zu beeindrucken"
  • Was entsteht, ist letztendlich eine übersichtliche und benutzerfreundliche UI. Zwar sind auch Dekorationen wie Farbverläufe und Muster möglich, aber ohne präzise Anweisungen kann das Ergebnis schnell wie eine Gestaltung aus dem Jahrzehnt 2010er wirken.
  • Um die Genauigkeit von Prompts bei der Designerstellung zu verbessern, ist Zeit erforderlich.
• Umsetzung des vagen Nuancenausdrucks „gutes Gefühl"
  • Hier ist noch die Übersetzungsfähigkeit eines menschlichen Designers erforderlich.
  • Mit etwas Übung im Umgang mit Prompts sollte es möglich sein, präzisere Anweisungen zu geben und reibungslos Ergebnisse zu erstellen (ich bin dafür noch nicht bereit)

Fazit: Trotzdem war es als „Grundlage zur Diskussion" hervorragend

Daher war es schwierig, die Rohdaten aus Figma einfach so für die Erstellung der Landingpage basierend auf den mehrdeutigen Anweisungen des CEO zu verwenden.

Wie in meinem letzten Artikel beschrieben, war es jedoch definitiv hilfreich für den Punkt **„Vom leeren Blatt aus in drei Stunden eine erste Form zu schaffen und die Anforderungen des Geschäftsführers hervorzubringen"**. Zuvor hatte ich dort erheblich viel Zeit aufgewendet und es hat lange gedauert, bis der Arbeitsprozess voranging.

"Anforderungen wie „etwas Großes und Knackiges" sind Feedback, das nur durch eine vorhandene Grundlage entstehen konnte", wissen Sie (positives Denken).

Diese Lektion

• FigmaMake ist der Profi für „Struktur"-Erstellung.
• "Dekoration ist eine Gelegenheit für Designer, ihre Fähigkeiten unter Beweis zu stellen."
• Es gibt noch keine KI, die auf das „gute Gefühl" des CEO reagieren kann.

Beim nächsten Mal möchte ich mit „UI-Überarbeitung des internen Verwaltungstools" in Figma Make einen neuen Anlauf nehmen – unbelehrbar wie ich bin. (Mit einem Admin-Panel… mit einem Admin-Panel werde ich bestimmt glänzen…!)

Die Designkorrektionen der Landing Page sind …

Ja, wir werden weiterhin fleißig mit Handarbeit vorangehen!

Zur Entwicklung von AI: Hier sehen Sie das Design, das mit demselben Prompt wie in der ersten Folge erstellt wurde.

Die Qualität der ersten Generierung ist in wenigen Monaten massiv gestiegen. Das ist wirklich beeindruckend.

Die Genauigkeit ist beängstigend in die Höhe geschossen. Auch ich möchte mich weiterhin intensiv dem Studium von Design widmen, um mit der Entwicklung von AI Schritt zu halten.

Und hier ist die neu fertiggestellte Website

Die LP selbst ist WCAG 2.2 AA konform, und
Lighthouse zeigt hohe Punktzahl (die Diagnose dauert zwar etwas, probieren Sie es aus! Manchmal gibt es volle Punktzahl!)
Und obendrein Multilinguale Unterstützung!
Lesen Sie auch diesen Artikel zur mehrsprachigen Unterstützung!
In letzter Zeit ist Browser-Übersetzung zwar weit verbreitet, aber es ist super praktisch, dass man automatisch und kostengünstig eine mehrsprachige Website ohne Umschaltung erhält!

Wie sieht es aus?
Ich denke, das Ergebnis ist sehr sauber geworden, nicht wahr🎵

Ich habe verschiedenes ausprobiert, aber ehrlich gesagt hat das Vorhandensein einer Grundlage den Arbeitsaufwand deutlich reduziert!! In der Vergangenheit haben wir viel Zeit in der WF-Phase aufgebracht, danach dann das Design umgesetzt und den Inhalt mehrmals angepasst – da wurde ein großer Aufwand zusammengespart. Beim nächsten Mal, wenn ich KI einsetze, werde ich vorher sorgfältig strukturierte Prompts generieren und dann starten. Zur Belohnung gibt's ein Bier.