【Créer et exploiter Figma Make : deuxième partie】Avec Figma Make et Gemini, nous n'avons pas pu terminer en 3 heures ! Du brouillon de landing page aux retouches du PDG occupé jusqu'à la conception web complète

Cet article a été rédigé lors de la construction de la landing page l'année dernière. Bien qu'il s'agisse d'un article de l'époque, les progrès de l'IA sont si rapides que le contenu sera obsolète à sa publication…. C'est remarquable de voir la vitesse des progrès de l'IA. En pensant à l'accélération encore plus importante en 2026, je me demande si les designers et la veille informatique suivront bien le rythme, sinon on risque d'être laissés de côté…. C'est incroyable. Avec Figma Make et Gemini 3 actuels, il y a encore plus de possibilités. Veuillez considérer cet article comme un journal d'un designer qui utilisait l'IA mais était décontenancé par son évolution rapide et le feuilleter sans trop d'importance. Et pour les sections ajoutées, nous les marquerons avec des notes supplémentaires (en guise de commentaires) comme ceci, alors profitez-en comme d'une bande sonore secondaire.

Bonjour !

Je m'appelle Hasshi, UI designer chez Liberogic.

Dans l'article précédent, j'ai fièrement rapporté que j'avais créé un brouillon de landing page en 3 heures en utilisant Figma Make et Gemini !

Voici le résultat du travail précédent.

Veuillez consulter l'article précédent ici.

【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

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

Cet article en est la deuxième partie.

Après avoir rapporté au PDG, j'étais de très bonne humeur.

Avec ça, je pourrais répondre en un éclair aux demandes les plus farfelues du PDG !

Pour une qualité comme celle-ci en 3 heures, on ne peut rien redire !

…C'est à cette époque que j'avais ce genre de pensée naïve 😄

Cette fois, après avoir soumis mon travail au PDG avec assurance,

l'« enfer des corrections » nous attend ⭐️･:*+.\(( °ω° ))/.:+✨

Pour être honnête,

Cette belle mise en page créée avec FigmaMake a disparu sans laisser de trace sous les commentaires du PDG.

C'est quelque chose qui continue de se produire, même maintenant que l'IA a progressé.

Leçon de cette expérience : FigmaMake est imbattable pour créer des « tableaux de bord et des wireframes », mais peut-être qu'il est encore trop tôt pour des « landing pages pleines d'âme ».

La vitesse d'évolution de l'IA ces derniers temps est rapide et l'IA actuelle peut être utilisée de manière beaucoup plus multidimensionnelle. C'est incroyable !

Présentation du PDG : le mur du « rendu sympa »

Une landing page de type SaaS créée précédemment, avec une mise en page plutôt soignée. Je l'ai présentée au PDG avec toute la confiance du monde.

PDG ! J'ai créé la base de discussion pour la landing page en question à la vitesse de l'éclair en exploitant l'IA ! Comment trouvez-vous cette structure ?»

Oh, c'est rapide. (En regardant l'écran) ... Hmm, mais ça me semble un peu rigide.

Rigide ? (Non, puisque c'est un service B2B qui nécessite de la confiance, une présentation aussi ordonnée serait plutôt appropriée...)

Je voudrais quelque chose de plus enthousiasmant, avec de l'impact, « Boom ! » et une esthétique épurée. Et là, ajoute plus de mouvement et rends-le « sympa » avec des décorations plus élaborées.

Et voilà. L'instruction fatale « rends-le sympa ».

C'est le classement numéro 1 des instructions que tous les designers redoutent le plus et que l'IA comprend le moins bien.

On me dit souvent de rendre les choses « sympas » ou « maladroites ». Comprendre le sens profond de ces paroles est essentiel. Les designers doivent de plus en plus développer leurs compétences en communication. Pour quelqu'un comme moi, introverti et manquant de tact, c'est difficile au quotidien... (Si la communication était nécessaire dès le départ, j'aurais dû m'entraîner depuis l'enfance... Hélas.)

Pour les projets clients, nous aurions normalement dû approfondir davantage la psychologie profonde et les besoins du client, mais le PDG étant très occupé, il nous était difficile de trouver du temps pour des entretiens.

En raison de la relation PDG-employé, les choses sont devenues un peu trop décontractées, et nous nous sommes parfois retrouvés avec des mots-clés et des demandes approximatifs.

Puis nous sommes entrés dans la phase où toute l'équipe devait retraiter et réinterpréter ce que le PDG avait dit.

C'est une excuse, vous savez. Juste une excuse de ma part. Sincèrement.

Voix intérieure (« C'est sympa », mais c'est quoi au juste !? Même Gemini ne peut pas décoder ça ! Et arrêtez de donner des instructions de modification avec juste des onomatopées comme « Boom » et « Whoosh », s'il vous plaît !?)

Ce sentiment n'a pas changé jusqu'à aujourd'hui.

Figma VS Les commentaires impitoyables du PDG

C'est là que la vraie bataille a commencé.

Pour concrétiser l'idée « sympa » que le PDG avait en tête, nous avons apporté des modifications à la base créée avec Figma, mais...

C'est là que la compatibilité entre les outils a montré ses limites.

Ce que FigmaMake génère, c'est avant tout une « mise en page Web logiquement correcte ». Une belle composition de boîtes structurée rigoureusement avec Auto Layout.

C'est là que l'évolution de l'IA est impressionnante. Quand on génère avec le même prompt maintenant, la précision est bien meilleure. On sent vraiment les progrès de l'IA (j'ai ajouté des images de référence ci-dessous).

C'est beau, instructif, et ça marche bien comme modèle de template.

Mais les demandes du patron étaient

« Parsemez la toile de textures ! ! » « Faites sortir les éléments du cadre » « Et si on ajoutait un slider en diagonale ? »

Bref, rien que des décorations émotionnelles qui ignorent toute logique.

Chaque fois qu'on force à glisser des images décoratives dans les données générées par FigmaMake, Auto Layout crie au secours et l'ensemble de la mise en page se déglingue.

Ma petite voix intérieure (Oh non ! Ajouter cette image de fond a décalé toute la section du dessous ! FigmaMake, ce n'est pas ta faute, tu as raison. C'est juste que tu ne peux pas encore répondre à ce que le patron veut…!)

Le vide déprimant de tout refaire à la main

« Il faut resserrer l'espace blanc ici ! » « Rends le bouton plus rebondissant ! »

Face aux commentaires difficiles qui arrivaient successivement (annotations en rouge), j'ai dû, à contrecœur, désactiver l'Auto Layout créé par FigmaMake, décomposer les composants générés et les réorganiser manuellement.

Quelques heures plus tard. Ce qui restait à l'écran était un design data complètement différent, sans la moindre trace de FigmaMake.

Et voici la première version après tous ces ajustements. Le design avait complètement changé par rapport à la première version.

De plus, bien que tous les éléments existants aient l'Auto Layout activé, lorsque je les copie de FigmaMake vers Figma, l'Auto Layout se désactive bizarrement à certains endroits, ce qui m'oblige à réappliquer l'Auto Layout. Diverses tâches supplémentaires s'accumulent.

Je me suis rendu compte que les corrections avaient pris considérablement de temps.

Voix intérieure (Attendez... Ça aurait été plus rapide de faire ça à la main avec Photoshop ou Figma dès le départ... ? À quoi servaient mes trois heures ultra-rapides... ?)

Au bureau tard la nuit, quand j'ai réalisé ce fait, le sentiment de vide était indescriptible. Et c'est ma collègue senior qui m'a offert une boisson énergisante.

Collègue senior : « J'ai fini mon travail, je me sauve !! »

Ma collègue senior s'en va rapidement. Elle n'allait pas m'aider, finalement…

Conclusion : Les points forts et faibles de FigmaMake

Après cette correction sans fin, j'ai mieux compris les caractéristiques de l'outil FigmaMake.

Si vous l'utilisez à mauvais escient, cela peut augmenter le nombre de corrections nécessaires.

✅ Ce que FigmaMake fait bien (= ce qui se termine à la vitesse de l'éclair)

• Interfaces d'administration, tableaux de bord, écrans d'applications, etc.
  • Les mises en page en grille bien organisées, les formulaires et les tableaux sont imbattables.
  • Puisqu'il crée une « structure logique » instantanément, les interfaces d'administration SaaS et autres produisent des résultats de qualité tels qu'ils pourraient être utilisés tels quels (bien entendu, des retouches sont nécessaires).
• Wireframes initiaux et propositions de structure
  • Si l'objectif est de « vérifier la présence ou l'absence d'éléments », FigmaMake peut tout à fait être utilisé pour les landing pages (avant de créer le design détaillé).
  • De plus, lors de la finalisation des exigences, il est très pratique de pouvoir créer différentes variations.
  • Quand j'ai utilisé cela pour verbaliser les demandes des clients et les matérialiser sur place afin d'harmoniser les images, cela s'est avéré extrêmement utile.

❌ Ce que FigmaMake ne sait pas faire (= travail manuel requis)

• Création visuelle approfondie de LP (pages d'atterrissage)
  • Les conceptions qui séduisent par des « ornements » et des « décors » restent difficiles à maîtriser
  • Ce qui est généré reste une interface utilisateur organisée et facile à utiliser. Les dégradés et les motifs peuvent également être créés, mais sans instructions claires, le résultat peut ressembler à celui des années 2010.
  • Il faut du temps pour améliorer la précision des invites lors de la création de designs.
• Concrétiser des nuances vagues comme « c'est sympa »
  • Ici, le talent de traduction d'un designer humain reste nécessaire.
  • Une fois qu'on maîtrise davantage les invites, on devrait pouvoir créer plus fluidement avec des instructions plus précises (même si ce n'est pas encore possible pour moi)

Résumé : c'était tout de même excellent comme base de travail

Ainsi, pour la création de LP selon les instructions vagues d'un PDG, utiliser directement les données générées par FigmaMake s'est avéré difficile.

Cependant, comme mentionné dans mon article précédent, le point **« créer une première version en 3 heures à partir de zéro et extraire les demandes du PDG »** s'est avéré incontestablement utile. Auparavant, cela prenait beaucoup de temps et ralentissait la progression du projet.

La demande « avoir un impact et être fluide » n'aurait jamais émergé sans cette base de travail (pensée positive oblige).

Les enseignements de cette expérience

• Figma Make excelle dans la création de la « structure ».
• La « décoration et l'ornementation » sont le domaine où les designers excellent vraiment.
• Aucune IA ne peut (encore) répondre au « c'est bon » du PDG.

La prochaine fois, je vais oser une nouvelle tentative avec Figma Make sur le thème « refonte de l'interface utilisateur de notre outil de gestion interne ». (Avec une interface d'administration... elle devrait certainement y briller... !)

Quant à la correction du design de la page de destination...

Oui, je vais continuer à travailler dur manuellement à l'avenir !

Et concernant l'évolution de l'IA... Voici le design généré avec le même prompt qu'au moment de la rédaction de la première partie.

En quelques mois, la qualité de la génération initiale s'est considérablement améliorée. C'est vraiment surprenant.

L'amélioration de la précision est impressionnante. En cette période, je m'efforce de continuer à apprendre et à me perfectionner en design pour ne pas être dépassé par l'évolution de l'IA.

Et voici le site web que nous avons finalement complété

La page d'atterrissage elle-même est conforme à WCAG 2.2 AA, et
Lighthouse affiche aussi un score élevé (le diagnostic prend un peu de temps, mais essayez — parfois vous verrez un score parfait !)
Et bizarrement, elle s'est adaptée automatiquement à plusieurs langues!
N'hésitez pas à consulter également cet article sur l'adaptation multilingue
De nos jours, la traduction par navigateur est courante, mais pouvoir créer automatiquement un site traduit sans changement de langue et à bas coût est vraiment très pratique!

Qu'en pensez-vous?
Ne trouvez-vous pas que c'est devenu très propre et bien fini🎵

Même si j'ai écrit bien des choses, l'avantage d'avoir eu une base de travail solide a vraiment réduit le nombre d'heures de travail!! Avant, nous passions beaucoup de temps à l'étape du wireframing, puis nous devions transposer cela en design et modifier encore le contenu par la suite — tout cela a considérablement réduit les heures de travail. La prochaine fois que j'utiliserai l'IA, je vais générer des prompts bien pensés avant de me lancer. Et me récompenser avec une bière.