4 façons dont nous utilisons notre serveur MCP chez Figma
Le serveur MCP de Figma couvre désormais une part bien plus vaste de la plateforme qu'il ne l'a jamais fait. De la mise à jour d'une présentation vivante à l'envoi d'un design en production – voici à quoi cela ressemble concrètement.
Partager 4 façons dont nous utilisons notre serveur MCP chez Figma
Deux mois après l'ouverture du plan de travail aux agents, le serveur MCP de Figma fonctionne désormais avec Figma Slides, FigJam, Figma Make et le nouvel agent Figma. Cela signifie que les diapositives de présentation, les tableaux FigJam et les prototypes Make peuvent tous être créés ou mis à jour à partir d'un prompt. Le serveur MCP prend également en charge les polices personnalisées et vous permet de télécharger des images et des icônes (au format SVG, PDF, JPG ou PNG) depuis les fichiers de design grâce au nouvel outil download_assets.
Voici quatre workflows que les Figmates exécutent actuellement grâce à ces nouvelles fonctionnalités.
1. Créer et actualiser des présentations dans Figma Slides
Mallory Dean, Designer Advocate chez Figma, a élaboré une présentation intemporelle couvrant les lancements de produits d'IA de Figma. C'est une présentation vivante qu'elle met à jour toutes les quelques semaines, afin que le contenu qu'elle présente lors des conférences de design et des réunions avec les clients demeure actuel au fur et à mesure que nous livrons nos produits.
Le serveur MCP de Figma prend désormais en charge les polices personnalisées téléchargées. Ainsi, par l'intermédiaire de prompts, vous pouvez faire en sorte que le rendu d'une police sauvegardée sur votre ordinateur s'effectue correctement dans les designs ou les diapositives.
Après notre lancement de l'agent Figma, elle a saisi le prompt suivant dans son éditeur de code : « Mets à jour ma présentation Figma AI pour inclure notre nouvel agent Figma. Récupère le contenu de Slack, de Google Drive, de notre blog Shortcut et de la page web Release Notes. Donne-moi des suggestions sur les éléments à actualiser, ainsi que des idées de nouvelles diapositives. » L'agent a récupéré des conversations pertinentes, des briefs et des messages de lancement, puis a utilisé l'outil use_figma ainsi que la compétence /figma-use-slides dans Figma Slides pour mettre à jour la présentation selon son modèle.
Les nouvelles diapositives nécessitaient encore une phase d'examen, des images pour remplacer les substituts et des modifications de texte, mais les 80 % initiaux du travail de contenu avaient déjà été réalisés au moment où elle est intervenue. Avec notre nouvelle prise en charge des polices personnalisées, l'agent a procédé au rendu du texte dans ses polices personnalisées téléchargées, et non dans des approximations compatibles web, et la présentation est ainsi restée conforme à la marque.
Cette même configuration s'exécute tout au long du processus de développement de produit, qu'il s'agisse de générer quelque chose de A à Z ou de mettre à jour un document existant. Un PM préparant une présentation de lancement. Un designer présentant l'examen d'un design. Le marketing établissant un forfait GTM pour une fonctionnalité. Les ventes mettant à jour une présentation destinée aux clients avec les dernières modifications de produit. Le travail n'est pas seulement plus rapide – il est conforme à la marque, réalisé à partir du design system de votre équipe.
2. Générer des tableaux FigJam à partir de données en direct
Les compétences aident les agents à générer des résultats meilleurs et plus cohérents. Explorez les compétences personnalisées de la communauté Figma ou soumettez vos propres compétences au référentiel community-resources de Figma pour que d'autres puissent les utiliser avec le serveur MCP de Figma.
En tant que product manager chez Figma, Prasant Lokinendi anime souvent des ateliers de lancement de fonctionnalités. La préparation d'un FigJam (extraire des données contextuelles de l'ensemble de l'entreprise et formater les sections en fonction de la session) convaincant pour ces ateliers prend du temps. Il a donc créé /figjam-builder, une compétence personnalisée qui intègre ces instructions afin qu'il ne doive pas systématiquement les spécifier via des prompts.
Pour notre lancement de la saisie vocale Make plus tôt cette année, il a indiqué par prompt à son agent de générer un tableau FigJam à partir du contexte extrait de Slack, Asana et Notion pour la structure du projet, et de Hex pour l'analyse de données. Au lieu de partir d'un FigJam vide, il a commencé avec les données les plus récentes, incluant la vision du produit, les informations clients, et les décisions clés.
3. Déplacer les designs entre le code et le plan de travail avec Figma Make
Le serveur MCP fonctionne maintenant aussi dans Figma Make, fermant la boucle modifications de design-PR de production sans jamais quitter Figma. Iris Lin, designer produit chez Figma, exécute cette boucle sur des travaux de produit réels.
Par exemple, quand Iris et un collègue ont récemment conçu un éditeur audio comme fichier de démonstration, son collègue a livré une première version, mais Iris voulait mettre à jour les designs. Les interactions étant difficiles à montrer dans un fichier statique, elle a créé une branche du code et développé le produit final dans Figma Make : une fenêtre contextuelle comportant des réglages de niveau, et une tête de lecture déplaçable.
Comme Iris voulait apporter des modifications à son design system pour son fichier de démonstration, elle a intégré l'aperçu Make dans le plan de travail en saisissant le prompt suivant dans d'interface de prompt Make : « Peux-tu amener l'aperçu ici dans Figma sous forme de calques de conception ? » L'écran a été placé sur le plan de travail et recréé avec les composants pertinents de sa bibliothèque. Iris a modifié le composant clip audio sur le plan de travail, selon ses schémas de conception normaux, en lui ajoutant des états distincts : par défaut, survol et glisser-déposer. Puis elle a inversé le flux : « Récupère ces nouveaux états dans le code. » L'agent a lu ses modifications de design et a intégré les trois dans le composant, prêt à être transféré vers GitHub en tant que PR.
Ce workflow vous permet de contrôler ce qui est expédié, le tout depuis Figma. L'agent lit et écrit vos composants réels aux deux extrémités – tout comme Code Connect mappe votre bibliothèque au code de production. Les décisions design qui perdaient en fidélité entre le transfert et l'examen parviennent désormais jusqu'à la PR.
4. Partager le travail avec l'agent Figma
En tant que product manager intervenant derrière le serveur MCP de Figma, Yarden Katz sait comment solliciter notre serveur MCP jusqu'à ses limites. Un scénario auquel elle revient constamment est celui d'un écran qui n'existe que dans le code, sans aucune représentation sur le plan de travail. L'objectif est de l'intégrer à Figma, associé au bon design system, pour que les designers puissent l'utiliser.
Extrayez tous les actifs directement de Figma via le serveur MCP de Figma avec notre nouvelle fonctionnalité download_assets. Contrairement à une capture d'écran, cette fonctionnalité renvoie le fichier exportable réel (SVG, PDF, JPG) ou l'image source originale. Aucune exportation manuelle n'est nécessaire.
Se basant sur un exemple d'application avec flux de connexion et tableau de bord, elle a indiqué à son éditeur de code : « Transfère ce tableau de bord et le flux de connexion dans Figma. Réutilise mes composants et variables existants là où ils existent, et génère des ensembles de composants et des variables adéquats là où ils n'existent pas. » Le plugin Figma étant fourni avec des compétences qui donnent à l'agent le contexte d'utilisation de Figma, l'agent a lu sa bibliothèque à la fois dans Figma et dans sa base de code et a choisi les composants à réutiliser et ceux à recréer, plutôt que de dupliquer le travail qu'elle avait déjà fait.
Cela lui a donné une première version solide, mais pas un livrable final. Il fallait encore travailler sur la mise en page automatique, les polices et quelques couleurs non mappées. C'est à ce moment que l’agent Figma a pris le relais, en travaillant à ses côtés sur le plan de travail avec une connaissance approfondie de son design system. Elle lui a indiqué par prompt de corriger la mise en page, de corriger la typographie et de mapper chaque couleur sur la bonne variable. Quand le résultat lui a convenu, elle l'a renvoyé vers le code via le serveur MCP. Si nécessaire, elle pourrait également extraire des images source et des icônes directement depuis l'agent avec notre nouvel outil download_assets sans exporter séparément.
Dans ce cas d'utilisation, le serveur MCP et l'agent Figma travaillent en équipe pour parvenir aux designs finaux. Le serveur connecte Figma à l'agent que vous utilisez déjà et intègre un écran 100 % code au plan de travail, conçu à partir de composants réels. L'agent Figma prend alors le relais. Natif au plan de travail, il explore des pistes tout en demeurant ancré dans vos composants et vos tokens, exactement à l'endroit où vous et votre équipe concevez.
L'intégration de l'agent Figma et de la base de code de production de Figma Make sont actuellement en version bêta fermée. Les fonctionnalités d'écriture sur le serveur MCP de Figma sont en version bêta ouverte – consultez notre guide de configuration pour commencer et nous serons heureux de découvrir ce que vous créez.