【Créons et utilisons FigmaMake : première partie】FigmaMake et Gemini en 3 heures ! Créer rapidement une base de page de destination pour accélérer les révisions d'un PDG occupé – Le nouveau flux de production web de nouvelle génération

Bonjour ! Je suis Hashy, designer UI chez Liberogic.

Ma préoccupation récente, c'est que la création d'une nouvelle page de destination pour nos services d'accessibilité ne progresse pas bien.

Le PDG, qui est responsable de la structure de notre site, est heureusement très occupé par d'autres projets. Mais à ce rythme, rien n'avance…

« D'accord, je vais au moins créer une base pour que la relecture du PDG soit un peu plus facile ! »

De cette idée spontanée est née la création éclair d'une page de destination en utilisant l'IA (Gemini) et un outil d'automatisation de conception (FigmaMake). Cette fois, je vais vous partager toute la procédure et mes véritables pensées du moment, du point de vue d'un designer !

Objectif de cette fois : faire émerger les remarques du PDG sur la base !

Un résultat parfait dès le départ, c'est impossible de toute façon ! Oui ! Ce qui compte vraiment, c'est de proposer quelque chose sur lequel le PDG peut facilement commenter, c'est sûr !

Procédure complète de création d'une page de destination ultra-rapide (encore plus rapide avec de la pratique !)

Voici la répartition réelle du temps pour le flux de production que nous avons testé cette fois. La partie qui a demandé le plus de temps était l'itération pour améliorer la précision du design.

1. 【Analyse】 Gemini, qu'en penses-tu de cette page de destination ? (15 minutes)
2. 【Génération de texte】 Faire générer le texte de la page de destination avec les améliorations par Gemini (15 minutes)
3. 【Création de prompt】 Faire formuler par Gemini le « sort magique » à envoyer à FigmaMake (5 minutes)
4. 【Génération de design】 FigmaMake, première tentative ! (5 minutes)
5. 【Boucle itérative】 Améliorer la précision par des allers-retours entre analyse et génération (1 heure 30)
6. 【Conversion en Figma】 Importer dans Figma avec le plugin Html to Design (5 minutes)
7. 【Ajustement Figma】 Affinage final des problèmes de mise en page (30 minutes)

Voyons maintenant chaque étape en détail !

ÉTAPE 1 : 【Analyse】Gemini, qu'en penses-tu de cette page de destination ? (15 min)

D'abord, nous faisons lire à Gemini notre page d'accessibilité existante et nous demandons un retour sans complaisance.

【Exemple de prompt pour Gemini】

Analysez la page de destination relative à l'accessibilité web de l'URL suivante et énumérez les points forts et les axes d'amélioration. (suite omise)

Et en quelques secondes, les résultats d'analyse arrivent. « 'Il n'y a pas d'études de cas ni de témoignages clients, ce qui rend difficile l'imaginaire des bénéfices concrets après la mise en place du service'… Aïe, c'est tellement juste que ça fait mal ! Mais c'est justement ce que je ne pouvais pas dire moi-même. Merci Gemini ! » Gemini a reformulé précisément le problème que je ressentais vaguement.

Bon, d'abord faire le point sur la situation actuelle. Je suis l'auteur de cette page, mais… bref, je vais demander à Gemini de m'indiquer sans détour ce que je ne remarque pas !

ÉTAPE 2 : 【Génération de texte】Demander à Gemini de créer un texte de page de destination incluant les améliorations (15 min)

Nous copions-collons les résultats de l'ÉTAPE 1 et demandons à Gemini de créer un texte en incorporant les propositions d'amélioration.

【Exemple de prompt pour Gemini】

Sur la base des résultats d'analyse précédents, créez une proposition de structure textuelle pour la page de destination d'accessibilité web. (passage omis) Marquez clairement tout nouvel élément ajouté avec 【Exemple de texte】.

Des textes concrets apparaissent comme « 【Témoignage client】Société 〇〇 : Les demandes de renseignements via le site ont augmenté de 1,5 fois ! » et la page devient immédiatement plus professionnelle. On a un peu l'impression d'avoir travaillé dur rien qu'avec ça.

Bon, je vais juste envoyer à Gemini la liste de retours que je viens de recevoir et lui faire en faire du texte potable. C'est ça, l'utilisation efficace de l'IA ! …Attends, faut que je mette une balise « 【Exemple de texte】 » pour que j'me perde pas dans la lecture après. J'suis du genre à me tromper rapidement…

ÉTAPE 3 : 【Création du prompt】 Faire réciter par Gemini la « formule magique » à envoyer à FigmaMake (5 min)

À partir du plan textuel créé à l'ÉTAPE 2 et de l'image du design que je veux faire, je demande à Gemini de générer un prompt en anglais pour FigmaMake.

Une fois le texte prêt, place au design ! C'est le meilleur moment !…enfin, avant faut d'abord rédiger la « lettre de demande (prompt) » à FigmaMake. Mon anglais cassé ne passera jamais, donc je confie tout ça à Gemini. Je compte sur toi !

ÉTAPE 4 : 【Génération du design】 FigmaMake, c'est entre tes mains ! (5 min)

Allez, je copie-colle la formule magique et j'appuie sur entrée !…voilà. Un design de fou arrive d'une seule coup ? …Non, c'est pas possible. Ou peut-être ? Ce petit frisson d'impatience, c'est comme un tirage à la machine à sous, j'aime bien ça.

Je copie-colle le prompt généré et je clique sur le bouton de génération du design. Ces quelques secondes d'attente sont bizarrement stressantes. Et puis voilà le premier design qui arrive.

Oh là, c'est fait !!…mais bon, c'est encore assez basique, là. Je vais continuer à affiner le design et peaufiner les textes.

Mais après tout, c'était vraiment à partir de là que le vrai travail commençait.

ÉTAPE 5 : 【Boucle itérative】 Améliorer la précision par des allers-retours entre analyse et génération (1 h 30)

À partir de là, c'est l'heure du brainstorming avec l'IA. En regardant les designs générés par FigmaMake, je consulte Gemini sur « je voudrais plutôt que ce soit comme ça », et je m'engage dans ce travail laborieux d'amélioration des invites.

« Ah non, pas comme ça ! », et mon monologue devient involontairement plus fort. Ça doit résonner dans le bureau. Mais c'est étrange, cet échange devient graduellement amusant.

Oui, bien sûr, ce n'était pas un succès du premier coup ! Je le savais ! Mais j'avais quand même un peu d'espoir ! Ici commence le vrai travail, une collaboration étroite avec l'IA. C'est comme si j'étais le réalisateur et Gemini le coach ?

Et voici la sortie finale

C'est beaucoup plus structuré qu'au premier dessin. Cependant... c'est fastidieux de supprimer ou d'ajouter les parties inutiles (probablement parce que je convertis le japonais en anglais pour donner les instructions, et ma réelle intention ne passe souvent pas bien).

J'ai estimé que faire davantage sur FigmaMake était impossible, alors j'ai eu recours à la méthode de force brute : convertir en données Figma d'abord, puis corriger.

ÉTAPE 6 : [Conversion en Figma] Importer dans Figma avec le plugin Html to Design (5 min)

Une fois la direction générale du design affinée, je vais enfin importer les données dans Figma. Voici la procédure.

1. Je publie d'abord le design généré par FigmaMake comme une page web.
2. Je lance le plugin Figma « Html to Design ».
3. Entrez l'URL du Figma Make publié et exécutez l'importation !

Utilisez le plugin « Html to Design » de Figma. Copiez-collez l'URL de la page publiée sur Figma Make et cliquez sur le bouton. C'est tout ce qu'il faut faire pour convertir la page Web en calques Figma – on doit vraiment vivre dans une époque pratique…

Publication de Figma Make

D'abord, publiez Figma Make. Cliquez sur Publier et le statut passera à « Publié ».

Lancez le plugin Figma « Html to Design », entrez l'URL du Figma Make publié et exécutez l'importation !

Lancez le plugin et collez l'URL que vous avez obtenue précédemment. Il ne vous reste plus qu'à cliquer sur le bouton Importer pour terminer !

Après quelques minutes, le design généré s'affichera sur Figma.

Enfin, restaurez l'état non publié

Une fois que vous avez terminé toutes les étapes, annulez la publication pour revenir à l'état non publié.

Points de préoccupation

Actuellement, il n'y a pas de fonctionnalités pour ajouter des mots de passe à l'état public ou créer des environnements de développement. Par conséquent, si vous utilisez cet outil pour des refonte de sites d'entreprise, par exemple, vous devez être prudent concernant les fuites d'informations.

Fondamentalement, si vous créez uniquement du contenu interne à votre entreprise ou si vous créez un squelette avec des informations fictives, il n'y aura aucun impact. Je pense qu'il est bon de choisir l'approche en fonction du projet (veuillez absolument ne pas l'utiliser pour les projets où la divulgation externe est interdite).

D'accord, ça prend vraiment bonne allure maintenant ! À partir de là, c'est mon domaine de prédilection, l'heure de Figma ! Merci de votre patience, mon collègue !

ÉTAPE 7 : [Ajustements Figma] Réglage final des désalignements de mise en page, etc. (30 minutes)

Les données tout juste importées sont encore très brutes. Il y a des groupements mystérieux, des boîtes de texte qui débordent, et plein d'aspects à corriger.

À partir de là, il n'y a que du travail de correction minutieux. Appliquer à nouveau la mise en page automatique, transformer les éléments dispersés en composants, ajuster les marges générales… Ce petit effort supplémentaire élève considérablement la qualité du design et en fait un véritable squelette de projet.

Voici le résultat final

La granularité du design diminue vers le bas de la page de destination – est-ce une limitation inévitable de l'IA ou est-ce que j'ai mal formulé mes instructions ? Je continuerai à expérimenter diverses approches.

Importer… voilà. Hmm, la mise en page est bien plus dynamique que prévu ! Bon, c'est le résultat du travail acharné de l'IA, après tout. C'est mon moment de briller en nettoyant tout proprement.

Résumé : Les points clés du « design en co-création avec l'IA » que j'ai découverts en le faisant

Ce que j'ai ressenti dans ce processus de création, c'est que l'IA n'est pas une « baguette magique », mais un « excellent partenaire ».

• L'effet de gain de temps dans la création d'une première version est spectaculaire : c'est infiniment plus rapide que de partir de zéro et de se demander comment structurer le projet.
• La clé, c'est la boucle d'itération : créer un bon design nécessite de la persévérance pour dialoguer à plusieurs reprises avec l'IA.
• À la fin, c'est la main humaine qui compte : il ne faut pas accepter aveuglément ce que l'IA a créé ; c'est le designer qui, en finalisant intentionnellement le travail, détermine la qualité.

Au fait, quand j'ai montré cette première version au PDG avec un peu d'appréhension… « Oh, c'est intéressant ! Avec ça, les discussions vont progresser beaucoup plus facilement ! Le simple fait d'avoir une première version, c'est vraiment différent. Merci ! » a-t-il dit.

Yesss ! Tous mes efforts ont porté leurs fruits…! Ce soir, la bière a un goût encore meilleur !

C'en est là pour cette fois ! La partie qui deviendra réellement une landing page sera finalisée en design après les annotations du PDG, puis publiée comme [deuxième partie] !

Et vous, pourquoi ne pas essayer ce nouveau processus de création de design par collaboration avec l'IA ?