【Maak en gebruik Figma Make: deel twee】Hoewel we niet in 3 uur klaar waren met FigmaMake en Gemini! Van LP-ruwe versie tot volledig webdesign, inclusief de efficiënte rode markeringen van onze drukke directeur

Dit artikel is geschreven vorig jaar tijdens de LP-constructie. Hoewel het van die periode dateert, is de AI zo snel vooruitgegaan dat de inhoud nu verouderd lijkt... Het is verbazingwekkend hoe snel AI evolueert. Met 2026 die nog verder versnelt, moeten ontwerpers voortdurend bijblijven, anders raken we achterop... Ja, het is werkelijk indrukwekkend. Met de huidige Figma Make en Gemini 3 kunnen we nog veel meer doen. Beschouw dit artikel als een dagboek van een designer die AI gebruikt maar ook worstelt met de snelle evolutie ervan. Ik hoop dat u het oppervlakkig bekijkt. De aangevulde delen zijn voorzien van aanvullende opmerkingen (zeg maar kritische kanttekeningen) zoals deze, dus geniet ervan als extra geluidstrack.

Hallo!

Ik ben Hasshi, UI-ontwerper bij Liberogic.

In het vorige artikel meldde ik vol zelfvertrouwen dat ik met FigmaMake en Gemini in 3 uur een LP-ruwe versie had gemaakt!

Dit is het resultaat van de vorige keer.

Voor het vorige artikel, zie hier.

【Maak en pas FigmaMake toe: eerste deel】FigmaMake en Gemini in 3 uur! De roodgestelde versie van de drukke directeur wordt veel efficiënter met de landingspagina-basis die razendsnel ontstaat - een nieuw generatie webdesignproces

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

Dit artikel gaat over wat daarna gebeurde.

Na het rapport aan de directeur voelde ik me erg goed.

Met dit systeem kan ik zelfs de wildste verzoeken van de directeur heel snel afhandelen!

Drie uur voor dit kwaliteitsniveau – daar kan niemand over klagen!

...Er was een tijd dat ik zo dacht. Haha.

Dit keer brengen we je het verhaal dat volgde op mijn met vertrouwen ingediende ontwerp bij de directeur:

"De hel van correcties" ⭐️･:*+.\(( °ω° ))/.:+✨

Kort gezegd:

Die prachtige lay-out die ik in Figma had gemaakt, werd door de opmerkingen van de directeur volledig weggevaagd.

Dit gebeurt zelfs nu AI zich verder ontwikkelt, naar mijn mening.

Les van deze keer: Figma is ongeklooflijk voor "dashboards en wireframes," maar voor "emotioneel geladen landing pages" is het misschien nog te vroeg.

De snelheid van AI-evolutie tegenwoordig is indrukwekkend, en recente AI kan veel meer veelzijdig worden ingezet. Echt verbazingwekkend!

CEO-presentatie: de 'make it nice'-muur

Een behoorlijk goed uitgewerkte SaaS-achtige landingspagina die ik eerder had gemaakt. Ik liet het vol vertrouwen aan de CEO zien.

CEO! Ik heb de conceptversie van die LP met behulp van AI in recordtempo gemaakt! Wat vind je van deze structuur?

Ooh, snel gedaan. (terwijl hij naar het scherm kijkt) ... Hmm, maar het voelt een beetje stijf aan.

Stijf? (Nee toch, dit is een B2B-service die vertrouwen nodig heeft, en dit nette uiterlijk is toch het beste...)

Kan het niet meer... opwindend, laten zeggen, met meer impact en een strakker gevoel? En hier, voeg meer beweging toe en maak het 'op een fijne manier' meer versierd.

Daar is het. De dodelijke 'make it nice'-instructie.

Het meest gevreesde en door AI het minst begrepen instructietype van alle designers, op nummer één.

Je hoort vaak dingen als 'make it nice' of 'te druk' zeggen. Het is belangrijk om de diepere betekenis van die woorden te begrijpen. Designers moeten tegenwoordig ook communicatievaardigheden hebben. Voor iemand als ik, met moeite met communicatie en weinig inlevingsvermogen, is het dagelijks een oefening… (Had ik als ontwerper geweten dat communicatievaardigheden nodig waren, dan had ik dat al van jongs af aan geoefend. Jammer jammer.)

Bij clientprojecten graven we meestal dieper in op dit punt om de onderliggende wensen en behoeften beter te begrijpen, maar vanwege de drukke agenda van de directeur is het lastig om voldoende tijd voor interviews in te plannen.

Vanwege de relatie tussen directeur en medewerkers kan dit soms oppervlakkig worden afgehandeld, wat resulteert in vage terminologie en onnauwkeurige opdrachten.

Vervolgens gaan we naar de fase waarin we de uitspraken van de drukke directeur als team verwerken en herinterpretteren.

Dit is een excuus. Puur mijn excuus. Echt waar.

Mijn innerlijke stem (Wat betekent "aardig"!? Zelfs Gemini-sensei kan dat niet volledig interpreteren! En mag ik je vragen om niet meer alleen via geluidseffecten als "Boom" en "Whoosh" aanpassingen aan te geven!?)

Dit gevoel is tot nu toe niet veranderd

Figma Make versus de strenge opmerkingen van de directeur

Daar begon de echte strijd.

We probeerden om met Figma Make een basisontwerp te maken dat aansluit bij wat de directeur voor ogen had, en voerden vervolgens aanpassingen door, maar...

Daar toonde de compatibiliteit van het hulpmiddel zijn tanden.

Wat FigmaMake genereert, is uiteindelijk slechts een "logisch correct weblay-out". Een nette boxindeling die strak is opgebouwd met Auto Layout.

Dit is nou juist het indrukwekkende van de AI-evolutie. Wanneer je nu dezelfde prompt gebruikt, is de kwaliteit aanzienlijk beter. Je voelt echt de vooruitgang van AI (ik heb referentieafbeeldingen hieronder bijgevoegd).

Het is mooi en leerzaam, en als sjabloonthema is het gemakkelijk te gebruiken.

Maar de wensen van de directeur waren:

"Strooi texturen uit over de achtergrond!" "Laat elementen buiten de kaders uitsteken!" "Wat dacht je ervan om diagonale sliders toe te voegen?"

En dat waren vooral emotionele versieringen die logica negeren.

Elke keer wanneer ik decoratieve afbeeldingen in FigmaMakes gegenereerde gegevens duw, schreeuwt Auto Layout het uit en stort de algehele lay-out in elkaar.

Innerlijke stem (Ach! Zodra ik die achtergrondafbeelding toevoeg, schuift de sectie eronder mee! FigmaMake, het is niet jouw schuld, je hebt gelijk. Alleen kun je nog niet volledig aan wat de directeur vraagt...!)

Uiteindelijk die zinloze gevoel van "alles handmatig opnieuw maken"

"De witruimte hier moet compacter!" "Laat de knop veel meer beweging hebben!"

Om met overweldigende commentaren (rode annotaties) om te gaan, moest ik helaas de Auto Layout uitschakelen die FigmaMake had gegenereerd, de gegenereerde componenten uiteennemen en alles handmatig opnieuw positioneren.

Enkele uren later. Wat op het scherm overbleef, was een ontwerp dat geen spoor van FigmaMake meer bevatte – volledig iets anders.

En hier is het aangepaste eerste concept. Het design was totaal anders geworden dan het origineel.

Bovendien waren alle bestaande elementen ingesteld met Auto Layout, maar toen ik deze van FigmaMake naar Figma kopieerde, werd de Auto Layout om een onduidelijke reden in bepaalde delen uitgeschakeld. Dit betekende dat ik de Auto Layout opnieuw moest instellen.

Voor ik het wist, had het aanpassen veel tijd in beslag genomen.

Stille gedachte (Wacht even... was het niet sneller geweest om dit van begin af aan handmatig in Photoshop of Figma te doen? Wat was mijn explosief snelle 3 uur dan voor niets?)

Laat in de avond op het kantoor, toen ik dit besefte, voelde ik absolute leegte. En mijn collega gaf me een energiedrankje.

Collega: 'Mijn werk is klaar, dus ik ga naar huis!!'

Mijn collega ging elegant heen. Dus toch niet helpen...

Conclusie: wat FigmaMake kan en niet kan

Door deze moeilijke aanpassingen heen ben ik achter de bijzonderheden van FigmaMake gekomen.

Als u het verkeerd gebruikt, loopt de hoeveelheid herstelwerk juist op.

✅ Waar FigmaMake goed in is (= snel klaar)

• Beheerschermen, dashboardUI, app-schermen, enzovoort
  • Ordelijke rasterlayout, formulieren, tabellen en dergelijke zijn onverslaanbaar.
  • Het genereert in een oogwenk een "logische structuur", dus u krijgt iets van zodanige kwaliteit dat het waarschijnlijk rechtstreeks bruikbaar is voor SaaS-beheerschermen enzovoort (hoewel aanpassingen natuurlijk essentieel zijn).
• Initiële wireframes en structuurvoorstellen
  • Als u zich in de fase bevindt van "het controleren op tekorten of excessen van elementen", is het zelfs bruikbaar voor LP's (zolang u nog geen ontwerp hebt uitgewerkt).
  • Ook bij het uitwerken van vereisten is het erg handig omdat u verschillende patronen kunt maken.
  • Toen ik klantenwensen onder woorden bracht en deze ter plekke vorm gaf voor dingen als beelduitwisseling, vond ik het erg nuttig.

❌ Wat Figma Make niet goed kan (= handmatig werk nodig)

• Visueel ontwerp van LP (landingspagina's)
  • Ontwerpen met 'decoratieve elementen' en 'ornamenten' zijn nog moeilijk
  • Wat wordt gegenereerd is altijd goed georganiseerde, gebruiksvriendelijke UI. Gradiënten en patronen zijn ook mogelijk, maar zonder duidelijke instructies kan het resultaat uit het begin van de jaren 2010 lijken.
  • Er is tijd nodig om de nauwkeurigheid van prompts te verbeteren tijdens het ontwerpproces.
• Het concretiseren van vage nuances zoals 'ziet er goed uit'
  • Hier is nog steeds het vertaaltalent van een menselijke ontwerper nodig.
  • Als je prompts meer gaat gebruiken, zou je soepeler kunnen werken met meer nauwkeurige instructies (hoewel ik daar nog niet aan toe ben)

Samenvatting: Toch was het een uitstekend 'eerste concept'

Daarom: voor LP-productie op basis van vage instructies van de directeur was het rechtstreeks gebruiken van Figma Make-gegevens niet werkzaam.

Echter, zoals ik in het vorige artikel schreef, hielp het zeker bij het punt **"in drie uur vanuit niets een rudimentaire vorm maken en de wensen van de directeur eruit krijgen"**. En eerder hebben we daar aanzienlijk veel tijd aan besteed, wat het project vertraagde.

Het verzoek van "futuristisch en strak" is eigenlijk ontstaan dankzij het feit dat we een schets haddennie (positief denken).

Deze les

• Figma Make is een professional in het maken van "structuur".
• "Decoratie en afwerking" — dat is waar een designer kan laten zien wat hij kan.
• Er is nog geen AI die kan omgaan met de "leuke ingevallen" van een directeur.

De volgende keer ga ik echt opnieuw proberen met Figma Make — ditmaal voor "vernieuwing van het UI van ons intern beheersysteem". (Met een beheerinterface... dan zal het echt schitteren...!)

De designaanpassingen van de LP zijn….

Ja, we gaan gewoon doorgaan met handmatig werk!

En wat betreft de vooruitgang van AI... hier zie je het design dat met dezelfde prompt is gegenereerd als toen we het vorige artikel maakten.

De kwaliteit van de eerste gegenereerde versie is in enkele maanden enorm verbeterd. Dat is best indrukwekkend!

De nauwkeurigheid is schrikbarend verbeterd. Ik ben van plan om ook mijn best te doen met mijn dagelijkse designstudies, zodat ik niet achterblijf bij de ontwikkeling van AI.

En hier is de voltooide website die we deze keer hebben gemaakt

De LP voldoet ook aan WCAG 2.2 AA en
Lighthouse scoort hoog (het duurt even, maar probeer het eens! Soms zien we zelfs een perfect score!)
En wat grappig is: ondersteuning voor meerdere talen gebeurde vanzelf!
Voor meer informatie over ondersteuning voor meerdere talen, zie ook dit artikel
Tegenwoordig is browservertaling mainstream, maar het is echt handig dat je zo goedkoop een vertalingssite kunt maken zonder te hoeven schakelen!

Wat vind je ervan?
Vind je dat het er behoorlijk schoon uit ziet🎵

Ik heb van alles opgeschreven, maar eigenlijk voel ik dat het hebben van een ruwschets echt heel veel werk- en denkuren heeft bespaard!! Earder hebben we veel tijd doorgebracht in de WF-fase, en dan was er nog meer werk om het in het ontwerp om te zetten en de inhoud later te wijzigen. De volgende keer dat ik AI gebruik, zal ik eerst een goed omschreven prompt maken voordat ik eraan begin. Als beloning neem ik er een biertje bij.