[Créer pour valoriser Figma Make : 1re partie] Une LP en 3 heures avec Figma Make et Gemini : un nouveau flux de création web pour produire rapidement une ébauche de LP que les dirigeants occupés peuvent annoter facilement

Bonjour ! Je suis Hasshy, designer UI chez Liberogic Inc.

Mon souci récent : la production de la nouvelle landing page (page de destination) de nos services d'accessibilité n'avance pas aussi vite que je le voudrais.

Le président, qui supervise la structure de notre site, est très occupé par d'autres dossiers, et c'est une bonne nouvelle pour l'entreprise. Pourtant, si rien ne change, le projet reste bloqué...

« Très bien, pour alléger la relecture du président, je vais au moins préparer une ébauche de mon côté ! »

C'est de cette idée qu'est né un processus de création rapide de landing pages, basé sur l'IA (Gemini) et un outil d'automatisation du design (Figma Make). Dans cet article, je vous présente toutes les étapes, ainsi que mes pensées réelles, vues du côté designer !

Objectif de cette étape : obtenir les annotations du président grâce à l'ébauche !

Une version parfaite n'est pas réaliste dès le départ ! Ce qui compte d'abord, c'est de lancer une base que le président pourra facilement commenter, c'est sûr !

Toutes les étapes de création rapide de landing pages (encore plus rapide une fois qu'on a l'habitude !)

Voici la répartition réelle du temps pour le flux de production que nous avons testé. L'étape qui a demandé le plus de temps était la phase de « répétition » visant à affiner la précision du design.

1. 【Analyse】 Gemini, que pensez-vous de cette LP ? (15 min)
2. 【Génération de texte】 Demander à Gemini de rédiger le texte de la LP, points d'amélioration inclus (15 min)
3. 【Création du prompt】 Faire formuler à Gemini le « prompt magique » à soumettre à FigmaMake (5 min)
4. 【Génération du design】 FigmaMake, on commence par une première demande ! (5 min)
5. 【Boucle de répétition】 Allers-retours entre analyse et génération pour affiner la précision (1 h 30)
6. 【Passage sur Figma】 Import dans Figma avec le plugin Html to Design (5 min)
7. 【Retouches Figma】 Ajustements finaux, notamment pour les problèmes de mise en page (30 min)

Passons maintenant en revue chaque étape en détail !

ÉTAPE 1 : 【Analyse】 Gemini, que pensez-vous de cette LP ? (15 min)

Pour commencer, je demande à Gemini de lire la page d'accessibilité existante de notre entreprise et de me donner un retour sans concession.

[Exemple de prompt pour Gemini]

Analysez la landing page sur l'accessibilité web à l'adresse suivante, et listez ses points forts ainsi que les points à améliorer. (suite omise)

Et en quelques secondes, l'analyse arrive. « Il n'y a aucun cas client ni aucun témoignage, et il est difficile d'imaginer les avantages concrets du service après sa mise en place… Aïe, c'est tellement juste que ça pique ! Mais c'est exactement ce que je n'aurais pas su dire moi-même, merci Gemini ! » Il a mis en mots avec précision un problème que je pressentais déjà.

Bon, commençons par faire le point sur la situation. Cette page, c'est moi qui l'ai faite, mais bon… Allez, demandons au professeur Gemini de me dire sans détour ce que je ne vois pas moi-même !

ÉTAPE 2 : [Génération de texte] Faire rédiger par Gemini le texte de la landing page, en intégrant les améliorations (15 min)

Je copie-colle les résultats de l'analyse de l'ÉTAPE 1 et demande la rédaction d'un texte intégrant les améliorations proposées.

[Exemple de prompt pour Gemini]

En vous appuyant sur les résultats d'analyse précédents, rédigez un plan de texte pour la landing page sur l'accessibilité web. (suite omise) Indiquez clairement [EXEMPLE DE TEXTE] pour chaque nouvel élément ajouté.

Quand des textes concrets apparaissent, comme « [Exemple de témoignage client] Société XX : les demandes de contact via le site ont été multipliées par 1,5 ! », la page prend tout de suite l'allure d'une vraie landing page. Rien que ça, et j'ai l'impression d'avoir fait le travail.

Très bien, je transmets maintenant la liste de critiques reçue à Gemini pour qu'il en fasse un texte réussi. C'est ça, l'utilisation intelligente de l'IA ! … Mais attention, il faut que je marque « [EXEMPLE DE TEXTE] » pour ne pas m'y perdre plus tard. Je vais vite en besogne, alors il faut que j'y pense…

ÉTAPE 3 : [Création du prompt] Demander à Gemini de rédiger le « prompt magique » à transmettre à FigmaMake (5 min)

Nous demanderons à Gemini de générer un prompt en anglais pour FigmaMake, en lui fournissant la structure du texte créée à l'étape 2 ainsi que l'image du design que nous souhaitons obtenir.

Une fois le texte prêt, place enfin au design, le moment le plus amusant ! Mais avant cela, il faut rédiger la « lettre de demande » destinée à FigmaMake (le prompt). Mon anglais approximatif ne suffirait pas à bien se faire comprendre, alors je confie cette tâche à Gemini. Je compte sur toi !

ÉTAPE 4 : [Génération du design] À FigmaMake maintenant ! (5 min)

Allez, on copie-colle le prompt magique et on appuie sur Entrée… Et hop ! Qui sait, peut-être que le design parfait arrivera du premier coup ? … Non, ça n'arrivera pas. Enfin, peut-être bien ? Ce suspense est un peu comme une machine à sous, et c'est plutôt amusant.

On copie-colle le prompt généré, on clique sur le bouton de génération du design. Ces quelques secondes d'attente sont étonnamment angoissantes. Puis apparaît le premier design.

Ça y est, c'est fait ! Mais il reste assez sommaire... Nous allons encore ajuster le design et affiner les textes.

Mais bon, c'est à partir de là que le vrai travail commence.

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

Place maintenant au brainstorming avec l'IA. En nous appuyant sur les designs générés par FigmaMake, nous demandons à Gemini comment aller plus loin (« j'aimerais que ce soit plus comme ceci ») et nous améliorons progressivement le prompt. Un travail patient et méthodique.

« Ah, non, pas par là ! » Je me surprends à crier tout seul. Sans doute que ça résonne dans tout le bureau. Pourtant, cet échange devient de plus en plus amusant, et c'est assez étrange.

Oui, évidemment, ça n'a pas marché du premier coup ! Ce n'est pas une surprise ! Mais j'espérais un peu quand même ! La vraie partie commence maintenant : une équipe à deux, avec l'IA. Je suis le réalisateur, et Gemini joue un peu le rôle de coach, non ?

Et voici le résultat final

C'est beaucoup plus propre que le premier dessin. Cependant... supprimer ou ajouter des éléments inutiles reste pénible (probablement parce que je traduis mes instructions en anglais, et l'intention passe souvent mal à ce stade...).

Comme je pensais qu'aller plus loin dans FigmaMake serait impossible, j'ai opté pour une solution radicale : convertir d'abord les données en Figma, puis faire les corrections.

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

Une fois la direction artistique suffisamment définie, il est temps de transférer les données vers Figma. Voici les étapes à suivre.

1. Publiez d'abord le design généré dans FigmaMake sous forme de page web.
2. Lancez le plugin « Html to Design » dans Figma.
3. Saisissez l'URL de FigmaMake publiée, puis lancez l'importation !

Utilisez le plugin « Html to Design ». Copiez-collez l'URL de la page publiée sur FigmaMake, puis cliquez sur le bouton. C'est tout : la page web est convertie en calques Figma. Quelle belle époque que celle-ci...

Publication dans FigmaMake

Commencez par publier votre projet dans FigmaMake. Une fois que vous cliquez sur « Publier », son statut passe à « Publié ».

Lancez le plugin « Html to Design » dans Figma, saisissez l'URL de votre FigmaMake publié, puis lancez l'importation !

Lancez le plugin et collez l'URL que vous avez récupérée précédemment. Il vous suffit ensuite de cliquer sur le bouton d'importation pour terminer !

Après quelques minutes, le design généré apparaît dans Figma.

Dernière étape : repasser en non publié

Une fois le travail terminé, cliquez sur « Annuler la publication » pour remettre le projet en non publié.

Points d'attention

Pour l'instant, la publication ne permet pas de protéger l'accès par mot de passe ni de créer un environnement de développement. Si vous l'utilisez pour refondre un site d'entreprise, soyez attentif aux risques de fuite d'informations.

En règle générale, si l'on travaille uniquement avec son propre contenu ou que l'on crée une ébauche avec des données fictives, cela ne pose pas de problème. Il est donc conseillé de choisir selon le projet (ne jamais l'utiliser pour les projets où la sortie de données en externe est interdite).

Bien, ça commence à prendre forme ! Maintenant, place à mon terrain de jeu, Figma ! Désolé de t'avoir fait attendre, mon ami !

ÉTAPE 7 : [Retouches Figma] Ajustements finaux des problèmes de mise en page (30 min)

Les données fraîchement importées sont encore très brutes. On y trouve des regroupements incompréhensibles, des zones de texte qui débordent, et bien d'autres points à corriger.

Place maintenant à un travail de retouche minutieux : réappliquer les mises en page automatiques, transformer les éléments dispersés en composants, harmoniser les marges globales... Ce petit effort supplémentaire élève nettement la qualité du design et en fait une véritable « ébauche solide ».

Voici le résultat final

Dans la partie basse de la page, le niveau de détail du design baisse. Est-ce une limite inhérente à l'IA, ou mes consignes sont-elles en cause ? Je vais continuer à expérimenter et à ajuster mon approche.

Importation, voilà... Oh là là, la mise en page s'est montrée bien plus vive que prévu ! Enfin, c'est le résultat des efforts de l'IA, alors bon. C'est ici que je vais tout remettre en ordre, et c'est là que mon amour du travail bien fait entre en jeu.

Conclusion : les points clés du « design en collaboration avec l'IA » tirés de cette expérience

Ce que cette création m'a fait réaliser, c'est que l'IA n'est pas une « baguette magique », mais un « excellent partenaire ».

• Le gain de temps de la première ébauche est énorme : il est nettement plus rapide que de partir de zéro et de se creuser la tête sur la structure.
• La boucle d'essais et d'erreurs fait toute la différence : pour obtenir un bon design, il faut la patience de multiplier les échanges avec l'IA.
• La touche finale reste humaine : il ne faut pas accepter aveuglément ce que l'IA produit ; c'est la finition intentionnelle du designer qui détermine la qualité.

Au fait, quand j'ai osé montrer cette première ébauche au président… « Oh, c'est intéressant ! Ça va nous permettre d'avancer plus facilement ! Avoir une base de travail change vraiment tout, merci !» C'est ce qu'il m'a dit.

Ouf ! Mes efforts ont payé… ! Ce soir, la bière sera bonne !

C'est tout pour aujourd'hui ! La partie de mise en page LP proprement dite sera publiée dans la seconde partie, après que le président aura fait ses corrections et que le design sera finalisé !

Et vous, pourquoi ne pas essayer la création de designs nouvelle génération en collaboration avec l'IA ?