[Créer et valoriser avec Figma Make : deuxième partie] Ça n'a pas été fini en 3 heures avec Figma Make et Gemini ! Le chemin, de l'ébauche de LP à la finalisation du design web, où les "corrections en rouge" d'un président très occupé ont fait avancer le travail

Cet article a été rédigé l'an dernier, lors de la création de la LP. Bien qu'il s'agisse d'un ancien article, les progrès de l'IA sont si rapides que son contenu est aujourd'hui dépassé… Il est impressionnant de voir à quelle vitesse l'IA évolue. En 2026, cette accélération va encore s'intensifier, et il semble que les designers devront eux aussi suivre le rythme, tant dans leur façon de travailler que dans leur veille d'information, sous peine de se faire distancer… Vraiment, c'est incroyable. Figma Make et Gemini 3 permettent aujourd'hui de faire encore plus de choses. Je vous invite à lire cet article comme le journal d'un designer qui, tout en utilisant l'IA, se débattait avec ses évolutions rapides. Les passages que j'ai ajoutés sont accompagnés de notes complémentaires (en quelque sorte, des remarques critiques), à découvrir comme une piste audio supplémentaire.

Bonjour !

Je suis Hasshi, UI designer chez Liberogic Inc.

Dans mon article précédent, j'avais annoncé avec enthousiasme : « J'ai créé une ébauche de LP en 3 heures avec Figma Make et Gemini ! »

Voici mon livrable précédent.

Vous pouvez consulter l'article précédent ici.

[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

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

Cet article en constitue la seconde partie.

Après avoir fait mon rapport au président, j'étais plein d'entrain.

Avec ça, je pourrai répondre à ses demandes déraisonnables à toute vitesse !

Avec une qualité pareille en seulement trois heures, il n'y aura rien à redire, non ?

... C'était le temps où je pensais encore comme ça, moi aussi. 😅

Cette fois, voici la suite de ce qui s'est passé après avoir présenté, plein d'enthousiasme, mon travail au président :

Je vous présente « l'enfer des corrections » ⭐️･:*+.\(( °ω° ))/.:+✨

Pour aller droit au but :

La belle mise en page que j'avais créée avec Figma Make a complètement disparu après le commentaire du président.

Je pense que cela continuera d'arriver, même maintenant que l'IA a progressé.

Leçon de cette expérience : Figma Make est imbattable pour les tableaux de bord et les wireframes, mais pour une landing page pleine d'émotion, il est peut-être encore trop tôt...

Les progrès de l'IA vont si vite qu'on peut désormais l'utiliser de bien plus de façons. Franchement, c'est impressionnant !

Présentation au PDG : le mur du « Fais-le-moi joli »

La proposition de landing page façon SaaS, plutôt réussie, que j'avais réalisée précédemment. Je l'ai présentée au PDG avec pleine confiance.

Monsieur le PDG ! J'ai créé une première version de la landing page en un temps record grâce à l'IA ! Qu'en pensez-vous de cette structure ?"

Ah, c'est rapide. (en regardant l'écran) ... Hmm, mais ça fait un peu raide, non ?"

Raide ? (Non, pour un service BtoB qui a besoin d'inspirer confiance, un rendu aussi structuré me semble approprié...)

Je voudrais quelque chose de plus enthousiasmant, en fait, avec un vrai effet waouh, quelque chose de net et élégant, tu vois ? Et ici, ajoute des animations et une belle décoration "qui claque".

Et voilà l'instruction fatale : « Fais-le-moi joli ».

Numéro un du classement des consignes que tous les designers redoutent le plus, et que l'IA comprend le moins bien.

On entend souvent « fais-le joli » ou « un peu trop cheap ». Il faut savoir lire le sens caché derrière ces mots. Le métier de designer demande aussi de bonnes compétences relationnelles. Pour moi, qui ai du mal à communiquer et à lire l'ambiance, c'est souvent difficile, et chaque jour est un entraînement... (Si les compétences relationnelles étaient nécessaires en design, j'aurais dû m'y entraîner dès l'enfance... Quel dommage.)

Pour les projets clients, nous creusons ensuite davantage pour comprendre les attentes profondes du client, mais comme le président est très occupé, il est difficile de trouver le temps nécessaire pour un véritable entretien.

En raison de la relation entre le président et les employés, les choses restent parfois floues, et il arrive que le brief et les demandes deviennent approximatifs.

Vient ensuite la phase où nous reprenons ensemble les propos du président, très occupé, pour les retravailler.

C'est une excuse. Ce n'était que mon excuse, vraiment.

Le fond de ma pensée (« Une belle ambiance » ? Même Gemini-sensei ne pourrait pas deviner ça ! Pourriez-vous arrêter de me donner des consignes de correction uniquement avec des onomatopées comme « dōn » et « shuu » ?!)

Ce sentiment n'a pas changé à ce jour

FigmaMake VS les commentaires impitoyables du président

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

Pour concrétiser la « belle ambiance » que le président avait en tête, nous avons apporté des corrections à la base créée avec FigmaMake...

C'est là que la compatibilité des outils a commencé à mordre.

Ce que FigmaMake génère, c'est avant tout une « mise en page web logiquement correcte ». Une belle structure en boîtes, entièrement construite avec Auto Layout.

C'est là que l'évolution de l'IA est impressionnante. Si l'on génère aujourd'hui avec le même prompt, la précision est nettement meilleure. On ressent vraiment les progrès de l'IA (une image de référence est jointe ci-dessous).

Le design est soigné et instructif, et il se prête bien à une utilisation comme thème de modèle.

Cependant, les demandes du président sont

« Et si on ajoutait des textures en arrière-plan !! » « Fais dépasser les éléments du cadre ! » « Et si on essayait une diagonale en biais ? »

Ce ne sont que des décorations émotionnelles qui ignorent toute logique.

Chaque fois que l'on force l'insertion d'images décoratives dans les données générées par FigmaMake, Auto Layout se met à protester et l'ensemble de la mise en page se désorganise peu à peu.

Voix intérieure （Ah ! Si j'ajoute cette image de fond, la section du dessous se décale aussi ! FigmaMake, ce n'est pas ta faute, tu as raison. Mais je n'arrive pas encore à répondre entièrement aux demandes du président…！）

Le sentiment de vide de tout refaire « à la main »

« Réduis cet espace ici, et plus vite !! » « Fais en sorte que le bouton rebondisse davantage ! »

Pour répondre aux commentaires tranchants (corrections rouges) qui arrivaient sans relâche, j'ai dû, la mort dans l'âme, désactiver l'Auto Layout créé par FigmaMake, décomposer les composants générés et les repositionner manuellement.

Quelques heures plus tard, il ne restait à l'écran que des données de design totalement différentes, sans la moindre trace de FigmaMake.

Voici donc la première version, après de nombreuses retouches. Le design final est totalement différent de cette première ébauche.

Et même si tous les éléments existants ont un Auto Layout, certaines parties perdent curieusement leur Auto Layout lorsqu'on les copie de FigmaMake vers Figma, ce qui oblige à le réappliquer manuellement.

Sans m'en rendre compte, j'ai passé beaucoup de temps à faire des retouches.

La voix intérieure (Hein ? Attends… n'aurait-il pas été plus rapide de tout faire à la main dès le départ dans Photoshop ou Figma… ? Mes trois heures de travail ultra-rapide, à quoi auront-elles servi… ?)

Dans le bureau désert, en nuit profonde, la prise de conscience de cette réalité m'a laissé un sentiment de vide. C'est alors qu'une collègue plus expérimentée m'a offert une boisson énergisante.

La collègue : « Moi, j'ai fini mon travail, je rentre !! »

Ma collègue s'éclipse avec panache. Elle ne va donc pas m'aider…

Conclusion : les « points forts » et les « points faibles » de FigmaMake

Suite à ce long travail de correction, j'ai mieux compris les caractéristiques de l'outil Figma Make.

Utilisé au mauvais moment, il peut au contraire augmenter le temps de correction.

✅ Ce que Figma Make fait bien (c'est-à-dire : il va très vite)

• Interfaces d'administration, UI de tableaux de bord, écrans d'applications, etc.
  • Il excelle particulièrement sur les mises en page en grille bien ordonnées, les formulaires et les tableaux.
  • Il génère en un instant une « structure logique », si bien que le résultat peut parfois sembler utilisable tel quel pour un écran d'administration SaaS (bien sûr, des retouches restent indispensables).
• Premiers wireframes et propositions de structure
  • Pour vérifier l'équilibre et la présence des éléments à un stade précoce (avant de peaufiner le design), il est tout à fait adapté aux pages de destination.
  • Il est également très pratique pour explorer différentes variantes lors de la définition des besoins.
  • Pour traduire les demandes du client en mots, puis les concrétiser sur-le-champ afin d'aligner les visions, il s'est révélé particulièrement précieux.

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

• La finalisation visuelle des LP (landing pages)
  • Les designs misant sur les touches décoratives et les ornements restent encore difficiles à réussir
  • Ce qui est généré reste avant tout une interface claire et facile à utiliser. Des dégradés, des motifs et autres éléments décoratifs sont possibles, mais sans instructions précises, le résultat peut vite rappeler le style des années 2010.
  • Améliorer la précision des prompts lors de la création d'un design demande du temps.
• La concrétisation d'une nuance vague du type « quelque chose de sympa »
  • Cette traduction reste, pour l'instant, une compétence propre aux designers humains.
  • Avec une bonne pratique des prompts, on peut sans doute gagner en précision et en fluidité (ce qui n'est pas encore à ma portée)

En résumé : malgré tout, c'était un excellent point de départ (« maquette préliminaire »)

Ainsi, pour une LP née d'une consigne vague du président, il était difficile de reprendre directement les données générées par FigmaMake.

Cela dit, comme je l'ai écrit dans l'article précédent, **"obtenir une première version en 3 heures à partir d'une page blanche, puis faire émerger les souhaits du président"** a incontestablement été utile. Auparavant, j'y consacrais beaucoup de temps, ce qui retardait l'avancement du travail.

Les demandes du type « quelque chose de percutant et de fluide » ne sont apparues que parce qu'il existait une première ébauche (pensée positive).

Ce que j'ai appris cette fois-ci

• Figma Make est expert dans la création de la « structure ».
• La « décoration (ashirai) » est le savoir-faire qui fait la force du designer.
• Une IA capable de répondre au « ça me plaît bien » du président n'existe pas encore.

La prochaine fois, sans me décourager, je voudrais retenter ma chance avec Figma Make en refaisant « l'interface de l'outil de gestion interne ». (Une interface d'administration, c'est sûrement là qu'il pourra briller…!)

Quant aux retouches du design de la landing page……

Bon, je continuerai à travailler patiemment à la main !

Quant à l'évolution de l'IA… Voici le design généré avec le même prompt que pour l'article de la première partie.

En quelques mois, la qualité de la première génération a énormément progressé. C'est assez stupéfiant.

Les progrès sont tellement rapides que c'est presque effrayant. Aujourd'hui, je me dis que je dois continuer à étudier le design chaque jour pour ne pas me laisser distancer par l'évolution de l'IA.

Et voici le site web que nous venons de terminer.

La page elle-même est conforme à WCAG 2.2 AA, et
Lighthouse obtient aussi d'excellents scores (le diagnostic prend un peu de temps, mais essayez-le ! Il arrive même d'obtenir le score maximal !)
De plus, comme par magie, le site est disponible en plusieurs langues !
Pour la mise en place d'un site multilingue, consultez aussi cet article !
Bien que la traduction par le navigateur soit de plus en plus courante, il est très pratique de pouvoir traduire le site automatiquement et à moindre coût, sans avoir à changer de version !.

Qu'en pensez-vous ?
Je trouve qu'il est plutôt bien fini, non ? 🎵

J'ai essayé de tout écrire dans tous les sens, mais je dois dire que disposer d'une première ébauche nous a vraiment permis de réduire considérablement le temps de travail ! Avant, la phase de wireframe me prenait beaucoup de temps, puis il fallait traduire tout cela en design et modifier encore le contenu, ce qui demandait énormément d'efforts. Ces étapes ont été nettement allégées. La prochaine fois que j'utiliserai l'IA, je commencerai par générer un prompt bien structuré. Et pour me récompenser, une bière !