De Figma à l'IA : obtenir une maquette par prompt

Une maquette générée par IA remplace-t-elle Figma ?

Une IA générative produit en quelques minutes des écrans crédibles à partir d’un prompt texte, ce qui accélère l’exploration de directions visuelles et la production de variantes. Elle échoue en revanche sur le système de design cohérent, les états réels (vide, erreur, chargement) et l’accessibilité : ces couches restent du travail humain, souvent finalisé dans Figma.

Ce tutoriel montre l’enchaînement concret de prompts qui permet d’obtenir une maquette exploitable, écran après écran, puis identifie le point précis où continuer avec l’IA devient contre-productif. Il s’adresse à un dirigeant ou un porteur de projet non développeur qui veut cadrer un brief avant de payer une agence ou de lancer une production.

Prérequis

• Un outil de génération d’images ou de maquette IA (Figma AI, Uizard, v0, ou équivalent)
• Un brief écrit, même court : cible, objectif de la page, ton de marque
• Un accès à Figma (gratuit) pour la reprise finale
• La liste des écrans réellement nécessaires (pas seulement la page d’accueil)
• Une vraie liste de contenus (textes, prix, mentions légales) plutôt que du lorem ipsum

Étape 1 : cadrer le brief avant le premier prompt

Un prompt vague donne une maquette générique. La qualité du résultat dépend directement de la précision du brief, pas de la sophistication de l’outil. Avant d’ouvrir l’IA, note en une phrase : qui visite cette page, ce qu’elle doit comprendre en cinq secondes, et l’action attendue en bas de page.

Exemple de prompt de démarrage :

“Génère une page d’accueil pour une marque de cosmétique premium française. Cible : femmes 30-50 ans, sensibles au naturel et au haut de gamme. Objectif : faire découvrir 3 produits phares et pousser vers la fiche produit. Ton : épuré, minéral, peu de texte. Palette : beige, blanc cassé, une touche de vert sauge.”

C’est la même logique qu’un brief créatif classique face à un prompt : plus le cadrage est serré en amont, moins l’IA improvise à ta place.

Étape 2 : générer les premiers écrans et variantes

C’est là que l’IA est réellement utile. Demande 3 à 5 variantes de la même page avec des directions différentes plutôt qu’une seule version parfaite dès le départ.

“Propose 4 variantes de cette page d’accueil : une avec un grand visuel produit en héro, une avec une vidéo de fond, une avec une mise en avant éditoriale (storytelling), une plus e-commerce classique avec grille produits visible dès le scroll.”

Cette étape remplace efficacement plusieurs heures de moodboard manuel. Elle sert à trancher une direction, pas à livrer un fichier final : garde-la comme un outil d’exploration rapide, exactement comme on le ferait pour générer un site sans passer par le canvas Webflow.

Étape 3 : affiner la direction retenue

Une fois une piste choisie, itère par petites touches plutôt que de tout régénérer.

“Garde la version 3 (storytelling). Réduis la taille du titre de 20%, remplace le bouton secondaire par un lien texte discret, et ajoute un bandeau de réassurance (livraison, retours, avis clients) juste sous le héro.”

Chaque prompt doit modifier un seul élément à la fois. C’est le même principe que pour écrire un bon prompt à Claude ou ChatGPT : une demande, un résultat vérifiable, une correction.

Étape 4 : introduire le vrai contenu et les vrais états

C’est le moment où l’IA commence à décrocher. Les maquettes générées tournent presque toujours autour d’un contenu idéal : titres courts, prix ronds, images parfaitement cadrées. La réalité d’un site est différente : un nom de produit trop long, un prix à trois décimales, une photo produit prise par le client lui-même.

Injecte les vrais textes dans le prompt et observe où la mise en page casse :

“Remplace le texte placeholder par ce vrai intitulé de produit : ‘Sérum concentré à l’huile de figue de barbarie, 30ml, 68€’. Vérifie que la carte produit reste lisible sans déborder.”

À ce stade, demande aussi les états manquants : page vide (aucun produit en stock), état de chargement, message d’erreur de formulaire. L’IA générative pense rarement à ces cas par défaut, ce qui explique en partie pourquoi un site IA magnifique en démo peut ne pas convertir en réalité.

Étape 5 : vérifier l’accessibilité avant de valider

Les maquettes IA privilégient souvent l’esthétique au détriment des contrastes de couleur, de la taille de texte réelle et de la hiérarchie des titres. Un fond beige sur texte blanc cassé est fréquent et illisible pour une partie des visiteurs.

Checklist rapide à ce stade :

• Contraste texte/fond conforme (au moins 4.5:1 pour le texte courant)
• Taille de police lisible sans zoomer (16px minimum en corps de texte)
• Un seul titre H1 par écran, hiérarchie logique des sous-titres
• Zones cliquables suffisamment grandes (44px minimum de hauteur)

Ces points rejoignent directement les critères détaillés dans le guide d’accessibilité WordPress : une maquette qui les ignore générera du travail de correction en développement, pas avant.

Étape 6 : revenir dans Figma pour le système de design

L’IA produit des écrans isolés. Elle ne construit pas de système de design cohérent : les espacements varient d’un écran à l’autre, les composants (boutons, cartes, champs de formulaire) ne sont pas réutilisables, et rien ne garantit qu’un bouton “Ajouter au panier” ressemble au même bouton trois pages plus loin.

C’est le moment de rapatrier les écrans validés dans Figma pour :

• Créer des composants réutilisables (boutons, cartes, inputs)
• Fixer une grille et des espacements constants
• Documenter les états de chaque composant (normal, survol, désactivé, erreur)
• Préparer les annotations pour le développement

Cette étape est incompressible dès qu’un site dépasse une landing page unique. Le comparatif entre no-code, low-code et IA générative détaille bien où s’arrête l’automatisation utile et où commence le travail structurant.

Tableau récapitulatif : IA vs Figma

Pièges courants

• Valider la première génération comme finale. Une bonne maquette IA est un point de départ à itérer, jamais une livraison.
• Tester uniquement avec du contenu placeholder. Les vrais textes révèlent 80% des problèmes de mise en page.
• Oublier les écrans secondaires. Panier vide, page 404, formulaire d’erreur : l’IA ne les génère pas spontanément.
• Confondre esthétique et accessibilité. Un rendu élégant peut être illisible pour une partie des visiteurs.
• Sauter l’étape Figma pour un projet multi-pages. Sans système de design, chaque écran devient une exception à corriger en développement.

Une maquette générée par IA reste un brouillon accéléré, pas un livrable. Le gain de temps se situe dans l’exploration des premières directions ; le travail qui fait qu’un site tient debout, cohérence des composants, états réels, accessibilité, se joue toujours dans Figma.