【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

Hallo! Ik ben Hashy, UI-ontwerper bij Liberogic.

Mijn recente zorgen: de productie van een nieuwe landingspagina voor onze accessibility-diensten komt niet goed van de grond.

De directeur, verantwoordelijk voor de structuur van onze website, is gelukkig erg druk met andere zaken. Maar zo komen we niet vooruit...

"Prima, laat ik alvast een basis maken zodat het reviewproces voor de directeur wat makkelijker wordt!"

Uit die ingeving ontstond deze razendsnel landingspagina-productie met AI (Gemini) en designautomatiseringstool (FigmaMake). Deze keer deel ik alle stappen en mijn oprechte gedachten als ontwerper volledig met jullie!

Dit keer doel: een basis waar de directeur feedback op kan geven!

Perfectie van het begin af aan is toch onmogelijk! Ja! Het belangrijkste is eerst een bal te gooien waar de directeur makkelijk op kan reageren, dat moet het zijn!

Complete stappenplan voor snelle LP-productie (nog sneller met oefening!)

Dit zijn de realistische tijd-allocaties van de productieflow die we deze keer hebben getest. Het onderdeel dat het meeste tijd kostte was de 'iteratie'-fase om de ontwerpnauwkeurigheid te verbeteren.

1. 【Analyse】 Gemini, hoe is deze LP? （15 minuten）
2. 【Tekst genereren】 Laat Gemini de verbeterde LP-tekst voor je maken （15 minuten）
3. 【Prompt maken】 Laat Gemini de 'magische spreuk' voor FigmaMake samenstellen （5 minuten）
4. 【Design genereren】 FigmaMake, eerste keer proberen! （5 minuten）
5. 【Iteratieslus】 Heen-en-weer analyse en generatie voor betere nauwkeurigheid （1,5 uur）
6. 【Figma-conversie】 Html to Design-plugin gebruiken om in Figma te importeren （5 minuten）
7. 【Figma-aanpassingen】 Lay-outverstoring en andere details verfijnen （30 minuten）

Laten we nu elk stap in detail doornemen!

STAP 1：【Analyse】Gemini, wat vind je van deze landingspagina? (15 minuten)

We laten Gemini eerst onze bestaande webtoegankelijkheidspagina analyseren en vragen om eerlijk feedback zonder omhaal.

【Voorbeeldprompt voor Gemini】

Analyseer de landingspagina over webtoegankelijkheid op de volgende URL en geef een lijst van sterke punten en verbeterpunten. (vervolg...)

En binnen enkele seconden krijg je de analyseresultaten. "'Er zijn geen casestudies of klantgetuigenissen, waardoor het moeilijk is om zich concrete voordelen na implementatie voor te stellen'… Au, dat raakt hard! Maar zoiets durf ik zelf niet te zeggen. Bedankt, Gemini!" Gemini formuleerde een probleem dat ik zelf al voelde aankomen, maar niet onder woorden kon brengen.

Goed, eerst even de stand van zaken opnemen. Ik heb deze pagina gemaakt, maar... in ieder geval wil ik van Gemini puntig feedback krijgen op dingen waar ik zelf niet aan denk!

STAP 2：【Tekstgeneratie】Laat Gemini verbeterde landingspaginatekst maken (15 minuten)

We kopiëren de analyseresultaten van STAP 1 en vragen Gemini om verbeterde teksten te genereren.

【Voorbeeldprompt voor Gemini】

Maak op basis van bovenstaande analyseresultaten een voorstel voor de tekststructuur van de webtoegankelijkheidspagina. (tussengedeelte...) Markeer nieuwe elementen duidelijk met 【voorbeeldinformatie】.

Dan krijg je iets als "【Klantgetuigenis voorbeeld】Bedrijf XX: Contactaanvragen via website stegen met 50%!" en meteen ziet de pagina er veel professioneler uit. Met alleen dit voelstip je je al productief.

Prima! Ik ga die feedbacklijst die ik zojuist heb gekregen gewoon doorsturen naar Gemini en laten omzetten in een mooi stuk tekst. Dit is nou wat je noemt AI goed inzetten! …Wacht, ik moet er wel even een marker aan toevoegen – '【Voorbeeldtekst】' – anders ben ik later zelf in de war. Ik ben impulsief, weet je.

STAP 3: 【Prompt maken】 Gemini het 'magische spreuk' laten zeggen voor FigmaMake (5 minuten)

Ik stuur Gemini de tekststructuur die ik in STAP 2 heb gemaakt, plus een beschrijving van het gewenste ontwerp, zodat het een Engelse prompt voor FigmaMake kan genereren.

Zodra de tekst klaar is, gaat het echt beginnen – het ontwerp! Het leukste deel! …maar eerst moet ik een 'verzoekschrift (prompt)' voor FigmaMake opstellen. Mijn gebrekkig Engels gaat echt niet volstaan, dus hier vertrouw ik volledig op Gemini. Ik reken op je!

STAP 4: 【Ontwerp genereren】 FigmaMake, nu is het jouw beurt! (5 minuten)

Nou, het magische spreuk kopiëren, plakken en enter indrukken! …en hopla. Soms krijg je meteen een grandios ontwerp… maar meestal niet. Of wie weet? Dit spannende moment voelt een beetje als een loterij – best leuk eigenlijk.

De gegenereerde prompt kopiëren-plakken, dan op de ontwerpknop klikken. Die paar seconden wachten geven je toch wat spanning. En dan verschijnt het eerste ontwerp.

Wow, het is klaar! Maar nog wel heel basic. Nu ga ik het stap voor stap verfijnen – meer design-details en tekstupdates.

Maar goed, dit was eigenlijk pas het begin van het echte werk.

STAP 5: 【Iteratief proces】 Analyseren en genereren herhalen om de kwaliteit te verhogen (1,5 uur)

Hierna volgt een brainstormsessie met AI. Terwijl ik naar het design kijk dat door FigmaMake is gegenereerd, breng ik mijn ideeën naar Gemini en werk ik stap voor stap aan het verbeteren van de prompts.

"Nee, niet die kant op!" Ik merk dat ik hardop tegen mezelf praat. Waarschijnlijk echoot het door het kantoor. Maar eigenaardig genoeg wordt dit ralletje steeds leuker.

Ja, helaas, niet bij de eerste keer akkoord! Dat wist ik al! Maar toch had ik even hoop. Nu gaat het pas echt beginnen — samenwerken met AI in duo. Ik als regisseur, Gemini als coach, zeg maar.

En dit is de uiteindelijke output

Het ziet er veel netter uit dan het eerste ontwerp. Alleen... het is behoorlijk omslachtig om onnodig elementen te verwijderen of toe te voegen (waarschijnlijk omdat ik de instructies vanuit het Japans naar het Engels vertaal, waardoor mijn bedoeling niet altijd goed overkomt).

Ik realiseerde me dat ik niet veel verder kon gaan in FigmaMake, dus ik nam de directe aanpak: eerst de gegevens naar Figma converteren en dan daar aanpassen.

STAP 6: [Figma-conversie] HTML naar Design-plugin voor import in Figma (5 minuten)

Als de designrichting min of meer vaststaat, is het tijd om de gegevens naar Figma over te brengen. Hieronder vind je de procedure.

1. Publiceer eerst het design dat door FigmaMake is gegenereerd als webpagina.
2. Open de Figma-plugin 'Html to Design'.
3. Voer de URL van de gepubliceerde Figma Make in en voer het importeren uit!

We gebruiken de plugin "Html to Design". Kopieer en plak de URL van de pagina die je in Figma Make hebt gepubliceerd, en klik op de knop. Puur en alleen al hierdoor wordt je webpagina geconverteerd naar lagen in Figma — het is echt een handige tijd waarin we leven.

Figma Make publiceren

Eerst publiceren we Figma Make. Wanneer je op Publiceren klikt, verandert de status in gepubliceerd.

Open de Figma-plugin "Html to Design", voer de URL van de gepubliceerde Figma Make in en voer het importeren uit!

Open de plugin en plak de URL die je zojuist hebt opgehaald. Klik vervolgens op de knop Importeren en je bent klaar!

Na enkele minuten wordt het gegenereerde ontwerp in Figma weergegeven.

Tot slot: de publicatiestatus terugzetten naar privé

Nadat je alle werkstappen hebt voltooid, trek je de publicatie in en zet je de status terug naar privé.

Aandachtspunten

Momenteel ontbreken functies zoals wachtwoordbeveiliging voor gepubliceerde inhoud of het aanmaken van ontwikkelomgevingen. Bij hernieuwing van bedrijfssites moet u voorzichtig zijn met mogelijke gegevenslekken. Dit vereist aandacht.

Over het algemeen geldt dat wanneer u alleen interne inhoud gebruikt of dummygegevens voor een eerste opzet gebruikt, er geen problemen zullen ontstaan. Ik denk dat het goed is om dit per project in te schatten (gebruik dit absoluut niet voor projecten waar externe publicatie niet is toegestaan).

Prima, het begint er heel aardig uit te zien! Nu is het mijn beurt – Figma is aan de beurt! Sorry voor het wachten, partner!

STAP 7: [Figma-aanpassingen] Eindafstemming van layoutproblemen (30 minuten)

De geïmporteerde gegevens zijn nog erg grof. Er is willekeurig gegroepeerdwerk, tekstboxen die uitsteken, en meer van dergelijke onzin.

Wat volgt is nauwgezet correctiewerk. Auto-layout opnieuw instellen, verspreide elementen omzetten in componenten, en de algehele witruimte verfijnen. Deze extra aandacht verhoogt aanzienlijk de ontwerpkwaliteit en maakt het tot een 'degelijke uitgangspunt'.

Hier is het eindresultaat

De designkwaliteit wordt grover naarmate je lager op de LP komt – ik vraag me af of dit een onvermijdelijk gevolg van AI is of dat mijn instructies te vaag waren. Ik ga blijven experimenteren.

Importeren, dus. Hmm, het layout is wilder dan verwacht! Nou ja, dit is het resultaat van AI die haar best deed. Het is mijn taak om dit netjes uit te werken.

Samenvatting: Wat ik heb geleerd over 'AI-samenwerkingsdesign' door het uit te proberen

Wat ik uit dit productieproces heb geleerd, is dat AI geen 'toverstaf' is, maar een 'uitstekende partner'.

• Het tijdbesparingseffect van het maken van een raamwerk is enorm: Het is veel sneller dan vanaf nul een structuur uit te puzzelen.
• De iteratieve cyccus is essentieel: Voor goed design is geduld nodig om herhaaldelijk met AI in gesprek te gaan.
• Uiteindelijk is het handwerk van mensen cruciaal: De kwaliteit hangt af van hoe de ontwerper met opzet het werk van AI aanpast en voltooit, in plaats van het blindelings over te nemen.

Trouwens, toen ik dit raamwerk voorzichtig aan de directeur liet zien… 'Oh, interessant! Dit maakt het gesprek veel gemakkelijker! Het verschil met een raamwerk is enorm, dank je wel!' aldus zijn reactie.

Yes! Al het harde werk heeft ergens toe geleid…! Vanavond smaakt het bier heerlijk!

Tot zover voor nu! Het daadwerkelijke LP-ontwerp zal na de opmerkingen van de directeur worden afgemaakt en gepubliceerd als [tweede deel]!

Zou jij ook niet willen proberen met deze nieuwe ontwerpmanier door samen te werken met AI?