Essayez ces 10 compétences – et mettez les vôtres en valeur.

Pour les non-initiés, les compétences sont des fichiers Markdown en texte brut qui vous permettent d'interagir avec un agent. Comme elles prennent la forme d'instructions ordonnées ou de prompts guidés, elles peuvent, au premier abord, sembler davantage conçues pour les ingénieurs que pour les designers. Mais elles sont en réalité parfaites pour saisir les opinions et les jugements que tout designer porte en soi.

Parfois, une seule compétence suffit pour débloquer un nouveau workflow. J'ai eu le déclic en créant un tutoriel sur l'animation : j'ai conçu une compétence pour l'agent Figma permettant d'appliquer mes courbes d'easing favorites aux keyframes sur lesquelles je travaillais, et je l'ai appelée /ease-like-miggi. Lorsque mon équipe l'a utilisée dans ses workflows, ses animations ont adopté le même rendu que les miennes ; j'ai alors complètement adhéré à la démarche.

À compter d'aujourd'hui, vous pouvez utiliser l'agent pour créer des compétences dans Figma. Voici comment :

• Demandez à l'agent de créer une compétence en utilisant une frame de conception comme référence, ou en suivant des étapes ou des directives spécifiques que vous fournissez.
• Prévisualisez la compétence une fois que l'agent l'a rédigée, puis mettez-la en œuvre dans votre chat.
• Continuez à itérer au fil des tests : modifiez vos étapes, changez la mise en forme, demandez des recommandations ou ouvrez directement l'éditeur Markdown pour effectuer des modifications manuelles.

Comme j'avais envie de savoir comment d'autres designers utilisent les compétences lorsqu'ils travaillent avec l'agent Figma, j'ai exploré la communauté Figma. Voici 10 de mes compétences préférées, allant de l'unification de l'esthétique à l'application des principes du design system.

1. Appliquer un effet rayon X à vos images

Créée par : Adele Ix, freelance

Compétence :/xray-scan

Ce qu'elle fait : transforme une photo ou une description textuelle en une radiographie d'aspect réaliste visualisant les détails internes d'un objet. L'outil génère immédiatement deux rendus : un affichage en blanc lumineux sur fond noir et une version aux tons sombres et doux sur fond blanc.

Pour reprendre les mots d'Adele : « J’adore réaliser des collages, et cela se reflète vraiment dans la compétence. Ce que je préfère, c’est superposer plusieurs radiographies les unes sur les autres. Comme elles sont monochromes avec des contours lumineux, elles permettent de réaliser des collages vraiment sympas, et le résultat est non seulement intéressant en soi, mais les images se marient aussi magnifiquement entre elles. »

2. Repérer où le mouvement fait défaut

Créée par : Emil Kowalski, Linear

Compétence : /find-animation-opportunities

Ce qu'elle fait : analyse les designs pour identifier les éléments qui ne s'animent pas alors qu'ils le devraient, et inversement. La compétence répond à des questions telles que « Qu’est-ce qui pourrait être animé ici ? » ou « Comment rendre cela plus vivant ? » Elle propose quel mouvement ajouter, à quel endroit et avec des valeurs précises Vous pouvez apporter ces modifications vous-même dans Figma Motion ou demander à l'agent de les appliquer pour vous.

Pour reprendre les mots d'Emil : « Cette compétence est plus efficace lorsqu'elle est appliquée à une seule frame et complétée par un contexte supplémentaire, comme le persona cible de la page. Vous pouvez également l'utiliser pour éviter les excès d'animation, en vous demandant « Y a-t-il des éléments qui ne devraient pas être animés du tout ? »

3. Apporter du mouvement à une composition statique

Créée par : Mallory Dean, Figma

Compétence :/camera-pan-and-zoom

Ce qu'elle fait : crée un dispositif de caméra (une structure de calques imbriqués simulant les mouvements d'une caméra réelle) autour du contenu sélectionné, puis anime le panoramique, le zoom ou la rotation, à la manière d'un réalisateur cadrant un plan. Par exemple, elle permet d'effectuer un parcours en grille sur un ensemble de cartes avant d'opérer un zoom arrière pour revenir à la vue d'ensemble.

Pour reprendre les mots de Mallory : « C'est une compétence très spécifique, mais elle permet de créer des mouvements de caméra de type zoom et panoramique sans toucher aux images clés du design. »

4. Saisir les détails qui manquent à votre interface

Créée par : Jakub Krehel, Interfere

Compétence : /better-interface

Ce qu'elle fait : fournit à l'agent le propre guide de Jakub pour la conception d'interfaces, définissant des normes précises en matière de typographie, de mise en page, d'accessibilité, d'animations et de rédaction produit.

Pour reprendre les mots de Jakub : « Lorsque vous passez d'un bon produit à un produit excellent, vous ressentez la différence. Il ne s'agit généralement pas d'un seul élément, mais plutôt d'une multitude de petits détails qui s'additionnent. Cette compétence englobe ces détails et ces bonnes pratiques qui sont souvent négligés ou qui ne sautent pas immédiatement aux yeux. »

5. Documenter automatiquement les composants

Créée par : Mauro Berteri, Itti Digital

Compétence : /component-handoff

Ce qu'elle fait : transforme un composant unique ou un ensemble de composants en une frame de documentation prête à être partagée sur le canvas. Sélectionnez-en un, et il se met en page comme suit :

• Un en-tête avec un nom, une version, un propriétaire et une description
• Un aperçu en direct
• Une grille de variantes
• Une section des choses à faire et à ne pas faire
• Une décomposition des interactions et des états
• L'anatomie complète du composant

Pour reprendre les mots de Mauro : « Ma philosophie est simple : automatiser les tâches répétitives qui me prenaient des heures, afin que je puisse me concentrer sur le véritable travail créatif. Fort de cette compétence, j'ai repris la structure de transfert exacte qui s'est avérée la plus efficace au fil de mes années d'expérience et je l'ai packagée de manière à ce que n'importe quel designer puisse l'adapter à son propre design system en un seul clic. Elle est conçue pour être évolutive, prévisible et entièrement modifiable directement sur le canvas Figma. »

6. Associer les couleurs aux tokens

Créée par : Ian Guisard, Uber

Compétence : /create-color

Ce qu'elle fait : transforme un composant Figma sélectionné en une spécification complète de couleur. Elle associe chaque remplissage, tracé et ombre visible à son token de design ou à son style, signale les couleurs codées en dur et documente les résultats pour les différentes variantes et les différents états.

Pour reprendre les mots de Ian : « Un de mes exemples préférés est un bouton avec plusieurs types, états, et modes de couleur. Lorsqu'un composant utilise des remplissages superposés ou des dégradés, il répertorie chaque remplissage selon l'ordre d'empilement, ainsi que chaque étape de dégradé avec sa position, sa couleur et la variable associée. Les ingénieurs peuvent reproduire le traitement directement à partir de l'annotation sans inspecter chaque calque manuellement. »

7. Auditer vos composants en un seul passage

Créée par : Amy Ha, Walmart

Compétence : /analyze-components

Ce qu'elle fait : parcourt une page et nettoie ce qu'elle trouve. Elle catalogue ensuite chaque composant avec un aperçu en direct, puis :

• Signale les éléments orphelins, les doublons et les erreurs de nommage.
• Corrige automatiquement les problèmes en dupliquant les composants orphelins et en remplaçant chaque instance par la version corrigée.
• Écrit les résultats complets dans un document d'audit mis en forme sur le canvas.

Pour reprendre les mots d'Amy : « Cela fait vraiment gagner du temps. Avant, je devais faire un clic droit, accéder au fichier principal et copier les composants manuellement, ou bien gérer des tokens fantômes et tout restyler à la main. Maintenant, je peux effectuer ce type de modification en masse en une seule fois. »

8. Concevoir pour chaque état

Créée par : Linda Ojo, Paystack

Compétence :/ui-state-expander

Ce qu'elle fait : prend un écran, un composant ou un flux et le développe en un ensemble complet d'états. Cette compétence garantit que chaque état est conçu avant d'être transmis aux équipes d'ingénierie, en tenant compte des aspects suivants :

• États de chargement
• États vides
• États d'erreur
• États désactivés
• États de données partielles
• Edge cases

Le résultat inclut les déclencheurs, les textes, les transitions et les notes de mise en œuvre ; ainsi, un mock-up soigné illustrant le scénario nominal se transforme en un élément que les ingénieurs peuvent concrètement développer.

Pour reprendre les mots de Linda : « Je voyais sans cesse les mêmes remarques lors de chaque transfert : "Que se passe-t-il en cas de défaillance ?" et "À quoi ressemble l'état vide ?" J'ai fini par réaliser que la liste de vérification que j'avais en tête devrait constituer une compétence que n'importe qui – humain ou agent – peut exécuter. »

9. Faire une critique de votre design

Créée par : Joey Primiani, Superfuture

Compétence : /superfuture-design-review

Ce qu'elle fait : évalue un fichier au regard de l'heuristique UX, des normes d'accessibilité, de la hiérarchie visuelle, du design d'interaction et de la réflexion produit. Classe ensuite chaque remarque selon un système de code couleur (type feu tricolore) :

• Rouge pour les points bloquants
• Jaune pour les corrections recommandées
• Vert pour ce qui fonctionne déjà

Pour reprendre les mots de Joey : « Cette compétence reflète mon processus d'examen personnel, qui concilie utilisabilité, accessibilité, stratégie produit, design visuel et objectifs commerciaux, tout en hiérarchisant les retours en fonction de leur impact sur les utilisateurs. »

10. Créer un guide de discussion pour les tests d'utilisabilité

Créée par : Neha Kodi, Figma

Compétence :/usability-test-guide

Ce qu'elle fait : propose un guide de discussion prêt à l'emploi pour les tests d'utilisabilité, fondé sur les bonnes pratiques de Neha en tant que chercheuse. Cette compétence examine un flux de conception destiné aux tests d'utilisabilité, puis ajoute des questions de modération contextuelles directement sur le canvas, à côté de chaque frame.

Pour reprendre les mots de Neha : « L'expérimentation et l'apprentissage sont au cœur de mon travail chez Figma et cette compétence repose sur quelques principes auxquels je ne déroge pas : ancrer les tâches dans les objectifs des participants, formuler des questions ouvertes et adapter le nombre de questions à la simplicité ou à la complexité du flux de conception. »

Pour en savoir plus sur la façon de créer des compétences pour l'agent Figma, rendez-vous au centre d'aide. L'agent de conception Figma est disponible en version bêta ouverte pour les utilisateurs disposant d'une licence Full dans les forfaits Professionnel, Organisation et Entreprise. Les utilisateurs des licences Collab, Dev et View peuvent utiliser l'agent dans leurs brouillons. L'agent est gratuit dans la version bêta.