Naviguer jusqu'au contenu principal

L'agent de conception de Figma, maintenant avec des outils personnalisés et un contexte élargi

Georgia RustManager of Product Management, Figma
Rodrigo DaviesProduct Manager, Figma
Mock-up d'un plan de travail de conception mobile dans Figma entouré par des prompts de tâche générés par IA. Une affiche intitulée « MODULAR LIVING » par Camille Vosk est sélectionnée sur le plan de travail, tandis que des bulles de statut bleues affichent des messages tels que « Création d'un plugin de QR code », « Génération d'un calque de code », « Création d'un nuancier personnalisé » et « Vérification du contraste des couleurs », illustrant des workflows de conception assistés par IA.Mock-up d'un plan de travail de conception mobile dans Figma entouré par des prompts de tâche générés par IA. Une affiche intitulée « MODULAR LIVING » par Camille Vosk est sélectionnée sur le plan de travail, tandis que des bulles de statut bleues affichent des messages tels que « Création d'un plugin de QR code », « Génération d'un calque de code », « Création d'un nuancier personnalisé » et « Vérification du contraste des couleurs », illustrant des workflows de conception assistés par IA.

La génération de prompt vous permet de démarrer. Des outils personnalisés, un vrai contexte et des compétences – le résultat obtenu vous ressemble vraiment.

Partager L'agent de conception de Figma, maintenant avec des outils personnalisés et un contexte élargi

Explorez nos fichiers bac à sable destinés à l'agent et aux outils personnalisés.

La différence entre un agent qui vous aide à travailler plus efficacement et un agent qui comprend réellement comment vous travaillez réside dans le contexte. Lorsqu'un agent connaît le mode de travail de votre équipe, il peut faire plus que produire. Il peut collaborer.

C'est sur le plan de travail Figma lui-même que cette collaboration devient intéressante – créer des outils, des effets et des expériences qui n'auraient pas été possibles auparavant. L'agent de conception Figma

L'agent Figma Design est disponible

À partir d'aujourd'hui, vous pouvez travailler avec un agent conçu pour Figma, directement sur le plan de travail.

est maintenant disponible pour plus d'utilisateurs dans la version bêta ouverte, vous offrant plus de flexibilité, de précision et de contrôle créatif sur votre travail.

Créez vos propres outils

Instantané client : Edward Chechique

Les plugins génératifs du designer produit Edward Chechique importent du code HTML sur le plan de travail, créent des mises en page de tableau de bord et visualisent des données. Auparavant, créer ces plugins était un processus frustrant. « Je devais demander un service à un développeur qui n'avait peut-être pas le temps de m'aider », explique Edward. « Plus tard, les outils d'IA ont rendu cela possible, mais je devais encore basculer entre différents outils et workflows. Maintenant, avec l'agent de Figma, c'est beaucoup plus rapide et plus facile car je peux simplement demander ce que je veux directement. Je suis passé de zéro possibilité à de magnifiques possibilités. »

Nous travaillons tous différemment, mais les outils de conception sont souvent universels. Les mises en page, les textures et les effets sont tous déterminés par les données prises en charge nativement dans votre outil de conception. À partir d'aujourd'hui, vous pouvez donner forme à vos outils tout comme vous donnez forme à vos designs. Cela ouvre plus de possibilités pour expérimenter visuellement et partager ce que vous créez avec votre équipe.

Plugins génératifs

Un plugin étend les possibilités du plan de travail Figma – mais en concevoir un a toujours nécessité des compétences techniques et une configuration de développement hors de portée de nombreux designers. Vous pouvez désormais amener par des prompts l'agent de conception à créer des plugins réutilisables.

Parce qu'ils utilisent PropsKit, ces plugins génératifs donnent l'impression d'être intégrés à Figma. Et parce qu'ils figurent sur le plan de travail, ils vous donnent un contrôle plus direct lorsque vous itérez. Pour tout ce qui va au-delà de Figma Design (par exemple, les services d'IA ou les API tierces), utilisez toujours les plugins standard.

Un plugin de génération de mise en page d'images vous aide à organiser les ressources.
L'agent suggérait des façons de résoudre les problèmes. C'était magique pour moi car il s'adressait à moi comme un développeur voulant m'aider.
Edward Chechique, designer produit

Effets et remplissages de nuancier

Instantané client : Anna Zhang

La technologue créative Anna Zhang a créé ses propres nuanciers pour remixer sa propre photographie avec des effets de collage, de marbrure, de fuite de lumière, de gaufrage métal et de prisme. « C'est un moyen de capitaliser sur ce que je faisais avant, ou de construire un workflow réutilisable », dit-elle. « Un seul point de départ offre un potentiel créatif énorme. »

Anna s'est concentrée sur la fonctionnalité tout en laissant l'agent gérer l'UI : « C'était un dialogue entre moi et l'agent, et ce qu'il produisait définissait les paramètres que j'allais ensuite ajouter. C'était comme une négociation. »

L'agent peut également créer des nuanciers – des petits programmes personnalisables pilotés par WebGPU

Figma rendering: Powered by WebGPU

We’ve updated our renderer to use WebGPU, unlocking new performance optimization opportunities. Here’s how we did it.

qui définissent le mode de rendu des pixels. Pensez au tramage, au métal liquide et au bruit fractal. Ils se présentent sous deux formes :

  • Les effets de nuancier sont comme les effets natifs de Figma, mais sont entièrement conçus par vous (par exemple, un étirement de particule, une distorsion de lentille, un contour de couleur et plus encore). Vous pouvez les superposer, ajuster les propriétés et les coupler à des effets natifs pour obtenir le résultat souhaité.

Utiliser un plugin ou un nuancier (que vous l'ayez créé, qu'un collègue l'ait partagé avec vous ou que vous l'ayez trouvé dans la communauté) est gratuit et disponible dans tous les forfaits. Indiquer à l'agent par des prompts à créer un plugin ou un nuancier nécessite un accès à l'agent de conception de Figma et coûtera des crédits d'IA une fois le plugin ou le nuancier généralement disponible.

  • Les remplissages de nuancier sont dynamiques et génératifs – dépassant de loin les couleurs unies et les dégradés, y compris l'aquarelle, le moiré, les grilles de motifs et plus encore.
Interface de Figma affichant un panneau de bibliothèque « Remplissages de nuancier » à côté d'une composition graphique de typographie noire et de motifs en demi-teintes orange et gris. Le panneau affiche des préréglages de nuanciers personnalisés, notamment Ondes en tramage, Demi-teintes fluides, Toile de particules et Champ magnétique, avec un curseur sélectionnant un préréglage.Interface de Figma affichant un panneau de bibliothèque « Remplissages de nuancier » à côté d'une composition graphique de typographie noire et de motifs en demi-teintes orange et gris. Le panneau affiche des préréglages de nuanciers personnalisés, notamment Ondes en tramage, Demi-teintes fluides, Toile de particules et Champ magnétique, avec un curseur sélectionnant un préréglage.
Jouez avec des remplissages de nuancier tels que les ondes en tramage, les demi-teintes fluides, les toiles de particules et le champ magnétique.

Les nuanciers et les plugins génératifs résident dans un nouvel onglet Outils aux côtés des plugins classiques, des outils Weave

Three-panel product graphic demonstrating AI-powered style transfer. On the left, a "Transfer style" interface displays a target image of people carrying skateboards and a blurred portrait used as the style source. In the center, a workflow canvas labeled "Spring Campaign" shows a connected post-generation node producing a floral-themed social media graphic titled "Spring Arrivals." On the right, a gallery-style layout displays generated creative assets, including an illustrated handshake artwork and merchandise design cards, showing how transferred styles can be applied across a campaign.Three-panel product graphic demonstrating AI-powered style transfer. On the left, a "Transfer style" interface displays a target image of people carrying skateboards and a blurred portrait used as the style source. In the center, a workflow canvas labeled "Spring Campaign" shows a connected post-generation node producing a floral-themed social media graphic titled "Spring Arrivals." On the right, a gallery-style layout displays generated creative assets, including an illustrated handshake artwork and merchandise design cards, showing how transferred styles can be applied across a campaign.

Connecting Figma and Weave

Today, we’re announcing new ways your Weave creative workflows can live alongside your Figma frames.

et des widgets. Figma propose plus de 30 plugins et nuanciers pour vous aider à démarrer, mais les plus utiles sont ceux que vous créez vous-même.

Lorsque vous créez via l'agent de conception, vous choisissez le type de nuancier que vous souhaitez créer et les propriétés à manipuler, et l'agent crée le nuancier pour vous. Mais ce que l'agent peut faire sur le plan de travail ne sera pas meilleur que les données que vous lui fournissez.

Panneau de plugin Figma intitulé « Demi-teinte » affiché sur une œuvre d'art abstraite à rayures rouges et blanches. Le panneau affiche des contrôles pour le type de motif, l'échelle, le seuil et la couleur, tandis qu'un pointeur ajuste un curseur pour modifier un effet de demi-teinte basé sur le bruit en temps réel.Panneau de plugin Figma intitulé « Demi-teinte » affiché sur une œuvre d'art abstraite à rayures rouges et blanches. Le panneau affiche des contrôles pour le type de motif, l'échelle, le seuil et la couleur, tandis qu'un pointeur ajuste un curseur pour modifier un effet de demi-teinte basé sur le bruit en temps réel.
Personnalisez les contrôles de vos effets et remplissages de nuanciers.
Image abstraite éditée avec des effets de nuancier empilés dans Figma. Des textures orange vif, violettes, rouges et blanches remplissent le plan de travail tandis que des contrôles flottants étiquetés « Impression Riso », « Grille de particules » et « Carte de dégradé » montrent des effets visuels superposés et un traitement d'image créatif.Image abstraite éditée avec des effets de nuancier empilés dans Figma. Des textures orange vif, violettes, rouges et blanches remplissent le plan de travail tandis que des contrôles flottants étiquetés « Impression Riso », « Grille de particules » et « Carte de dégradé » montrent des effets visuels superposés et un traitement d'image créatif.
Superposez des effets pour obtenir les résultats souhaités.
Être capable de créer vos propres outils vous permet de garder le contrôle – chacun a sa propre conception de ce qui devrait être possible.
Anna Zhang, technologue créative

Apportez plus de contexte à chaque conversation

Un bon contexte ne fait pas que renseigner l'agent – il donne forme à ce que l'agent produit. Plus l'agent est proche de votre projet, de votre marque et de vos méthodes de travail, plus le résultat sera précis.

  • Rattachez directement les fichiers : déposez les fichiers (par exemple, un entretien avec l'utilisateur, un document de texte UX ou un rapport de données) dans la conversation avec l'agent. L'agent les utilise comme référence tout au long de la conversation, de sorte que le travail reflète le contexte et l'approche de votre projet.
  • Référencez d'autres fichiers Figma : lorsque vous collez un lien du fichier Figma, l'agent obtient toute la structure (composants, tokens, mise en page et styles) et peut comprendre et reproduire les schémas de conception, au lieu de simplement les extrapoler à partir d'une image plate.
  • Faites une recherche sur le web : l'agent peut intégrer des données en direct (par exemple, des noms et des photos réels de restaurants pour une liste, les modèles UX actuels de concurrents et le contenu à jour de mock-ups réalistes) sans quitter Figma.
  • Connectez vos outils : les connecteurs MCP apportent un contexte depuis GitHub, Atlassian, Slack et d'autres outils directement dans l'agent – et peuvent publier des mises à jour en retour. Récupérez des tickets produit de Linear pour alimenter un design ou référencez des données Hex sans copier-coller.
Plan de travail de conception affichant une interface de carte de musée à thème sombre aux côtés d'une carte de prompt d'IA. La carte fait référence à un fichier CSV joint nommé « exhibits.csv » et contient l'instruction « Crée une carte dynamique pour les expositions du musée en utilisant le style et les données joints », démontrant la génération pilotée par IA à partir de données structurées.Plan de travail de conception affichant une interface de carte de musée à thème sombre aux côtés d'une carte de prompt d'IA. La carte fait référence à un fichier CSV joint nommé « exhibits.csv » et contient l'instruction « Crée une carte dynamique pour les expositions du musée en utilisant le style et les données joints », démontrant la génération pilotée par IA à partir de données structurées.
Rattachez des fichiers directement dans la conversation avec l'agent.
Interface Figma avec le menu Connecteurs développé. Les options incluent Atlassian, Dovetail, GitHub, Granola, Hex, Notion et Slack, avec Notion mis en évidence, illustrant l'accès aux outils externes connectés et aux sources de connaissances.Interface Figma avec le menu Connecteurs développé. Les options incluent Atlassian, Dovetail, GitHub, Granola, Hex, Notion et Slack, avec Notion mis en évidence, illustrant l'accès aux outils externes connectés et aux sources de connaissances.
Apportez un contexte dans l'agent à partir d'outils externes.

Élargissez votre point de vue

Les prompts efficaces véhiculent un point de vue. Les compétences vous permettent de sauvegarder cette réflexion, de la partager avec votre équipe et de mettre votre direction créative à profit au-delà de vos propres fichiers.

  • Créez des compétences personnalisées : les compétences transforment les prompts que vous utilisez souvent en commandes slash réutilisables, qu'il s'agisse d'appliquer une esthétique spécifique, d'examiner des designs ou d'automatiser quelque chose que vous avez déjà compris.
  • Publiez des compétences dans votre équipe : partagez une compétence, et votre réflexion deviendra partie intégrante du mode de travail de toute l'équipe. Une philosophie de design, une esthétique de signature, un filtre de feedback – transformés en quelque chose qu'un membre de l'équipe peut mettre en œuvre, apprendre et développer.
  • Regardez les prompts de vos collaborateurs : l'historique des itérations n'est pas seulement un journal – c'est une fenêtre sur la façon de penser de quelqu'un. Par défaut, les collaborateurs de votre fichier peuvent voir les conversations avec l'agent, ce qui fait du processus une ressource partagée. Rendez ces conversations privées chaque fois que vous en avez besoin.
Menu des compétences et des commandes affiché dans une interface de chat. Une commande personnalisée, « /contrast-improvements », est sélectionnée, révélant une description du remplacement des associations de couleurs à faible contraste par des alternatives accessibles qui respectent les normes WCAG. En dessous, un prompt demande de vérifier tous les designs en utilisant la compétence sélectionnée.Menu des compétences et des commandes affiché dans une interface de chat. Une commande personnalisée, « /contrast-improvements », est sélectionnée, révélant une description du remplacement des associations de couleurs à faible contraste par des alternatives accessibles qui respectent les normes WCAG. En dessous, un prompt demande de vérifier tous les designs en utilisant la compétence sélectionnée.
Créez et partagez des compétences personnalisées qui transforment les workflows répétables en commandes à un clic.

Le meilleur moment dans le processus de conception a lieu lorsque ce que vous avez en tête apparaît à l'écran. Aujourd'hui, vous disposez de plus de moyens pour donner vie à cette idée. Votre code, vos plugins, vos nuanciers, votre contexte – tous figurent sur le plan de travail Figma. Ce sont les données que l'agent de conception Figma déverrouille.

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 pendant la phase bêta. Jouez dans le fichier bac à sable de l'agent ou apprenez des méthodes d'utilisation pratique de l'IA dans votre workflow de conception. Pour en savoir plus sur l'agent Figma et les plugins génératifs et les nuanciers, rendez-vous dans notre centre d'aide.

Graphique de produit de style collage montrant des workflows de conception et de développement assistés par IA, avec des invites de création de plugin, des contrôles d'effets visuels, des outils de génération de code et des composants UI interactifs disposés dans un espace de travail créatif.Graphique de produit de style collage montrant des workflows de conception et de développement assistés par IA, avec des invites de création de plugin, des contrôles d'effets visuels, des outils de génération de code et des composants UI interactifs disposés dans un espace de travail créatif.

Lisez le résumé du Config par Dylan Field, PDG et co-fondateur de Figma, ici.

Articles connexes

Créez et collaborez avec Figma

Lancez-vous gratuitement