Topics

Cet article a été écrit l'année dernière, lors de la création de notre page d'accueil. Bien qu'il ait été rédigé à cette époque, l'IA a tellement progressé depuis que sa publication actuelle le rend obsolète. C'est incroyable la vitesse à laquelle l'IA évolue. Sachant que son développement s'accélérera encore d'ici 2026, les designers devront adapter leurs méthodes de travail et se tenir informés des dernières nouveautés, sous peine d'être dépassés. C'est vraiment stupéfiant. FigmaMake et Gemini3 offrent désormais des possibilités bien plus vastes. J'espère que vous parcourrez cet article en le considérant comme le journal d'un designer qui exploite pleinement l'IA, mais qui est aussi parfois déconcerté par son évolution. J'ajouterai également des commentaires aux passages que j'ai enrichis ; n'hésitez donc pas à les apprécier comme un complément audio.

Bonjour!

Je m'appelle Hasshi et je travaille comme concepteur d'interface utilisateur chez Liberogic Inc.

Dans mon article précédent, j'avais annoncé avec enthousiasme avoir créé une première ébauche de page d'accueil en seulement trois heures grâce à FigmaMake et Gemini.

Voici le résultat des travaux précédents.

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

[Créer et utiliser FigmaMake : Partie 1] 3 heures avec FigmaMake et Gemini ! Un flux de production web nouvelle génération pour créer une page d’accueil préliminaire qui accélérera le processus de validation pour les PDG débordés.

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

Cet article en constitue la seconde partie.

Après avoir fait mon rapport au président, je me suis senti bien.

Grâce à cela, nous pourrons répondre même aux demandes déraisonnables du président en un temps record !

Avec une telle qualité en 3 heures, il n'y a rien à redire !

...Il fut un temps où je pensais comme ça aussi, lol

Cette fois-ci, je l'ai soumise au président avec un grand enthousiasme.

"La révision de l'enfer"Nous livrerons ⭐️･:*+.\(( °ω° ))/.:+✨

Pour résumer,

La magnifique mise en page que j'avais créée avec FigmaMake a disparu sans laisser de trace après la déclaration du président.

Je pense que cela continuera de se produire même maintenant que l'IA a évolué.

Leçon à retenir : FigmaMake est idéal pour créer des tableaux de bord et des maquettes, mais il n’est peut-être pas encore prêt pour la création de pages d’accueil émotionnelles.

L'intelligence artificielle a connu une évolution fulgurante ces derniers temps et trouve désormais des applications dans de nombreux domaines. C'est incroyable !

Présentation du président : L'obstacle du « faire bonne figure »

J'étais plein de confiance lorsque j'ai présenté au PDG la proposition de page d'accueil de type SaaS que j'avais créée la dernière fois, et qui était plutôt bien faite.

Président ! J'ai utilisé l'IA pour créer une première ébauche de cet album en un temps record ! Que pensez-vous de sa structure ?

Waouh, c'était rapide. (Regardant l'écran)... Hmm, mais c'est plutôt difficile.

Est-ce trop rigide ? (Non, c'est un service B2B qui repose sur la confiance, il est donc préférable d'être aussi organisé...)

Ne pourriez-vous pas le rendre plus dynamique, lui donner plus d'impact et de dynamisme ? Et pourquoi pas ajouter du mouvement et des éléments décoratifs pour l'embellir ?

Voilà.«Faites en sorte que ce soit beau.»

Il s'agit de l'instruction numéro un que tous les concepteurs redoutent le plus et que l'IA a le plus de mal à comprendre.

On me dit souvent « c'est bien » ou « on dirait que c'est bâclé ». Il est important de comprendre le sens profond de ces mots. Nous vivons à une époque où les compétences en communication des designers sont également évaluées. Ayant moi-même des difficultés à communiquer et un manque de confiance en moi, c'est compliqué, alors chaque jour est une leçon… (Si la communication était si importante pour les designers, je les aurais formés dès leur plus jeune âge… soupir.)

Lorsque nous travaillons avec des clients, nous approfondissons la psychologie de l'autre personne et ce qu'elle souhaite, mais le président est très occupé et n'a pas beaucoup de temps à leur consacrer.

En raison des relations entre le président et les employés, les choses peuvent se relâcher et les demandes peuvent finir par être formulées avec des mots aléatoires.

Nous entrons ensuite dans la phase où nous travaillons tous ensemble pour digérer et recréer les paroles du président très occupé.

Ce n'était qu'une excuse. Une simple excuse de ma part.

voix intérieure(Que voulez-vous dire par « ça a l'air bien » ? Même Gemini-sensei ne peut pas lire aussi loin ! Pouvez-vous arrêter de donner des instructions de correction en utilisant uniquement des onomatopées comme « boum » et « vrombissement » ?)

Ce sentiment n'a pas changé, même maintenant.

FigmaMake contre les commentaires brutaux du PDG

C'est à partir de là que la véritable bataille a commencé.

Afin de traduire le « bon sentiment » que le président a en tête, nous apportons des corrections à la base créée dans FigmaMake...

C’est là que la compatibilité des outils entre en jeu.

FigmaMake ne génère que« Mise en page web logiquement correcte »Une magnifique mise en page en boîte créée avec Auto Layout.

Voici un autre aspect fascinant de l'évolution de l'IA. Si vous générez un texte à partir de la même consigne aujourd'hui, la précision est excellente. On constate véritablement les progrès de l'IA (voir l'image ci-dessous).

Il est beau, éducatif et facile à utiliser comme thème modèle.

Cependant, la demande du président

« Ajoutons de la texture à l'arrière-plan ! » « Faisons en sorte que les éléments débordent des bords. » « Et si on ajoutait des fentes en diagonale ? »

tel que,Décoration émotionnelle qui défie la logiqueSeulement.

Chaque fois que j'essaie d'insérer de force une image décorative dans les données générées par FigmaMake, la mise en page automatique se met à hurler et toute la mise en page s'effondre.

Voix intérieure (Oh non ! Quand j'ai ajouté l'image de fond, la partie inférieure a bougé aussi ! FigmaMake, tu n'y es pour rien, tu as raison. Mais je ne peux toujours pas satisfaire pleinement aux exigences du PDG… !)

Le vide de devoir le recréer à la main

« Resserrez les marges ici ! » « Rendez les boutons plus mobiles ! »

Entrez l'un après l'autreCommentaire du démon (en rouge)Pour remédier à cela, j'ai désactivé à contrecœur la mise en page automatique créée par FigmaMake, désassemblé les composants générés et les ai réorganisés manuellement.

Quelques heures plus tard, il ne restait plus que ça à l'écran :Les données de conception sont complètement différentes et ne ressemblent même pas à celles de FigmaMake.

Voici la première version après plusieurs modifications. Le design est complètement différent de la première version.

De plus, bien que tous les éléments existants soient disposés automatiquement, lorsque vous copiez de FigmaMake vers Figma, la disposition automatique est annulée pour certaines parties, ce qui signifie que vous devez effectuer à nouveau la disposition automatique.

Je me suis rendu compte que la réparation prendrait beaucoup de temps.

Pensées intérieures (Hein ? N'aurait-il pas été plus rapide de faire ça à la main dans Photoshop ou Figma dès le départ… ? Comment ai-je pu passer par là en trois heures chrono… ?)

J'ai ressenti un vide en réalisant cela tard dans la nuit, au bureau. C'est alors que mon supérieur m'a offert une boisson énergisante.

Senior : « Je rentre chez moi parce que j'ai fini de travailler ! »

Le vieil homme s'éclipse. Il ne va pas m'aider...

Conclusion : Points forts et points faibles de FigmaMake

Après avoir surmonté ce véritable casse-tête de réparation, j'ai appris à connaître les caractéristiques de l'outil appelé FigmaMake.

Utilisée au mauvais endroit, elle augmentera en réalité la quantité de travail nécessaire pour effectuer les corrections.

✅ Les points forts de FigmaMake (= il termine très rapidement)

• Écran de gestion, interface utilisateur du tableau de bord, écran d'application, etc.
  • Les mises en page claires et épurées (grilles, formulaires, tableaux, etc.) sont optimales.
  • Elle crée instantanément une structure logique, ce qui vous permet de créer quelque chose d'une telle qualité que vous penserez qu'il pourrait être utilisé tel quel pour les écrans de gestion SaaS (bien que quelques ajustements soient nécessaires, bien sûr).
• Maquette initiale et plan de structure
  • Si vous êtes au stade de « vérifier s’il manque des éléments ou s’ils sont inutiles », LP peut être utilisé sans problème (avant que la conception ne soit entièrement développée).
  • Il est également très utile car il permet de créer différents modèles lors de la définition des besoins.
  • Cela s'est avéré extrêmement utile pour verbaliser les demandes du client, leur donner forme sur-le-champ et peaufiner l'image.

❌ Ce que FigmaMake ne fait pas bien (= travail manuel requis)

• Création de visuels pour la page d'accueil (landing page)
  • Je ne suis toujours pas douée pour créer des designs attrayants avec des "décorations" et des "éléments décoratifs".
  • L'interface utilisateur générée est organisée et facile à utiliser. Vous pouvez ajouter des éléments décoratifs comme des dégradés et des motifs, mais sans instructions claires, le résultat final risque d'avoir un aspect vieillot.
  • Améliorer la précision des invites lors de la création d'un design prend du temps.
• L'incarnation de la nuance vague de « se sentir bien »
  • Cela nécessite toujours les compétences de traduction des concepteurs humains.
  • Si j'utilise plus souvent les invites, je pense que je pourrai les créer plus facilement avec des instructions plus précises (je n'y arrive pas encore).

Résumé : Cela reste un excellent point de départ.

Donc,Il était difficile d'utiliser les données générées par FigmaMake telles quelles pour la « production de LP basée sur des instructions vagues du président ».est.

Cependant, comme je l'écrivais dans mon article précédent, cela s'est avéré extrêmement utile pour « passer d'une feuille blanche à une ébauche en trois heures et obtenir l'accord du président sur ma proposition ». Auparavant, cela aurait pris beaucoup plus de temps et il aurait fallu beaucoup de temps pour faire avancer les travaux.

On a également demandé quelque chose de « lumineux et rafraîchissant ».Les opinions n'ont émergé que parce qu'il y avait un point de départ.Voilà, c'est tout (la pensée positive).

Ce que j'ai appris cette fois-ci

• FigmaMake est un professionnel de la création de « structures ».
• C'est au niveau de la décoration que les compétences du designer sont mises à l'épreuve.
• Il n'existe pas encore d'IA capable de répondre au «bon pressentiment» du président.

La prochaine fois, je retenterai l'expérience avec FigmaMake en repensant l'interface utilisateur de notre outil de gestion interne. (S'il s'agit d'une interface d'administration, je suis sûre qu'elle sera superbe !)

Concernant les modifications apportées à la conception du LP...

Oui, je continuerai à travailler dur sur ce travail à la main !

Et en parlant de l'évolution de l'IA... Voici le design généré à partir des mêmes invites que lors de la création du premier article.

La qualité de la première génération a fait une progression fulgurante en quelques mois seulement, ce qui est assez surprenant.

L'augmentation fulgurante de la précision est assez effrayante. Aujourd'hui, j'ai envie d'étudier le design tous les jours pour pouvoir suivre l'évolution de l'IA.

etVoici le site web terminé

Le LP lui-même est conforme aux normes WCAG 2.2AAEt je le fais,
Lighthouse obtient également d'excellents résultats (cela prend un peu de temps, mais essayez ! Parfois, vous obtiendrez la note maximale !)
Et mystérieusement,Assistance multilingue！
Pour obtenir de l'aide en plusieurs langues, veuillez consulter cet article.N'hésitez pas à y jeter un coup d'œil !
La traduction automatique via navigateur est devenue la norme, mais c'est tellement pratique de pouvoir utiliser un site de traduction à moindre coût sans avoir à changer de navigateur !

Qu'en penses-tu?
Vous ne trouvez pas que le résultat est plutôt réussi ?🎵

J'ai écrit plein de choses différentes, mais je pense vraiment qu'avoir une ébauche en tête m'a permis de réduire considérablement le travail ! Avant, j'aurais passé énormément de temps sur la conception, puis j'aurais dû m'occuper de la mise en page et modifier le contenu. Cette nouvelle approche m'a fait gagner un temps précieux. La prochaine fois que j'utiliserai l'IA, je veillerai à générer des idées précises avant de me lancer. Et puis, je me suis offert une bière pour me récompenser.