Les Skills Figma sont des instructions basées sur markdown qui guident le comportement de l'Agent de Design IA dans votre contexte spécifique. Considérez-les comme des prompts personnalisés réutilisables — vous les écrivez une fois, et ils encodent les conventions de votre équipe, les règles de composants et les standards de qualité pour que l'agent les suive automatiquement à chaque fois.
N'importe qui peut écrire un skill. Aucun code requis. Aucun développement de plugin. Aucune intégration API. Juste du texte markdown qui décrit ce que l'agent doit faire et comment il doit le faire. Les Skills font la différence entre un agent qui génère une interface générique et un agent qui génère l'interface de VOTRE équipe.
Point Clé
Les Skills transforment l'Agent de Design d'une IA générique en l'IA de VOTRE équipe. Sans skills, l'agent utilise des conventions par défaut et devine vos préférences. Avec des skills, il suit automatiquement votre système d'espacement, vos règles de nommage de composants, vos exigences d'accessibilité et vos directives de marque. 30 minutes à écrire 3-4 skills économisent des heures de correction sur des semaines d'utilisation de l'agent.
Qu'est-ce qui compose un Skill Figma ?
| Élément du Skill | Ce qu'il fait | Exemple |
|---|---|---|
| Nom (avec /) | Comment vous l'invoquez | /create-settings-page |
| Objectif | Ce que fait le skill (une phrase) | "Générer une page de paramètres suivant nos conventions d'équipe" |
| Étapes | Instructions ordonnées que suit l'agent | "1. Utiliser Section Header pour chaque groupe..." |
| Conventions | Règles que l'agent doit suivre | "Toujours utiliser une grille de 8px, ne jamais utiliser le positionnement absolu" |
| Composants | Quels composants publiés utiliser | "Utiliser Toggle/Switch pour les paramètres booléens" |
| Variables | Quels tokens de design appliquer | "Utiliser color-surface-primary pour les arrière-plans" |
| À éviter | Ce que l'agent doit éviter | "Ne jamais utiliser plus de 3 niveaux de titre par page" |
Figma a été lancé avec 9 skills d'exemple couvrant : la construction de bibliothèques de composants, la génération de nouveaux designs à partir de briefs, la production de spécifications d'accessibilité, la coordination de workflows multi-agents, et la synchronisation des tokens de design avec le code. Explorez-les sur figma.com/community/skills. Le skill fondamental, /use-figma, donne à l'agent une compréhension partagée du fonctionnement structurel de Figma. Les équipes personnalisent à partir de là.
Écrire votre premier Skill (avec exemple)
Commencez par votre tâche de design la plus répétée. Si vous créez des mises en page de formulaires chaque semaine, écrivez un skill /form-layout. Voici un exemple complet et concret :
Ce skill dit à l'agent exactement comment votre équipe construit les formulaires. Sans lui, l'agent utilise les conventions par défaut de Figma. Avec lui, chaque formulaire que l'agent génère suit vos standards spécifiques — cohérent entre les membres de l'équipe, cohérent entre les projets.
📬 Vous trouvez cela utile ?
Une insight IA actionnable par semaine. Plus un pack de prompts gratuit quand vous vous abonnez.
S'abonner gratuitement →Comment les Skills se comparent aux autres instructions personnalisées d'IA
Les Skills sont conceptuellement similaires aux systèmes d'instructions personnalisées dans d'autres outils IA :
| Outil | Instructions personnalisées | Créées par | Partagées ? |
|---|---|---|---|
| Figma Skills | Fichiers markdown qui guident l'Agent de Design | Manuellement par l'équipe | Oui (bibliothèque communautaire) |
| Instructions personnalisées ChatGPT | Texte qui façonne toutes les réponses ChatGPT | Manuellement par l'utilisateur | Non (personnel uniquement) |
| Claude Code CLAUDE.md | Instructions au niveau projet pour l'agent de codage | Manuellement par l'équipe | Oui (via repo) |
| Skills Hermes Agent | Modèles de tâches réutilisables auto-générés | Automatiquement à partir de l'utilisation | Oui (bibliothèque de skills) |
La distinction clé : Hermes Agent crée des skills automatiquement à partir de tâches terminées — apprenant pendant que vous travaillez. Figma nécessite une création manuelle de skills — vous l'enseignez explicitement. L'approche d'Hermes évolue avec l'utilisation ; l'approche de Figma vous donne plus de contrôle mais nécessite un investissement initial. Les deux produisent de meilleurs résultats IA que l'utilisation des outils sans instructions personnalisées.
Le principe sous-jacent est le même dans tous ces systèmes : l'IA performe mieux avec un contexte explicite sur vos préférences, conventions et standards. Que vous écriviez un Skill Figma, des Instructions personnalisées ChatGPT, ou un fichier Claude CLAUDE.md, le framework ICCSSE produit de meilleures instructions. L'Optimiseur de Prompts gratuit applique cette structure automatiquement — collez votre brouillon de skill, récupérez une version plus claire.
4 Skills essentiels dont chaque équipe de design a besoin
1. /form-layout — Standardise le design de formulaires dans l'équipe. (Exemple ci-dessus.)
2. /page-layout — Définit vos conventions de structure de page : placement d'en-tête, largeur de barre latérale, largeur max du contenu, structure de pied de page, modèles de navigation, points de rupture responsive.
3. /component-variant — Indique à l'agent comment créer de nouvelles variantes de composants qui correspondent à votre système existant : conventions de nommage, définitions d'états (défaut, survol, actif, désactivé, erreur), échelle de taille (sm, md, lg), et exigences de documentation.
4. /accessibility-check — Définit vos standards d'accessibilité : niveau WCAG (AA vs AAA), tailles minimales de cibles tactiles, ratios de contraste, règles de hiérarchie de titres, labels ARIA requis, et format d'annotation pour lecteur d'écran. Voir notre guide des spécifications d'accessibilité pour les détails.
📬 Vous en voulez plus comme ça ?
Une insight IA actionnable par semaine. Plus un pack de prompts gratuit quand vous vous abonnez.
S'abonner gratuitement →Questions fréquemment posées
Combien de skills dois-je créer ?
Commencez par 3-4 couvrant vos tâches de design les plus courantes : un skill de formulaire, un skill de mise en page, un skill de variante de composant, et un skill de vérification d'accessibilité. Ceux-ci couvrent 80% du travail de design quotidien. Ajoutez plus de skills en identifiant des modèles répétés que l'agent gère de manière incohérente.
Les skills peuvent-ils appeler d'autres skills ?
Oui — les skills peuvent référencer d'autres skills, créant des workflows chaînés. Un skill /new-feature pourrait invoquer /form-layout pour les sections de saisie, puis /accessibility-check pour la révision de conformité. Cela permet des workflows complexes multi-étapes à partir d'une seule invocation.
Les skills consomment-ils des crédits ?
Le skill lui-même (les instructions markdown) ne consomme pas de crédits. Les actions de l'agent que le skill déclenche (générer des designs, éditer des composants) consomment des crédits au taux normal. Un skill bien écrit peut en fait économiser des crédits en produisant de meilleurs résultats du premier coup — moins d'itérations signifie moins de régénérations consommatrices de crédits.
Puis-je partager des skills avec la communauté Figma ?
Oui — la bibliothèque de skills communautaires de Figma vous permet de publier et parcourir des skills. Cela signifie que vous pouvez utiliser des skills écrits par d'autres équipes de design pour des modèles courants (mises en page de tableau de bord, flux d'onboarding, pages de paramètres) sans les écrire de zéro.
Où sont stockés les skills ?
Les skills sont associés à votre organisation Figma ou compte personnel. Les skills au niveau équipe sont accessibles à tous les membres de l'équipe ; les skills personnels ne sont accessibles qu'à vous. Stockez vos skills les plus importants au niveau équipe pour que tous les designers bénéficient des mêmes conventions.
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.