L'IA de Figma ne fonctionne que si vous lui donnez de bonnes instructions. Des prompts vagues produisent des mises en page génériques que vous devez reconstruire de zéro. Des prompts spécifiques — avec le type d'écran, les sections, les composants, la taille du cadre et l'espacement — produisent régulièrement 70–85% de résultats prêts pour la production en un seul passage. Ces 15 modèles sont structurés pour la pile IA 2026 de Figma : le Design Agent, Figma Make, Skills, et les fonctionnalités gratuites (auto layout, renommer les calques, remplacer le contenu) qui ne coûtent aucun crédit.
Copiez n'importe quel modèle, remplacez les espaces réservés entre crochets par votre produit, et faites-le passer dans l'Optimiseur de Prompts gratuit si vous voulez des contraintes plus strictes. Pour une optimisation en un clic dans ChatGPT, Claude et Gemini pendant que vous rédigez les instructions de l'agent, TresPrompt ajoute une structure de style ICCSSE à votre barre latérale.
Point Clé
Chaque bon prompt Figma AI nomme quatre choses : quel écran vous construisez, quels composants publiés utiliser, la taille du cadre et les règles d'espacement. Ajoutez des contraintes négatives ("n'utilisez pas de cadres sans nom", "pas de lorem ipsum") et l'agent arrête de deviner. Les Skills encodent ces modèles pour que vous n'ayez pas à les retaper à chaque session.
Modèles Design Agent (Écrans sur Canevas)
1
Page de paramètres mobile
Créez une page de paramètres mobile (390×844) avec :
1. Compte — avatar, nom, email, boutons d'édition
2. Notifications — boutons bascule pour email, push, SMS
3. Apparence — bouton bascule mode sombre, sélecteur de taille de police
4. Sécurité — changer mot de passe, bouton bascule 2FA
5. Pied de page — bouton destructeur de déconnexion, texte version de l'app
Utilisez uniquement les composants publiés. Auto layout : espacement d'éléments 16px, 32px entre sections. Composant Section Header pour les étiquettes de groupe.
2
Aperçu tableau de bord (bureau)
Créez un tableau de bord analytique bureau (1440×900) avec :
- Navigation supérieure : logo, recherche, menu utilisateur
- Barre latérale gauche : 5 éléments de navigation, état actif sur "Aperçu"
- Principal : 4 cartes KPI en ligne, graphique linéaire en dessous, tableau d'activité récente (5 lignes)
Utilisez les variables du système de design pour les couleurs et l'espacement. Composant Card pour les KPI. Composant Table pour l'activité. N'utilisez pas d'étiquettes de données de graphique génériques comme "Série 1".
3
Flux d'intégration (3 cadres)
Créez 3 écrans d'intégration mobile (390×844), de gauche à droite :
1. Bienvenue — titre, sous-texte, CTA principal "Commencer"
2. Permissions — liste notifications + localisation avec boutons bascule
3. Succès — zone d'illustration coche, CTA "Vous êtes prêt"
Utilisez les composants Primary Button et Secondary Button. Indicateur de progression montrant étape 1/3, 2/3, 3/3. Espacement horizontal cohérent de 24px sur tous les cadres.
4
État vide + état d'erreur
Créez deux cadres mobiles (390×844) :
Cadre A — Résultats de recherche vides : zone d'icône, titre "Aucun résultat", texte de corps, bouton secondaire "Effacer les filtres"
Cadre B — Erreur : icône d'avertissement, "Quelque chose s'est mal passé", "Réessayer" principal, "Contacter le support" tertiaire
Utilisez les composants Empty State et Alert publiés si disponibles. Contenu centré, largeur max 280px pour le bloc de texte.
5
Paramètres accessibles (agent + a11y)
Créez une page de paramètres mobile (390×844) avec exigences d'accessibilité :
- Éléments interactifs minimum 44×44px zones tactiles
- Contraste de texte minimum 4,5:1 (utilisez les couleurs de texte du système de design)
- Hiérarchie de titres H1 → H2, pas de niveaux sautés
- Les boutons bascule incluent des étiquettes de texte visibles (pas seulement des icônes)
- Les états d'erreur utilisent couleur ET texte (pas seulement la couleur)
Utilisez les composants publiés. Auto layout espacement 16px / 32px.
📬 Cela vous apporte de la valeur ?
Une insight IA actionnable par semaine. Plus un pack de prompts gratuit quand vous vous abonnez.
S'abonner gratuitement →
Modèles Figma Make (Prototype / Code)
6
Page d'accueil marketing (Make)
Construisez un site marketing une page à partir de ce cadre Figma :
- Hero : titre, sous-titre, capture d'email + CTA
- 3 colonnes de fonctionnalités avec icônes
- Ligne de logos de preuve sociale
- Pied de page avec liens
Respectez l'espacement et les couleurs du cadre sélectionné. Responsive mobile. Pas de bibliothèques externes sauf spécifié dans les notes du cadre.
7
Prototype interactif (Make)
Créez un prototype cliquable à partir des cadres [lister les noms de cadres] :
- Cliquer sur "S'inscrire" navigue vers le cadre de formulaire d'inscription
- Soumettre montre l'état toast de succès
- "Retour" revient à l'écran précédent
Utilisez les composants du fichier. Préservez les états de survol sur les boutons principaux. N'ajoutez pas de nouveaux écrans non présents dans le fichier de design.
Modèles Skills (Instructions d'Agent Réutilisables)
Sauvegardez ceux-ci comme fichiers markdown Skills pour que l'agent suive les conventions de l'équipe à chaque fois.
8
Skill : /settings-page
Lors de la création d'écrans de paramètres :
- Toujours utiliser le modèle Section Header + liste groupée
- Inclure un pied de page avec version de l'app (style caption) et déconnexion destructrice
- Mobile par défaut 390×844 sauf si l'utilisateur spécifie bureau
- Utiliser le composant Toggle pour les paramètres booléens, jamais de cases à cocher personnalisées
- Espacement : 16px dans les groupes, 32px entre groupes, 24px padding écran
9
Skill : /data-table
Lors de la création de tableaux :
- Utiliser les composants Table/Header et Table/Row
- Inclure une colonne d'icône de tri seulement si l'utilisateur le demande
- Hauteur de ligne 48px minimum pour le tactile
- Tronquer le texte long avec des points de suspension, jamais plus de 2 lignes dans les cellules
- État vide sous le tableau si zéro ligne
Fonctionnalités Gratuites (Zéro Crédit)
10
Remplacer le Contenu (par lot)
Remplacez tout le lorem ipsum dans le cadre sélectionné par du contenu réaliste [B2B SaaS / e-commerce / santé]. Noms : divers, plausibles. Adresses : format US. Noms de produits : fictifs mais professionnels. Gardez des nombres de caractères similaires aux espaces réservés pour que la mise en page ne casse pas.
11
Renommer les calques (préparation handoff)
Renommez tous les calques de cette page en utilisant le modèle : [Section]/[Composant]/[État]
Exemple : Settings/NotificationRow/Default
Ne renommez pas les cadres d'arrière-plan verrouillés. Ignorez les calques cachés.
Prompts MCP + Handoff Code (Claude Code / Cursor)
12
React depuis cadre Figma
Lisez le cadre Figma sélectionné via MCP. Générez un composant React utilisant [Tailwind / notre bibliothèque Shadcn] :
- Respectez l'espacement et les couleurs des tokens de design dans le fichier
- Utilisez du HTML sémantique (nav, main, section)
- Incluez des points de rupture responsive à 768px et 1024px
- Exportez comme SettingsPage.tsx avec des props typées pour les données utilisateur
N'encodez pas en dur les valeurs hex — utilisez les noms de tokens des variables Figma.
Modèles d'Exploration & Comparaison
13
Trois directions de mise en page
Générez 3 approches de mise en page différentes pour [type d'écran] sur bureau 1440×900 :
A — navigation barre latérale
B — navigation onglets supérieurs
C — hub basé sur cartes
Même contenu dans les trois. Utilisez les composants publiés. Placez les cadres côte à côte avec un écart de 80px. Étiquetez chaque cadre "Direction A/B/C" en petit texte de légende.
14
Prompt audit système de design
Examinez la page sélectionnée et listez :
- Composants non issus de la bibliothèque publiée (marquez comme "détachés")
- Couleurs n'utilisant pas les variables
- Texte n'utilisant pas les styles de texte
- Écarts auto layout qui ne sont pas 4/8/16/24/32
Sortie sous forme de liste de contrôle dans les notes du cadre. Ne corrigez pas automatiquement — rapportez seulement.
15
Passage d'affinement (deuxième prompt)
Sur le cadre généré, appliquez uniquement ces corrections :
1. Augmentez l'espacement vertical entre sections à 32px
2. Changez le bouton principal vers la variante Button/Primary/Large
3. Ajoutez un texte d'aide sous le champ email : "Nous ne partagerons jamais votre email"
4. Alignez toutes les icônes à 24×24 dans les lignes de liste
Ne restructurez pas la mise en page. N'ajoutez pas de nouvelles sections.
Comment Enchaîner les Modèles
Flux de travail de production : Modèle 13 (explorer) → choisir direction → Modèle 1 ou 2 (écran complet) → Modèle 15 (affiner) → Modèle 11 (renommer) → Modèle 12 (MCP vers code). Chaque étape utilise un prompt ciblé au lieu d'une instruction géante qui confond l'agent.
Pour l'écosystème Figma AI complet (Agent, Make, MCP, Skills, Sites), voir notre guide complet 2026. Pour la configuration étape par étape de l'agent, voir comment utiliser le Design Agent. Pour la budgétisation des crédits, voir crédits Figma AI expliqués.
Questions Fréquemment Posées
Est-ce que cela fonctionne sur le plan gratuit Figma ?
Les modèles 10–11 (Remplacer le Contenu, renommer) fonctionnent sur les plans gratuits. Design Agent et Make nécessitent des plans payants et un accès bêta. MCP fonctionne avec n'importe quel plan qui peut activer le Mode Dev / MCP pour votre siège.
Dois-je coller tout le modèle ou le raccourcir ?
Commencez avec le modèle complet. Une fois que vous voyez quelles lignes l'agent ignore, raccourcissez. Les prompts plus courts ne fonctionnent qu'après que vous sachiez quelles contraintes votre système de design a réellement besoin.
Puis-je utiliser le même prompt pour Make et le Design Agent ?
Non — Make attend un langage de construction/prototype et consomme les crédits différemment. Utilisez les modèles Design Agent pour les calques de canevas et les modèles Make pour la sortie interactive. Les mélanger produit des résultats confus.
Comment sauvegarder les prompts comme Skills ?
Copiez les modèles 8–9 dans des fichiers markdown Skills dans la bibliothèque Skills de votre équipe. Invoquez avec /nom-skill dans le panneau agent. Mettez à jour les Skills quand vos noms de composants changent — voir notre guide Skills.
Divulgation : Certains liens dans cet article sont des liens d'affiliation. Nous ne recommandons que des outils que nous avons personnellement testés et utilisons régulièrement. Voir notre politique de divulgation complète.