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

Hallo! Ik ben Hasshy, UI-designer bij Liberogic Inc.

Mijn grootste zorg op dit moment: de nieuwe LP (landingspagina) voor onze accessibility-services schiet maar niet op.

De CEO, die verantwoordelijk is voor de structuur van onze eigen website, is gelukkig erg druk met andere zaken. Maar zo komen we geen stap verder...

"Oké, laten we alvast een opzet maken, zodat de review van de CEO wat minder werk wordt!"

Dit idee vormde de start van een snelle LP-productie met AI (Gemini) en een tool voor design-automatisering (FigmaMake). In dit artikel delen we alle stappen en mijn eerlijke gedachten, vanuit het perspectief van een designer!

Doel van deze stap: met de opzet de CEO zover krijgen dat hij gerichte "rode correcties" geeft!

Een perfecte versie is van tevoren toch onhaalbaar! Het belangrijkste is dat de CEO iets heeft om op te reageren. Dat is het begin, toch?

Alle stappen voor snelle LP-productie (wordt nog sneller als je er gewend bent!)

Hier is een realistisch overzicht van de tijdsverdeling in de productieworkflow die we hebben getest. De meeste tijd ging naar het 'herhalingsproces' waarin we de precisie van het ontwerp verbeterden.

1. [Analyse] Gemini, wat vind je van deze landingspagina? (15 minuten)
2. [Tekstgeneratie] Laat Gemini de tekst voor de landingspagina schrijven, inclusief verbeterpunten (15 minuten)
3. [Promptopstelling] Laat Gemini de 'magische prompt' opstellen die we naar FigmaMake sturen (5 minuten)
4. [Ontwerpgeneratie] FigmaMake, eerst maar eens in één keer laten genereren! (5 minuten)
5. [Herhalingslus] De precisie verhogen door heen en weer te gaan tussen analyse en generatie (anderhalf uur)
6. [Naar Figma] Importeren in Figma met de Html to Design-plugin (5 minuten)
7. [Figma-aanpassing] Layoutfouten en dergelijke in de laatste fase corrigeren (30 minuten)

Laten we nu elke stap in detail bekijken!

STAP 1: [Analyse] Gemini, wat vind je van deze landingspagina? (15 minuten)

Eerst laten we Gemini de bestaande toegankelijkheidspagina van ons bedrijf lezen, en vragen we om eerlijke, ongezouten feedback.

[Voorbeeldprompt voor Gemini]

Analyseer de landingspagina over webtoegankelijkheid op de volgende URL en stel een lijst op met de sterke punten en verbeterpunten. (vervolg weggelaten)

Binnen enkele seconden kwam de analyse. "Er zijn geen klantcases of klantervaringen, waardoor het lastig is je een concreet beeld te vormen van de voordelen na het afnemen van de dienst"... Au, dat is precies waar het op staat, het doet pijn! Maar dit had ik zelf nooit zo kunnen verwoorden. Bedankt, Gemini!" Het bracht precies onder woorden wat ik al vaag had aangevoeld.

Oké, eerst de huidige situatie in kaart brengen. Ik heb deze pagina zelf gemaakt, maar... Laten we Gemini-sensei eens recht voor z'n raap laten zeggen wat ik zelf niet zie!

STAP 2: [Tekstgeneratie] Laat Gemini een landingspagina-tekst maken die de verbeterpunten verwerkt (15 min)

Kopieer het analyseresultaat uit STAP 1 en vraag om een tekst te schrijven die de verbeteringen verwerkt.

[Voorbeeldprompt voor Gemini]

Maak op basis van de eerdere analyse een tekstopzet voor de landingspagina over webtoegankelijkheid. (gedeelte weggelaten) Markeer nieuwe elementen duidelijk met [VOORBEELDTEKST].

Zodra er concrete tekst verschijnt zoals "[Voorbeeld klantervaring] Bedrijf OO: Contactaanvragen via de site zijn met 1,5 keer gestegen!", begint het meteen op een echte landingspagina te lijken. Met alleen dit stapje heb je het gevoel dat je al veel werk hebt verzet.

Oké, laten we de lijst met kritiekpunten die we net kregen gewoon aan Gemini geven, zodat het er goede tekst van maakt. Dit is het echte werk van AI! ...Oh, en zodat ik later niet in de war raak, moet ik het laten markeren met [VOORBEELDTEKST]. Ik ben een haastpost, dus dat moet erbij.

STAP 3: [Promptcreatie] Laat Gemini de 'magische formule' schrijven die je naar FigmaMake stuurt (5 minuten)

Geef Gemini de tekststructuur uit STAP 2 en een beeld van het ontwerp dat je wilt maken. Gemini genereert dan een Engelstalige prompt voor FigmaMake.

Als de tekst klaar is, komt het echte ontwerp: het leukste deel! Maar eerst moeten we een 'verzoekbrief' (prompt) voor FigmaMake schrijven. Mijn Engels is te schools om goed over te komen, dus die taak laat ik graag aan Gemini over. Reken maar op die hulp!

STAP 4: [Ontwerp genereren] FigmaMake, nu aan jou! (5 minuten)

Kopieer de magische formule, plak hem en druk op Enter. Wie weet krijg je meteen een geweldig ontwerp. Misschien wel, misschien ook niet. Die spanning voelt een beetje als een gokautomaat, en dat maakt het best leuk. Of misschien komt het wel? Ik denk het wel!

Kopieer de gegenereerde prompt, plak hem en klik op de knop om het ontwerp te genereren. Die paar seconden wachten zijn best spannend. Dan verschijnt het eerste ontwerp.

Oh, het is gelukt! Het is nog wel erg simpel... We gaan het ontwerp verder aanpassen, zowel visueel als qua teksten.

Maar eerlijk gezegd begon het echte werk pas hier.

STAP 5: [Herhalende lus] Verfijn het resultaat door heen en weer te gaan tussen analyse en generatie (1,5 uur)

Vanaf nu is het tijd voor brainstormen met de AI. Terwijl je het ontwerp uit FigmaMake bekijkt, vraag je Gemini wat je anders zou willen en verbeter je zo stap voor stap de prompt. Het is een geduldig, zorgvuldig proces.

"Nee, niet die kant op!" Zonder dat ik het doorheb, wordt mijn gemompel steeds luider. Waarschijnlijk klinkt het door het hele kantoor. Toch is het vreemd, maar deze heen-en-weer wordt steeds leuker.

Ja, in één keer goed was er natuurlijk niet bij! Geen verrassing! Maar ik had er stiekem wel op gehoopt! Hier begint het pas echt, samen met de AI. Ik ben de regisseur, en Gemini is zoiets als de coach, toch?

En dit is het uiteindelijke resultaat

Het is al een stuk strakker dan de eerste tekening. Maar... het is lastig om overbodige onderdelen weg te halen of nieuwe toe te voegen (waarschijnlijk omdat ik mijn instructies in het Engels vertaal vanuit het Japans, waardoor mijn bedoeling vaak niet goed overkomt...).

Omdat ik dacht dat verder werken in FigmaMake niet meer haalbaar was, heb ik het tijdelijk naar Figma-data omgezet om daarna te bewerken. Een bruut maar effectieve aanpak.

STAP 6: [Figma] Importeren in Figma met de Html to Design-plugin (5 min)

Zodra de richting van het ontwerp enigszins vastligt, zetten we de data over naar Figma. Hieronder vind je de stappen.

1. Publiceer het ontwerp uit FigmaMake eerst tijdelijk als webpagina.
2. Open de Figma-plugin "Html to Design".
3. Voer de URL van de gepubliceerde FigmaMake-pagina in en start de import!

Gebruik de plugin "Html to Design". Kopieer en plak de URL van de pagina die je met FigmaMake hebt gepubliceerd en klik op de knop. Zo wordt een webpagina direct omgezet naar lagen in Figma. Wat is de wereld toch makkelijk geworden...

FigmaMake publiceren

Publiceer eerst je FigmaMake. Zodra je op Publiceren klikt, verandert de status naar Gepubliceerd.

Open de plugin "Html to Design" in Figma, voer de URL van je gepubliceerde FigmaMake in en voer de import uit!

Open de plugin en plak de URL die je zojuist hebt gekopieerd. Klik daarna op de importknop, en je bent klaar!

Na enkele minuten verschijnt het ontwerp dat is geëxporteerd in Figma.

Zet ten slotte de publicatiestatus terug naar niet-gepubliceerd

Zodra je klaar bent, zet je de pagina weer op niet-gepubliceerd door op Publicatie intrekken te klikken.

Aandachtspunten

Momenteel is er geen mogelijkheid om een wachtwoord in te stellen op gepubliceerde pagina's of een ontwikkelomgeving aan te maken. Let daarom goed op voor datalekken als je dit gebruikt voor de vernieuwing van een bedrijfswebsite.

Over het algemeen heeft het geen invloed als je het alleen gebruikt voor je eigen content of een concept maakt met dummy-informatie, dus ik denk dat je het per project kunt bepalen (gebruik het absoluut niet bij projecten waarbij data niet naar buiten mag).

Oké, het begint al aardig goed te worden! Vanaf hier is het mijn thuisbasis, Figma, dat het werk overneemt! Sorry dat je moest wachten, maatje!

STAP 7: [Figma-aanpassing] Laatste afstemming van layoutfouten (30 min)

Data die net is geïmporteerd is nog erg ruw. Er zijn mysterieuze groeperingen en tekstvakken die buiten hun kader steken, kortom, er valt genoeg aan te merken.

Vanaf hier is het vooral zorgvuldig handwerk. Auto layout opnieuw toepassen, losse elementen omzetten naar componenten, de witruimte in het geheel gelijkmaken en zo verder... Deze extra stap tilt de kwaliteit van het ontwerp echt omhoog en maakt er een "degelijk concept" van.

Het resultaat ziet er zo uit

Naar beneden in de landingspagina wordt het ontwerp minder gedetailleerd. Is dat iets wat bij AI hoort, of zeg ik het verkeerd? Ik blijf in elk geval experimenteren.

Importeren, check... Ja, de layout loopt nogal uit de hand, eerlijk gezegd! Nou ja, AI heeft zijn best gedaan. Nu is het mijn kans om er iets moois van te maken.

Samenvatting: wat ik leerde over ontwerpen met AI als partner

Uit deze werkwijze blijkt vooral dat AI geen "toverstaf" is, maar een goede partner.

• Het tijdwinst-effect bij het maken van een eerste opzet is enorm: het gaat veel sneller dan zelf vanaf nul over een structuur na te denken.
• De kern is de cyclus van trial-and-error: om een goed ontwerp te maken, is doorzettingsvermogen nodig om steeds opnieuw in dialoog te gaan met de AI.
• Uiteindelijk is de menselijke hand doorslaggevend: de kwaliteit wordt bepaald doordat de ontwerper het AI-resultaat niet klakkeloos overneemt, maar het met een duidelijke bedoeling afwerkt.

Toen ik deze eerste opzet voorzichtig aan de president liet zien, zei hij: "Oh, interessant! Met dit als uitgangspunt kunnen we het gesprek veel makkelijker voeren! Het maakt echt een wereld van verschil dat er al iets ligt, bedankt!"

Yes, het was de moeite waard! Het is gelukt… Vanavond een biertje, dat heb ik verdiend!

Dat is het voor nu! Het deel dat we daadwerkelijk omzetten naar de landingspagina publiceren we als [Deel 2], nadat de president zijn correcties heeft aangegeven en het ontwerp is afgewerkt.

Waarom probeert u niet eens nieuw ontwerpwerk met AI als samenwerkingspartner? Ik ben benieuwd naar uw ervaringen.