[Creëren en benutten: FigmaMake, deel 2] Hoewel het met FigmaMake en Gemini niet in 3 uur klaar was! Van een LP-concept waarin de rode correcties van een drukke CEO snel verwerkt konden worden tot het voltooien van het webdesign

Dit artikel is geschreven tijdens de bouw van de LP vorig jaar. Hoewel het artikel uit die tijd stamt, gaat AI zo snel vooruit dat de inhoud inmiddels verouderd is... Het tempo van de AI-ontwikkeling is verbazingwekkend. Gezien hoe snel het in 2026 nog verder zal versnellen, zullen de manier waarop ontwerpers werken en het bijhouden van nieuwe informatie goed moeten meegroeien, anders dreigen we achterop te raken... Echt indrukwekkend. FigmaMake en Gemini 3 kunnen nu al veel meer. Ik hoop dat je dit artikel vooral ziet als het dagboek van een ontwerper die AI volop gebruikte en tegelijk worstelde om het tempo van de AI-ontwikkeling bij te houden, dus lees het gerust even door. De passages die ik heb toegevoegd, zijn voorzien van aanvullende opmerkingen (in feite commentaar), zodat je die als een soort commentaarspoor kunt volgen.

Hallo!

Ik ben Hasshi en werk als UI-designer bij Liberogic Inc.

In mijn vorige artikel meldde ik vol enthousiasme: "Met FigmaMake en Gemini heb ik in 3 uur een LP-concept gemaakt!"

Hier is het resultaat van vorige keer.

Bekijk eerst het vorige artikel hier.

Deel 1 van 'Maak en gebruik Figma Make': in drie uur tijd met Figma Make en Gemini een conceptlandingspagina bouwen. Een nieuwe, snelle webproductieworkflow die de drukke CEO helpt om sneller van feedback te voorzien

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

Dit artikel is het vervolg.

Na mijn update aan de CEO was ik lekker opgewekt.

Met dit resultaat kan ik zelfs de wildste verzoeken van de CEO razendsnel aan!

Als dit in drie uur al zo'n kwaliteit oplevert, kan niemand klagen, toch?

...Ooit dacht ik precies zo, hoor. 😅

Dit keer heb ik vol enthousiasme mijn werk aan de CEO gepresenteerd, en daarna...

Hier is deel "De hel van de revisies"⭐️･:*+.\(( °ω° ))/.:+✨

Kort gezegd:

Die mooie lay-out die ik met FigmaMake had gemaakt, verdween na de opmerking van de CEO volledig.

Ik denk dat dit ook nu, nu AI zich verder heeft ontwikkeld, nog steeds gebeurt.

Les van dit project: FigmaMake is het sterkst voor dashboards en wireframes, maar voor een LP vol sfeer is het misschien nog te vroeg...

De AI ontwikkelt zich razendsnel, en je kunt AI tegenwoordig op steeds meer manieren inzetten. Echt verrassend!

Presentatie aan de CEO: de muur van "maak het gewoon mooi"

Het eerdere, redelijk verzorgde landingspagina-concept in de stijl van een SaaS-product. Vol vertrouwen aan de CEO getoond.

Chef! Ik heb het eerste concept van de landingspagina razendsnel met AI gemaakt! Wat vindt u van de opzet?"

Oh, mooi dat het zo snel ging. (kijkt naar het scherm) ...Hmm, maar het voelt wel een beetje stijf aan.

Stijf? (Nee, voor een B2B-dienst waar vertrouwen belangrijk is, is dit juist een nette en ordelijke uitstraling...)

Kun je het wat spannender maken? Iets met impact, bam!, en wat strakker en moderner. En zet hier wat beweging in en versier het met wat "mooie" effecten.

En daar komt hij. Het onfeilbare "maak het gewoon mooi".

Het nummer één van instructies die alle ontwerpers het meest vrezen en die AI het minst begrijpt.

Er wordt vaak gezegd: "maak het mooi" of "maak het wat pittiger". Het is belangrijk om de betekenis achter die woorden te begrijpen. In deze tijd wordt van ontwerpers ook sociale vaardigheid verwacht. Voor mij, die niet goed is in communiceren en de sociale signalen mist, is dat een uitdaging. Elke dag is een training... (Als ontwerpers sociale vaardigheden nodig hebben, had ik al als kind veel harder moeten oefenen... helaas.)

Bij klantprojecten zouden we hier verder doorvragen naar de diepere wensen en behoeften van de klant, maar de directeur is druk bezet, waardoor er vaak geen tijd is voor een uitgebreid gesprek.

Doordat de directeur en de medewerkers in een hiërarchische verhouding staan, wordt er soms te weinig kritisch doorgevraagd, waardoor de opdracht vaag en onduidelijk kan blijven.

En dan breekt de fase aan waarin we de uitspraken van de drukke directeur samen opnieuw doorvlooien en uitwerken.

Dit is een smoesje. Gewoon mijn eigen excuus, echt waar.

Gedachten (Wat bedoel je met "lekker"?! Zelfs Gemini kan dat niet aflezen! Wil je alsjeblieft ophouden met feedback die alleen uit geluidswoorden bestaat, zoals "boem" en "zwiep"?!)

Dit gevoel is nog steeds hetzelfde

FigmaMake VS de meedogenloze opmerkingen van de directeur

Vanaf hier begon de echte strijd.

We probeerden het "lekker"-gevoel dat de directeur in zijn hoofd had te vertalen naar het ontwerp, en gingen daarvoor aan de slag met aanpassingen op de basis die we in FigmaMake hadden gemaakt...

Hier bleek dat de tools niet goed met elkaar samenwerkten.

FigmaMake genereert in feite alleen "een logisch correcte weblayout". Een nette doos die volledig is opgebouwd met Auto Layout.

Dit is wat AI zo indrukwekkend maakt. Als je nu dezelfde prompt gebruikt, zijn de resultaten een stuk beter. Het is duidelijk hoe snel AI vooruitgaat (een referentiebeeld heb ik hieronder toegevoegd).

Het is mooi en leerzaam, en als sjabloonthema is het goed bruikbaar.

Maar de wensen van de directeur zijn

"Zet er textuur op de achtergrond verspreid, toch!!" "Laat de elementen uit het kader steken." "Wat als we een schuine streep erdoor zetten?"

Zo gaat het steeds over emotionele versieringen die de logica negeren.

Elke keer dat ik decoratieve afbeeldingen in de gegenereerde FigmaMake-data forceer, begint Auto Layout te protesteren en loopt de hele layout scheef.

Innerlijke stem (Ah! Zodra ik die achtergrondafbeelding toevoeg, schuift ook de sectie eronder mee! FigmaMake, het is niet jouw schuld, je doet het goed. Alleen kun je de wensen van de directeur nog niet helemaal waarmaken...!)

De leegte van het uiteindelijk weer handmatig opnieuw bouwen

"Maak de witruimte hier wat krapper!" "Laat de knop wat meer wiebelen!"

Om de ene na de andere binnenkomende meedogenloze feedback (rode correcties) te verwerken, heb ik met tegenzin de Auto Layout die FigmaMake had gegenereerd losgemaakt, de gegenereerde componenten uit elkaar gehaald en ze handmatig opnieuw geplaatst.

Een paar uur later. Wat er op het scherm overbleef was een volledig ander ontwerpbestand, zonder een spoor van FigmaMake.

Hier is de eerste versie waarin ik allerlei aanpassingen heb gedaan. Het ontwerp is volledig anders geworden dan de eerste versie.

Bovendien hebben alle bestaande elementen wel Auto Layout, maar bij het kopiëren van FigmaMake naar Figma wordt de Auto Layout op sommige onderdelen om onverklaarbare redenen losgekoppeld, waardoor ik het opnieuw moet instellen.

Voordat ik het wist, was ik er veel tijd aan kwijt om alles bij te schaven.

Mijn innerlijke stem (Hè? Dit... had ik er vanaf het begin niet beter handmatig in Photoshop of Figma aan kunnen werken...? Waar waren mijn supersnelle drie uur dan voor...?)

Toen ik 's nachts op kantoor besefte wat er aan de hand was, voelde ik een diepe leegte. Gelukkig was het mijn senior die mij een energydrink gaf.

Senior: "Ik ben klaar met werken, ik ga naar huis!!"

Mijn senior vertrekt er vlot vandoor. Helpt u mij niet mee...?

Conclusie: de sterke en zwakke punten van FigmaMake

Na deze moeizame aanpassingen weten we nu hoe het hulpmiddel FigmaMake werkt.

Als je het op de verkeerde plek inzet, neemt het aanpassingswerk juist toe.

✅ Waar FigmaMake goed in is (= razendsnel klaar)

• Beheerpanelen, dashboard-UI's, app-schermen en vergelijkbare interfaces
  • Overzichtelijke rasterlay-outs, formulieren en tabellen worden er uitstekend mee gemaakt.
  • Omdat het in één keer een "logische structuur" opbouwt, ontstaat er vaak een resultaat waarvan je denkt: kan dit zo voor een SaaS-beheerpaneel gebruikt worden? (Handmatige nabewerking blijft uiteraard noodzakelijk.)
• Vroege wireframes en structuurvoorstellen
  • Voor de fase waarin je controleert of alle elementen compleet zijn, werkt het ook voor landingspagina's prima (zolang je het ontwerp nog niet uitgebreid afwerkt).
  • Daarnaast is het erg handig bij het verfijnen van vereisten, omdat je snel allerlei varianten kunt maken.
  • Wanneer je wensen van een klant onder woorden brengt en die direct vormgeeft om de verwachtingen op één lijn te krijgen, is het bijzonder nuttig gebleken.

❌ Waar FigmaMake slecht in is (handmatig werk vereist)

• Het uitwerken van de visuele details van landingspagina's (LP's)
  • Ontwerpen die het moeten hebben van accenten en decoratieve elementen, zijn nog lastig
  • Wat wordt gegenereerd, is in de eerste plaats een overzichtelijke en gebruiksvriendelijke UI. Verloopkleuren en patronen zijn ook mogelijk, maar zonder duidelijke instructies kan het resultaat al snel doen denken aan het ontwerp van rond 2010.
  • Om de nauwkeurigheid van prompts bij het maken van ontwerpen te verbeteren, is tijd nodig.
• Vertalen van een vage wens als "net iets wat goed voelt" naar concreet ontwerp
  • Hier is nog steeds het vertaalvermogen van een menselijke ontwerper nodig.
  • Naarmate je prompts beter onder de knie hebt, lukt het waarschijnlijk om met preciezere instructies soepeler te werken (dat kan ik nog niet, helaas)

Samenvattend: als ruwe eerste versie was het toch goed bruikbaar

Kortom: voor een landingspagina die gebaseerd is op de vage instructies van de directeur was het moeilijk om de gegenereerde FigmaMake-data zonder meer te gebruiken.

That said, as I wrote in the previous article, it definitely helped in terms of "getting something rough together in 3 hours from a blank slate and drawing out what the CEO wants." Before, I used to spend quite a lot of time on that part, which slowed down the start of the actual work.

The request for "something bold and sleek" also came up precisely because there was a rough draft to react to (positive thinking, as they say).

Key takeaways

• Figma Make is a pro at building the "structure."
• "Decoration (ashirai)" is where a designer's skill really shows.
• AI can't yet respond to the CEO's "that vibe, just right."

Next time, undeterred, I want to take another shot at Figma Make with a "UI redesign of an internal admin tool." (An admin screen... surely an admin screen is where it can shine...!)

As for the LP design revisions......

Right, I'll keep grinding away by hand from here on!

As for the evolution of AI... Here is the design generated with the same prompt I used for the first article.

Na een paar maanden is de kwaliteit van de eerste generatie enorm verbeterd. Dat is best verbazingwekkend.

De precisie is zo sterk verbeterd dat het bijna een beetje griezelig is. Ik wil dagelijks blijven studeren op ontwerp, zodat ik de ontwikkeling van AI bij kan houden.

En hier is de website die we nu hebben afgerond.

De landingspagina zelf voldoet ook aan WCAG 2.2 AA, en
Lighthouse scoort er hoog op (de diagnose duurt even, maar probeer het eens! Soms haalt het zelfs een perfecte score!)
Bovendien wordt er op een onverwachte manier automatisch meertalige ondersteuning toegevoegd!
Lees ook dit artikel over meertalige ondersteuning voor meer informatie!
Hoewel browservertalingen tegenwoordig de standaard zijn, is het erg handig dat je zonder te schakelen snel en voordelig een vertaalde site kunt maken!

Wat denken jullie?
Het ziet er toch best mooi uit? 🎵

Ik heb er allerlei dingen over geschreven, maar ik heb echt het gevoel dat we dankzij het ruwe concept flink wat werk hebben bespaard!! Vroeger besteedden we in de wireframe-fase al veel tijd aan, en daarna nog meer aan het omzetten naar het ontwerp en het aanpassen van de inhoud. Dat werk is nu aanzienlijk verminderd. De volgende keer dat ik AI gebruik, ga ik eerst een goede prompt opstellen voordat ik eraan begin. En als beloning een biertje.