[Gemacht und genutzt – Teil 2: Figma Make] Mit FigmaMake und Gemini war es in drei Stunden nicht getan! Vom Entwurf einer Landingpage mit Korrekturen des vielbeschäftigten Präsidenten bis zur fertigen Webdesign-Gestaltung

Dieser Artikel wurde im vergangenen Jahr beim Aufbau der Landingpage verfasst. Der Artikel stammt zwar aus dieser Zeit, aber da sich KI so schnell weiterentwickelt, ist der Inhalt inzwischen veraltet ... Es ist erstaunlich, wie schnell die Fortschritte bei KI voranschreiten. Wenn man bedenkt, dass sich dieser Trend 2026 noch weiter beschleunigen wird, befürchte ich, dass Designer mit ihrer Arbeitsweise und dem Auf-dem-Laufenden-Bleiben kaum noch Schritt halten können ... Wirklich beeindruckend. Mit FigmaMake und Gemini 3 lässt sich heute schon noch viel mehr erreichen. Betrachten Sie diesen Artikel bitte als Tagebuch eines Designers, der KI nutzt und sich gleichzeitig an deren rasante Entwicklung anpassen muss, und lesen Sie ihn gern nur überflogen. Die ergänzten Stellen sind außerdem mit erläuternden Anmerkungen (im Grunde Randbemerkungen) versehen. Genießen Sie diese als eine Art Kommentarspur.

Hallo!

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

Im letzten Artikel berichtete ich begeistert, dass ich mit FigmaMake und Gemini in drei Stunden einen Entwurf für eine Landingpage erstellt hatte.

Hier ist das Ergebnis aus dem letzten Mal.

Den vorherigen Artikel finden Sie hier.

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

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

Dies ist der zweite Teil.

Nachdem ich dem Chef Bericht erstattet hatte, war ich richtig gut gelaunt.

Damit kann ich auch auf die spontanen Wünsche des Chefs blitzschnell reagieren!

Bei dieser Qualität nach nur drei Stunden kann sich doch niemand beschweren, oder?

... Ja, ich habe mir auch mal eingebildet, dass das so funktioniert. 笑

Diesmal geht es um das, was passiert ist, nachdem ich mit großer Zuversicht meine Arbeit beim Chef eingereicht hatte.

Hier kommt „Die Hölle der Überarbeitung“ ⭐️･:*+.\(( °ω° ))/.:+✨

Um es direkt zu sagen:

Das schicke Layout, das ich mit FigmaMake erstellt hatte, war nach kurzen Kommentaren des Chefs spurlos verschwunden.

Ich denke, das passiert auch heute, wo KI schon so weit fortgeschritten ist, immer noch.

Die Lehre aus diesem Projekt: FigmaMake ist für Dashboards und Wireframes unschlagbar, aber für emotionale Landingpages vielleicht noch nicht ganz so weit ...

Das Tempo der KI-Entwicklung ist enorm, und KI lässt sich inzwischen auf so viele verschiedene Weisen nutzen. Verrückt, oder?

Präsentation beim Chef: Die Wand namens „Mach es irgendwie gut“

Der vorherige Landingpage-Entwurf im SaaS-Stil war ganz ordentlich. Ich habe ihn dem Chef selbstbewusst gezeigt.

Chef! Den Entwurf für die Landingpage habe ich mit KI blitzschnell erstellt! So könnte der Aufbau aussehen. Was meinen Sie?“

Oh, das ging schnell. (Während er auf den Bildschirm schaut) ... Hmm, irgendwie wirkt das steif.

Steif? (Nein, für einen B2B-Dienst, bei dem Vertrauen wichtig ist, sollte es doch eher so geordnet sein ...)

Kann es nicht etwas aufregender sein? Mit richtigem Wow-Effekt, flott und schick! Und hier bitte noch mehr Bewegung rein und das Ganze mit viel Schnickschnack auf „irgendwie gut“ trimmen.

Und schon kommt der Knaller: „Mach es irgendwie gut.“

Die Anweisung, vor der sich jeder Designer am meisten fürchtet und die die KI am wenigsten versteht, auf Platz eins.

Man hört oft „irgendwie gut“ oder „irgendwie nach Hand gemacht“. Wichtig ist, die Bedeutung hinter diesen Worten zu erkennen. Ein Designer muss heute auch seine Kommunikationsfähigkeit unter Beweis stellen. Für mich, der in Gesprächen wenig Feingefühl zeigt und oft aneckt, ist das eine tägliche Übung ... (Wenn Designer schon Kommunikationsfähigkeit brauchen, hätte ich in meiner Kindheit mehr trainieren sollen ... Ach, na ja.)

Bei Kundenprojekten vertiefen wir hier weiter die tieferliegenden Bedürfnisse und Wünsche des Kunden, doch der Geschäftsführer ist sehr eingespannt und findet kaum Zeit für ein ausführliches Gespräch.

Da zwischen Geschäftsführer und Mitarbeitenden ein Verhältnis besteht, in dem man nicht so genau hinschaut, kommt es manchmal vor, dass Begriffe und Aufträge eher oberflächlich ausfallen.

Und dann beginnt die Phase, in der wir gemeinsam die Aussagen des vielbeschäftigten Geschäftsführers durchkauen und neu zusammensetzen.

Das ist eine Ausrede, das weiß ich. Es war nur meine eigene Ausrede. Wirklich.

Innere Stimme (Was soll denn „eine gute Richtung“ heißen?! Selbst Gemini-Sensei kann das nicht herauslesen! Könnten Sie bitte aufhören, nur mit Lautmalereien wie „Dong“ und „Schwupp“ Korrekturen anzuweisen?!)

Dieses Gefühl hat sich bis heute nicht verändert.

FigmaMake VS. die Kommentare des Geschäftsführers

Ab hier begann der eigentliche Kampf.

Um die Vorstellung von „einer guten Richtung“, die im Kopf des Geschäftsführers existiert, zu verwirklichen, nehmen wir Korrekturen an der mit FigmaMake erstellten Basis vor, doch ...

Hier zeigt sich, dass die Werkzeuge nicht zueinander passen und zum Problem werden.

FigmaMake generiert letztlich nur ein „logisch korrektes Web-Layout“. Ein sauber strukturierter Kasten, vollständig mit Auto Layout (automatischem Layout) aufgebaut.

Das ist eben das Beeindruckende an der Weiterentwicklung der KI. Wenn man heute denselben Prompt erneut ausführt, fallen die Ergebnisse deutlich besser aus. Man spürt den Fortschritt der KI deutlich (ein Referenzbild habe ich unten angehängt).

Die Gestaltung ist ansprechend und lehrreich, und als Vorlage für ein Theme lässt es sich gut verwenden.

Doch die Wünsche des Geschäftsführers lauten:

„Im Hintergrund noch ein paar Texturen verteilen, oder?!“ „Lass die Elemente doch über den Rahmen hinausragen.“ „Wie wäre es, wenn wir schräge Schlitze einfügen?“

Und so geht es weiter mit emotionalen Verzierungen, die jede logische Struktur ignorieren.

Jedes Mal, wenn ich die FigmaMake-Daten mit dekorativen Bildern überfrachte, beginnt das Auto Layout zu protestieren, und das gesamte Layout gerät ins Wanken.

Innere Stimme (Oh nein! Kaum habe ich das Hintergrundbild eingefügt, verrutscht schon der Abschnitt darunter! FigmaMake, du kannst nichts dafür, du hast alles richtig gemacht. Nur die Wünsche des Geschäftsführers kannst du noch nicht ganz erfüllen …!)

Am Ende die ernüchternde Erkenntnis, alles per Hand neu bauen zu müssen

„Hier bitte die Abstände enger!“ „Die Buttons sollen noch mehr wackeln!“

Um die ständig eintreffenden Korrekturen mit roten Anmerkungen zu bewältigen, musste ich schweren Herzens das Auto Layout aufheben, die generierten Komponenten auflösen und sie manuell neu anordnen, die FigmaMake für mich erstellt hatte.

Ein paar Stunden später blieb etwas übrig, das keine Spur mehr von FigmaMake enthielt – ein völlig anderer Designdatensatz.

Und hier ist der erste Entwurf, nachdem ich viele Änderungen vorgenommen habe. Das Design unterscheidet sich völlig vom ersten Entwurf.

Dabei ist bei allen bestehenden Elementen zwar Auto Layout angewendet, aber beim Kopieren von FigmaMake nach Figma wird das Auto Layout bei manchen Teilen aus unerklärlichen Gründen wieder aufgehoben, sodass es erneut angewendet werden muss.

Am Ende hatte ich mit den Nacharbeiten erheblich viel Zeit verloren.

Innere Stimme (Moment mal… Hätte ich das nicht von Anfang an schneller manuell in Photoshop oder Figma machen können…? Was war dann eigentlich mit meinen superschnellen drei Stunden…?)

Im nächtlichen Büro, als mir diese Erkenntnis kam, war die Leere grenzenlos. Und mir, die ich so dastand, reichte dann ausgerechnet mein Vorgesetzter einen Energydrink.

Vorgesetzter: "Ich bin mit meiner Arbeit fertig, ich gehe jetzt!!"

Mit einem Schwung verschwand der Vorgesetzte. Mithelfen wollte er also nicht...

Fazit: Die Stärken und Schwächen von FigmaMake

Nach der Fehlerbehebung dieses Mal habe ich die Eigenschaften des Tools FigmaMake verstanden.

Wird es am falschen Ort eingesetzt, steigt der Korrekturaufwand sogar noch an.

✅ Wofür sich FigmaMake gut eignet (= blitzschnell erledigt)

• Admin-Oberflächen, Dashboard-UIs und App-Bildschirme
  • Saubere Rastersysteme, Formulare und Tabellen gelingen hervorragend.
  • Da es eine „logische Struktur“ im Handumdrehen erstellt, entstehen Ergebnisse, bei denen man sich fragt, ob sich etwa SaaS-Admin-Oberflächen direkt so verwenden lassen könnten (Nacharbeit ist natürlich trotzdem unverzichtbar).
• Frühe Drahtgittermodelle und Strukturentwürfe
  • Für die Phase, in der man prüft, ob Elemente fehlen oder überflüssig sind, eignet sich das Tool auch für Landingpages gut (solange man noch nicht ins Detail des Designs geht).
  • Außerdem ist es sehr praktisch, wenn man Anforderungen präzisiert, da sich damit viele unterschiedliche Varianten erstellen lassen.
  • Wenn es darum geht, Kundenwünsche in Worte zu fassen, sie sofort sichtbar zu machen und die Vorstellungen abzugleichen, hat sich das Tool für mich als sehr hilfreich erwiesen.

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

• Die aufwendige visuelle Gestaltung von Landingpages
  • Designs, die mit dekorativen Elementen und Akzenten wirken, gelingen ihm noch nicht gut.
  • Generiert wird im Kern eine aufgeräumte, gut benutzbare Oberfläche. Auch Verläufe und Muster als Gestaltungselemente sind möglich, doch ohne präzise Vorgaben wirkt das Ergebnis schnell wie aus den frühen 2010er-Jahren.
  • Um die Präzision der Prompts beim Gestalten zu verbessern, braucht es Zeit.
• Die Umsetzung vager Vorstellungen wie „irgendwie gut“ in konkrete Gestaltung
  • Hier wird weiterhin die Übersetzungsleistung eines menschlichen Designers benötigt.
  • Wer Prompts eine Weile intensiv nutzt, dürfte mit präziseren Anweisungen deutlich reibungsloser arbeiten können (bei mir hat das noch nicht geklappt).

Fazit: Als Ausgangsbasis für einen Entwurf war es trotzdem gut geeignet.

Daher war es bei einer Landingpage, die auf den vagen Vorgaben des Geschäftsführers beruhte, schwierig, die von FigmaMake generierten Daten direkt zu verwenden.

Allerdings hat es sich, wie im vorherigen Artikel beschrieben, **"in drei Stunden aus einem leeren Blatt eine erste Fassung zu erstellen, mit der sich die Wünsche des Präsidenten herausarbeiten lassen"** als wirklich hilfreich erwiesen. Früher hat die Erstellung dieser Grundlage jedoch viel Zeit gekostet und den Arbeitsfortschritt deutlich verzögert.

Der Wunsch nach "Wumm und Schwung" ist ja erst entstanden, weil es einen Entwurf gab (positiv gedacht).

Erkenntnisse aus diesem Projekt

• FigmaMake ist ein Profi für Struktur.
• Dekoration (Ashirai) ist die Domäne des Designers.
• Eine KI, die auf das "Passt schon so" des Präsidenten eingehen kann, gibt es noch nicht.

Beim nächsten Mal wage ich trotzdem einen neuen Versuch mit FigmaMake: Ich möchte das "Redesign der UI für das interne Verwaltungstool" angehen. (Bei einer Admin-Oberfläche... da könnte es doch klappen...!)

Die Designkorrekturen für die Landingpage ... naja.

Ja, ich werde auch künftig fleißig und Schritt für Schritt von Hand weiterarbeiten!

Und was die Entwicklung der KI betrifft ... Hier ist das Design, das mit demselben Prompt wie beim Artikel des ersten Teils generiert wurde.

Die Qualität der Erstgenerierung hat sich in wenigen Monaten enorm verbessert. Das ist ziemlich beeindruckend.

Die Genauigkeit hat sich enorm gesteigert, was schon etwas beängstigend ist. Ich möchte mich auch weiterhin täglich intensiv in Gestaltung einarbeiten, um mit der Entwicklung der KI Schritt zu halten.

Und hier ist die fertiggestellte Website:

Die Landingpage selbst entspricht WCAG 2.2 AA, und
der Lighthouse-Score ist hoch
(die Prüfung dauert etwas, aber probieren Sie sie gerne aus! Manchmal erreicht sie die volle Punktzahl!). Außerdem wird sie auf geheimnisvolle Weise automatisch mehrsprachig!
Den Artikel zur Mehrsprachigkeit finden Sie hier lohnt sich ebenfalls!
Browser-Übersetzung ist zwar heute weit verbreitet, aber eine Website, die ohne Umschalten automatisch und kostengünstig übersetzt wird, ist wirklich praktisch!

Was meinen Sie?
Finden Sie nicht, dass es sehr sauber geworden ist 🎵

Ich habe viel darüber geschrieben, aber ehrlich gesagt hat mir die Vorlage als Ausgangspunkt den Aufwand deutlich verringert!! Früher habe ich in der Wireframe-Phase viel Zeit investiert, und danach beim Übertragen ins Design und bei inhaltlichen Änderungen ging ebenfalls viel Aufwand drauf. Das konnte ich jetzt deutlich reduzieren. Beim nächsten Mal mit KI werde ich zuerst einen durchdachten Prompt erstellen, bevor ich loslege. Zur Belohnung ein Bier.