HomeCasa Prompts

Spécification de composant Figma avec auto layout, variantes et variables

Obtenez la spécification complète d’un composant Figma : arbre des calques, réglages d’auto layout, propriétés et variantes, variables et modes, états, tests de contenu long et notes de handoff. Conçu pour ChatGPT, Claude, Gemini et Microsoft Copilot. Il comprend 5 variables personnalisables et vous pouvez le copier gratuitement en un clic.

Avancé · Texte · En attente de relecture éditoriale

Conçu pour:

Prompt

Agis comme designer de design system expert de Figma (auto layout, propriétés de composant, variables et modes).

Contexte :
- Composant : {{composant}}
- Cas d'usage : {{cas_usage}}
- Déclinaisons nécessaires : {{declinaisons}}
- Tokens ou variables existants : {{tokens}}
- Plateforme cible : {{plateforme}}

Livrables :
1. Anatomie : arbre des calques avec des noms clairs (dans un bloc de code), en signalant les instances imbriquées.
2. Réglages d'auto layout par calque : direction, espacement, padding, alignement, redimensionnement (hug, fill, fixed), largeur minimale et maximale, utilisation du wrap.
3. Propriétés du composant : variantes, booléens, échange d'instance et texte. Conçois la matrice de variantes en évitant l'explosion combinatoire et explique ce que tu règles par des propriétés plutôt que des variantes.
4. Liaison aux variables : espacements, couleurs, rayons et typographie ; modes clair/sombre et densité si pertinent.
5. États : par défaut, survol, focus, pressé, désactivé, chargement et erreur si nécessaire, avec le changement exact pour chacun.
6. Tests de robustesse : texte long, traductions jusqu'à 30-40 % plus longues (par exemple en allemand), icônes absentes, conteneur étroit et sens de lecture de droite à gauche si besoin.
7. Notes de handoff : correspondance entre propriétés Figma et props du code, et mesures à respecter par les développeurs.
8. Check-list QA avant de publier le composant dans la bibliothèque.

Contraintes :
- N'utilise que des fonctionnalités réelles de Figma ; si l'une dépend de l'abonnement ou d'une version récente, signale-le et propose une alternative.
- N'invente pas de tokens ; s'il en manque, propose des noms provisoires marqués [À COMPLÉTER].
- Si les cas d'usage ne sont pas clairs, pose-moi la question avant de définir les variantes.

Format : bloc de code pour l'arbre des calques, tableaux pour l'auto layout, les propriétés et les états, puis check-list finale.

Comment l'utiliser

  1. Décrivez le composant et les écrans où il sera utilisé. 2. Collez les noms de vos variables ou tokens actuels. 3. Construisez le composant dans Figma en suivant l’arbre des calques et passez la check-list avant publication.

Exemple d'utilisation

Composant : carte produit · Déclinaisons : avec et sans remise, horizontale et verticale · Tokens : space/100-800, color/surface · Plateforme : web responsive.

Exemple de résultat

1. Anatomie

ProductCard (composant · auto layout)
├── Media (frame)
│   ├── Image
│   └── DiscountBadge (instance · booléen)
└── Content (frame)
    ├── Title (texte)
    ├── Rating (instance · booléen)
    └── PriceRow (frame)
        ├── Price (texte)
        └── OldPrice (texte · booléen)

2. Auto layout

CalqueDirectionGapPaddingRedimensionnement
ProductCardVertical / horizontal selon variantespace/3000Fill · min. 160 px
ContentVerticalspace/200space/400Fill
PriceRowHorizontalspace/2000Hug

3. Propriétés

  • Variante : orientation = vertical | horizontal (2 variantes seulement).
  • Booléens : hasDiscount, showRating, pour ne pas multiplier les variantes.
  • Texte : title, price.

On couvre ainsi 8 combinaisons avec 2 variantes au lieu de 8.

6. Tests de robustesse

  • Titre sur 3 lignes : tronquer à 2 avec points de suspension.
  • Traduction allemande (+35 %) : le prix ne doit pas passer à la ligne…

Informations clés

Catégorie
Design UI/UX · Figma
Type de résultat
Texte
Niveau
Avancé
Conçu pour
ChatGPT, Claude, Gemini et Microsoft Copilot
Vérifié sur
En attente de vérification éditoriale
Variables
Composant, Cas d’usage, Déclinaisons nécessaires, Tokens ou variables et Plateforme cible
Langue
Français
Prix
Gratuit, sans inscription
Mis à jour
07/11/2026

Questions fréquentes

Quand utiliser une propriété booléenne plutôt qu’une variante ?

Quand il s’agit seulement d’afficher ou masquer un calque, comme une icône ou un badge. Réservez les variantes aux changements de structure ou de style, car chaque combinaison multiplie leur nombre.

Pourquoi tester le composant avec des textes traduits ?

Parce que l’allemand ou le français prennent souvent nettement plus de place que l’anglais. Si l’auto layout ne l’absorbe pas, le composant casse en production.

À quoi sert ce prompt ?

Obtenez la spécification complète d’un composant Figma : arbre des calques, réglages d’auto layout, propriétés et variantes, variables et modes, états, tests de contenu long et notes de handoff.

Avec quels outils d'IA fonctionne-t-il ?

Il est conçu pour ChatGPT, Claude, Gemini et Microsoft Copilot. Nous ne l'avons pas encore vérifié sur ces outils ; les résultats peuvent donc varier de l'un à l'autre.

Comment personnaliser le prompt ?

Cliquez sur « Personnaliser » et remplissez les variables (Composant, Cas d’usage, Déclinaisons nécessaires, Tokens ou variables et Plateforme cible). Le texte se met à jour instantanément et vous pouvez ensuite le copier en un clic. Les valeurs sont stockées uniquement dans votre navigateur.

Faut-il de l'expérience pour l'utiliser ?

Il est de niveau avancé : il s'adresse aux personnes expérimentées dans le domaine, capables d'évaluer et d'ajuster le résultat.

Ce prompt est-il gratuit ?

Oui. Tous les prompts de HomeCasa Prompts sont gratuits, sans inscription ni abonnement. Vous pouvez aussi les utiliser dans des projets professionnels.

Puis-je me fier au résultat de l'IA ?

Considérez-le comme un brouillon de qualité : vérifiez toujours les données, les chiffres et les affirmations importantes avant de publier ou de prendre des décisions.

Prompts similaires