{"id":8780,"date":"2026-08-25T17:39:34","date_gmt":"2026-08-25T15:39:34","guid":{"rendered":"https:\/\/www.swash-formation.fr\/?post_type=formation&#038;p=8780"},"modified":"2026-08-26T10:06:06","modified_gmt":"2026-08-26T08:06:06","slug":"figma-agent-skills-mcp","status":"publish","type":"formation","link":"https:\/\/www.swash-formation.fr\/formation\/figma-agent-skills-mcp\/","title":{"rendered":"Figma Agent, skills et MCP : structurer un workflow de design agentique"},"template":"","domaine":[357,12],"motcle":[63,23,388,37,16],"metier":[],"etiquette":[249,381],"type_ra":[80],"logiciel":[],"class_list":["post-8780","formation","type-formation","status-publish","hentry","domaine-formation-ia-intelligence-artificielle","domaine-formation-ux-ui-webdesign","motcle-experience-utilisateurs","motcle-interface","motcle-nouveautes-rentree-2026","motcle-productivite","motcle-strategie","etiquette-formation-figma","etiquette-ia-designers-graphiques","type_ra-inter","no-post-thumbnail"],"acf":{"FOR_Format":"80","FOR_SousTitre":"Piloter l\u2019agent Figma, cr\u00e9er des skills r\u00e9utilisables, connecter les outils et le design system via MCP puis explorer les workflows visuels de Figma Weave","FOR_Jours":1,"FOR_Heures":7,"FOR_Duree":"","FOR_DureeTxt":"1 jour \/ 7 heures","FOR_Prix":850,"FOR_Ref":"W16","FOR_Niveau":"Expertise","FOR_PrixComplet":"850 euros HT %2F Soit 1 020 euros TTC","FOR_PrixCourt":"850 \u20ac HT","FOR_Support":"","FOR_ProgPdf":"","FOR_Intervenants":"","FOR_Comp":"<p><span style=\"font-weight: 400;\">Int\u00e9grer les fonctions agentiques \u00e0 un workflow Figma avanc\u00e9 en donnant \u00e0 l\u2019agent le contexte, les r\u00e8gles et les outils n\u00e9cessaires pour intervenir sur un fichier et respecter les conventions d\u2019un design system.<\/span><\/p>\r\n<p><span style=\"font-weight: 400;\">Formaliser des skills r\u00e9utilisables, connecter Figma \u00e0 des sources et agents externes via MCP, puis identifier comment Figma Weave peut compl\u00e9ter ce workflow pour la production d\u2019assets visuels.<\/span><\/p>","FOR_Obj":"<ul>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Situer les composants d\u2019un workflow agentique dans l\u2019\u00e9cosyst\u00e8me Figma<\/span><\/li>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Piloter l\u2019agent Figma \u00e0 partir d\u2019un fichier et d\u2019un design system structur\u00e9s<\/span><\/li>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Cr\u00e9er, tester et partager des skills adapt\u00e9s \u00e0 ses m\u00e9thodes de travail<\/span><\/li>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Connecter Figma \u00e0 des donn\u00e9es et agents externes via MCP<\/span><\/li>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Exploiter Figma Weave et formaliser un workflow IA ma\u00eetris\u00e9<\/span><\/li>\r\n<\/ul>","FOR_Valider":"<ul>\r\n\t<li>votre projet et le contexte de votre demande pour co-construire le programme d\u00e9finitif<\/li>\r\n\t<li>le format\u00a0: pr\u00e9sentiel et\/ou distanciel<\/li>\r\n\t<li>le tarif\u00a0: calcul\u00e9 selon le temps de pr\u00e9paration, les moyens \u00e0 mobiliser, le nombre de jours, le lieu de la formation\u2026<\/li>\r\n\t<li>*la dur\u00e9e\u00a0: \u00e0 confirmer selon les pr\u00e9requis et les objectifs \u00e0 atteindre par les apprenants<\/li>\r\n<\/ul>","FOR_5Raisons":"","FOR_Public":"<p><span style=\"font-weight: 400;\">Cette formation s\u2019adresse aux professionnels disposant d\u00e9j\u00e0 d\u2019une pratique avanc\u00e9e de Figma et souhaitant int\u00e9grer les nouveaux usages agentiques \u00e0 leur workflow<\/span><\/p>\r\n<ul>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">UI designers<\/span><\/li>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">UX \/ UI designers<\/span><\/li>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Product designers<\/span><\/li>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Design system designers<\/span><\/li>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Design Ops<\/span><\/li>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Directeurs artistiques digitaux impliqu\u00e9s dans des environnements produit<\/span><\/li>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Product managers travaillant \u00e9troitement avec les \u00e9quipes design<\/span><\/li>\r\n\t<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Profils hybrides design \/ d\u00e9veloppement souhaitant rapprocher design system et impl\u00e9mentation<\/span><\/li>\r\n<\/ul>","FOR_Prerequis":"<ul>\r\n\t<li><span style=\"font-weight: 400;\">\u00catre autonome dans Figma Design (<\/span><span style=\"font-weight: 400;\">Ma\u00eetriser l\u2019Auto Layout, les composants, variants, propri\u00e9t\u00e9s et variables).<\/span><\/li>\r\n\t<li><span style=\"font-weight: 400;\">Comprendre l\u2019organisation d\u2019un design system et l\u2019usage des biblioth\u00e8ques.<\/span><\/li>\r\n\t<li><span style=\"font-weight: 400;\">\u00catre capable d\u2019analyser et de corriger une maquette complexe.<\/span><\/li>\r\n\t<li><span style=\"font-weight: 400;\">Aucune comp\u00e9tence en programmation n\u2019est exig\u00e9e mais une compr\u00e9hension des probl\u00e9matiques de design-to-code facilite l\u2019assimilation de la partie MCP<\/span><\/li>\r\n<\/ul>\r\n<p>En intra :<\/p>\r\n<ul>\r\n\t<li><span style=\"font-weight: 400;\">Disposer d\u2019un acc\u00e8s compatible avec l\u2019agent Figma et les fonctionnalit\u00e9s utilis\u00e9es pendant la formation<\/span><\/li>\r\n\t<li><span style=\"font-weight: 400;\">Disposer, pour la s\u00e9quence MCP, d\u2019un client compatible tel que Claude Code, Codex, Cursor ou un environnement \u00e9quivalent valid\u00e9 en amont<\/span><\/li>\r\n<\/ul>","FOR_Programme":"<h3 class=\"chapitre\">Situer les composants d\u2019un workflow agentique dans l\u2019\u00e9cosyst\u00e8me Figma<\/h3>\r\n<ul>\r\n\t<li>Distinguer g\u00e9n\u00e9ration classique et fonctionnement d\u2019un agent<\/li>\r\n\t<li>Identifier le r\u00f4le de l\u2019agent Figma sur le canvas<\/li>\r\n\t<li>Distinguer Figma Make et agent Figma : g\u00e9n\u00e9rer un prototype fonctionnel ou intervenir dans un fichier de conception<\/li>\r\n\t<li>Comprendre le r\u00f4le d\u2019un skill dans l\u2019ex\u00e9cution d\u2019une t\u00e2che r\u00e9currente<\/li>\r\n\t<li>Distinguer les custom skills utilis\u00e9s par l\u2019agent des skills associ\u00e9s au serveur MCP Figma<\/li>\r\n\t<li>Comprendre le r\u00f4le des connecteurs MCP accessibles depuis Figma<\/li>\r\n\t<li>Distinguer ces connecteurs du serveur MCP Figma utilis\u00e9 par un agent externe<\/li>\r\n\t<li>Situer Figma Weave dans cet \u00e9cosyst\u00e8me et identifier son territoire sp\u00e9cifique autour des assets et workflows g\u00e9n\u00e9ratifs<\/li>\r\n\t<li>Construire une cartographie simple : agent, skill, contexte, connecteur, serveur MCP, outil externe<\/li>\r\n<\/ul>\r\n<div class=\"exo\"><em>\u2192 Exercice : analyser plusieurs besoins professionnels et identifier l\u2019architecture IA la plus pertinente<\/em><\/div>\r\n<h3 class=\"chapitre\">Piloter l\u2019agent Figma \u00e0 partir d\u2019un fichier et d\u2019un design system structur\u00e9s<\/h3>\r\n<ul>\r\n\t<li>Donner \u00e0 l\u2019agent un objectif pr\u00e9cis plut\u00f4t qu\u2019une simple demande de g\u00e9n\u00e9ration<\/li>\r\n\t<li>Fournir le contexte \u00e0 partir d\u2019un fichier, d\u2019une s\u00e9lection, d\u2019une r\u00e9f\u00e9rence ou d\u2019une ressource externe<\/li>\r\n\t<li>Demander \u00e0 l\u2019agent de cr\u00e9er ou modifier des \u00e9l\u00e9ments directement sur le canvas<\/li>\r\n\t<li>Exploiter les composants existants plut\u00f4t que recr\u00e9er arbitrairement une interface<\/li>\r\n\t<li>Cr\u00e9er ou modifier des variables, composants et Auto Layout avec l\u2019agent<\/li>\r\n\t<li>Faire \u00e9voluer une maquette existante sans repartir d\u2019une g\u00e9n\u00e9ration compl\u00e8te<\/li>\r\n\t<li>Utiliser le design system comme source de contraintes<\/li>\r\n\t<li>Comparer le r\u00e9sultat aux conventions r\u00e9elles du fichier<\/li>\r\n\t<li>Identifier les actions qui doivent rester valid\u00e9es ou corrig\u00e9es manuellement<\/li>\r\n\t<li>Construire une boucle courte instruction \u2192 action \u2192 contr\u00f4le \u2192 correction<\/li>\r\n<\/ul>\r\n<div class=\"exo\"><em>\u2192 Exercice : faire \u00e9voluer un \u00e9cran existant avec l\u2019agent en imposant l\u2019utilisation du design system et des composants disponibles<\/em><\/div>\r\n<h3 class=\"chapitre\">Cr\u00e9er, tester et partager des skills adapt\u00e9s \u00e0 ses m\u00e9thodes de travail<\/h3>\r\n<ul>\r\n\t<li>Comprendre un skill comme formalisation d\u2019un workflow r\u00e9utilisable<\/li>\r\n\t<li>Identifier les t\u00e2ches qui m\u00e9ritent d\u2019\u00eatre transform\u00e9es en skill<\/li>\r\n\t<li>D\u00e9finir pr\u00e9cis\u00e9ment le d\u00e9clencheur, l\u2019objectif et les \u00e9tapes attendues<\/li>\r\n\t<li>Cr\u00e9er un skill manuellement au format Markdown<\/li>\r\n\t<li>Faire transformer une conversation ou une m\u00e9thode existante en skill par l\u2019agent<\/li>\r\n\t<li>Adapter un skill issu de Figma Community \u00e0 ses propres conventions<\/li>\r\n\t<li>Invoquer un skill par slash command<\/li>\r\n\t<li>Tester sa robustesse sur plusieurs cas et identifier ses limites<\/li>\r\n\t<li>Cr\u00e9er un skill de contr\u00f4le li\u00e9 \u00e0 un design system, une checklist qualit\u00e9 ou une m\u00e9thode de revue<\/li>\r\n\t<li>Distinguer skills personnels et usages partag\u00e9s \u00e0 l\u2019\u00e9chelle d\u2019une \u00e9quipe<\/li>\r\n\t<li>Documenter les r\u00e8gles n\u00e9cessaires \u00e0 son maintien<\/li>\r\n<\/ul>\r\n<div class=\"exo\"><em>\u2192 Exercice : construire puis tester un skill \u00ab revue du design system \u00bb ou \u00ab contr\u00f4le qualit\u00e9 UI \u00bb sur plusieurs \u00e9crans<\/em><\/div>\r\n<h3 class=\"chapitre\">Connecter Figma \u00e0 des donn\u00e9es et agents externes via MCP<\/h3>\r\n<ul>\r\n\t<li>Comprendre le principe du Model Context Protocol sans entrer dans son impl\u00e9mentation technique<\/li>\r\n\t<li>Utiliser un connecteur MCP pour apporter \u00e0 l\u2019agent Figma un contexte provenant d\u2019un outil externe<\/li>\r\n\t<li>Identifier des cas d\u2019usage avec des sources comme Notion, GitHub, Linear, Asana ou une ressource interne<\/li>\r\n\t<li>Distinguer acc\u00e8s en lecture et actions d\u2019\u00e9criture sur une source connect\u00e9e<\/li>\r\n\t<li>Comprendre les enjeux de permissions et de donn\u00e9es sensibles<\/li>\r\n\t<li>D\u00e9couvrir le serveur MCP distant et le serveur Desktop de Figma<\/li>\r\n\t<li>Connecter Figma \u00e0 un client compatible MCP utilis\u00e9 pendant la formation<\/li>\r\n\t<li>R\u00e9cup\u00e9rer le contexte structur\u00e9 d\u2019une maquette sans se limiter \u00e0 une capture d\u2019\u00e9cran<\/li>\r\n\t<li>Faire exploiter composants, variables et structure du fichier par l\u2019agent externe<\/li>\r\n\t<li>D\u00e9couvrir les possibilit\u00e9s de write-to-canvas pour cr\u00e9er ou modifier du contenu Figma depuis l\u2019agent<\/li>\r\n\t<li>Exp\u00e9rimenter un premier passage du design vers une impl\u00e9mentation<\/li>\r\n\t<li>Situer Code Connect lorsque le design system Figma doit \u00eatre reli\u00e9 aux composants r\u00e9els d\u2019une base de code<\/li>\r\n<\/ul>\r\n<div class=\"exo\"><em>\u2192 Exercice : connecter une s\u00e9lection Figma \u00e0 un agent compatible MCP, lui transmettre son contexte structur\u00e9 puis lui faire produire ou modifier un \u00e9l\u00e9ment \u00e0 partir des contraintes du design system<\/em><\/div>\r\n<h3 class=\"chapitre\">Exploiter Figma Weave et formaliser un workflow IA ma\u00eetris\u00e9<\/h3>\r\n<ul>\r\n\t<li>Situer les Weave tools d\u00e9sormais accessibles directement dans Figma Design<\/li>\r\n\t<li>Utiliser un outil Weave pour g\u00e9n\u00e9rer, d\u00e9cliner ou modifier un asset existant<\/li>\r\n\t<li>Tester des usages comme changement de fond, variation, transfert de style ou g\u00e9n\u00e9ration d\u2019illustration<\/li>\r\n\t<li>Comprendre qu\u2019un Weave tool repose sur un workflow nodal sous-jacent<\/li>\r\n\t<li>Ouvrir ce workflow dans Figma Weave pour en observer la construction<\/li>\r\n\t<li>Dupliquer un workflow existant et en modifier certains param\u00e8tres<\/li>\r\n\t<li>Identifier les cas o\u00f9 Weave compl\u00e8te r\u00e9ellement un workflow UI plut\u00f4t que multiplier les outils<\/li>\r\n\t<li>Distinguer les fonctions int\u00e9gr\u00e9es dans Figma Design de l\u2019environnement Figma Weave complet<\/li>\r\n\t<li>Prendre en compte les mod\u00e8les utilis\u00e9s, les cr\u00e9dits et les conditions d\u2019acc\u00e8s<\/li>\r\n\t<li>Cartographier les t\u00e2ches pouvant relever de l\u2019agent, d\u2019un skill, d\u2019un MCP ou de Weave<\/li>\r\n\t<li>Formaliser un workflow personnel permettant de conserver la validation du designer \u00e0 chaque \u00e9tape critique<\/li>\r\n<\/ul>\r\n<div class=\"exo\"><em>\u2192 Exercice : enrichir un \u00e9cran avec un asset produit via Weave puis formaliser le workflow agentique utilis\u00e9 pendant la journ\u00e9e<\/em><\/div>","FOR_Profil":"<p><span style=\"font-weight: 400;\">UI Designer \/ Int\u00e9grateur avec plus de 5 ans d\u2019exp\u00e9rience en animation de formation.<\/span><\/p>","FOR_Ressources":"<ul>\r\n\t<li><span style=\"font-weight: 400;\">Supports de cours d\u00e9mat\u00e9rialis\u00e9s<\/span><\/li>\r\n\t<li><span style=\"font-weight: 400;\">Abonnement de 3 mois \u00e0 tuto.com<\/span><\/li>\r\n\t<li><span style=\"font-weight: 400;\">Acc\u00e8s illimit\u00e9 par mail \u00e0 la hotline Swash<\/span><\/li>\r\n<\/ul>","FOR_ModPres":"<h4><strong>Parcours p\u00e9dagogique\u00a0: <\/strong><\/h4>\r\n<p><span style=\"font-weight: 400;\">Quiz de positionnement <span class=\"flechD\">\u276f\u00a0<\/span>1 jour pr\u00e9sentiel <span class=\"flechD\">\u276f <\/span><\/span><span class=\"s1\">\u00c9valuation des acquis<\/span><\/p>\r\n<h4><strong>M\u00e9thode p\u00e9dagogique : <\/strong><\/h4>\r\n<p>Expositive + d\u00e9monstrative : expos\u00e9s th\u00e9oriques, d\u00e9monstrations, exercices, feedbacks personnalis\u00e9s<\/p>\r\n<h4><strong>Moyens techniques : <\/strong><\/h4>\r\n<ul>\r\n\t<li>1 ordinateur par participant (Mac ou PC) \u00e9quip\u00e9 de Figma et des outils compl\u00e9mentaires (Serveur\/Client MCP\u2026), fourni par nos soins<\/li>\r\n\t<li>Poste de l\u2019intervenant reli\u00e9 \u00e0 un grand \u00e9cran<\/li>\r\n<\/ul>","FOR_ModDist":"<p><span style=\"font-weight: 400;\">Pour des raisons techniques et p\u00e9dagogiques, cette formation est propos\u00e9e exclusivement en pr\u00e9sentiel.<\/span><\/p>","FOR_Eval":"<ul>\r\n\t<li><span style=\"font-weight: 400;\">Validation des acquis pendant la formation gr\u00e2ce \u00e0 des \u00e9tudes de cas et des exercices pratiques<\/span><\/li>\r\n\t<li><span style=\"font-weight: 400;\">Suivi d'acquisition des objectifs p\u00e9dagogiques par l'intervenant<\/span><\/li>\r\n\t<li><span style=\"font-weight: 400;\">\u00c9valuation \u00e0 chaud (remplie en fin de formation) et \u00e0 froid (\u00e0 60 jours)<\/span><\/li>\r\n<\/ul>","for_pourquoi":"<p>&nbsp;<\/p>\r\n<p><span style=\"color: #15384e;\">\u2026\/\u2026<\/span><\/p>\r\n<p>&nbsp;<\/p>\r\n<p class=\"PDq2pG_selectionAnchorContainer\" data-start=\"30296\" data-end=\"30408\"><span style=\"color: #15384e;\">L\u2019arriv\u00e9e de l\u2019agent Figma marque une \u00e9volution diff\u00e9rente de celle introduite par les g\u00e9n\u00e9rateurs d\u2019interfaces.<\/span><\/p>\r\n<p data-start=\"30410\" data-end=\"30493\"><span style=\"color: #15384e;\">La question n\u2019est plus seulement : \u00ab Comment obtenir rapidement une proposition ? \u00bb\u2026 <\/span><span style=\"color: #15384e;\">Elle devient : \u00ab Comment permettre \u00e0 un agent d\u2019intervenir correctement dans le syst\u00e8me de conception que nous utilisons d\u00e9j\u00e0 ? \u00bb<\/span><\/p>\r\n<p data-start=\"30626\" data-end=\"30836\"><span style=\"color: #15384e;\">Pour cela, lui demander simplement de \u00ab refaire cet \u00e9cran \u00bb ne suffit pas. Il faut lui fournir un contexte, des composants, des variables, des r\u00e8gles, des m\u00e9thodes et parfois des donn\u00e9es issues d\u2019autres outils.<\/span><\/p>\r\n<p data-start=\"30838\" data-end=\"31037\"><span style=\"color: #15384e;\">Cette formation s\u2019adresse donc \u00e0 des utilisateurs avanc\u00e9s de Figma qui souhaitent structurer un v\u00e9ritable workflow de design agentique plut\u00f4t qu\u2019ajouter quelques prompts IA \u00e0 leur pratique existante.<\/span><\/p>\r\n<h2 data-section-id=\"1kxtzdr\" data-start=\"31039\" data-end=\"31107\"><strong><span style=\"color: #15384e;\">Que peut r\u00e9ellement faire l\u2019agent Figma dans un fichier Design ?<\/span><\/strong><\/h2>\r\n<p data-start=\"31109\" data-end=\"31161\"><span style=\"color: #15384e;\">L\u2019agent Figma intervient directement dans le canvas. <\/span><span style=\"color: #15384e;\">Il peut cr\u00e9er ou modifier des \u00e9l\u00e9ments, ajuster des layouts, exploiter les composants, styles et variables d\u2019un design system, effectuer des modifications en s\u00e9rie, analyser une interface ou appliquer une m\u00e9thode de contr\u00f4le.<\/span><\/p>\r\n<p data-start=\"31430\" data-end=\"31489\"><span style=\"color: #15384e;\">Cette capacit\u00e9 change la nature de l\u2019interaction avec l\u2019IA : l<\/span><span style=\"color: #15384e;\">\u2019agent ne produit plus n\u00e9cessairement un r\u00e9sultat s\u00e9par\u00e9 qu\u2019il faudra ensuite reconstruire. Il peut travailler dans le fichier et sur les structures utilis\u00e9es quotidiennement par l\u2019\u00e9quipe.<\/span><\/p>\r\n<p data-start=\"31682\" data-end=\"31741\"><span style=\"color: #15384e;\">Mais cette proximit\u00e9 augmente aussi l\u2019exigence de contr\u00f4le : u<\/span><span style=\"color: #15384e;\">n fichier mal organis\u00e9, un design system ambigu ou une instruction trop large donnent davantage de libert\u00e9 \u00e0 l\u2019agent et augmentent le risque d\u2019obtenir des modifications difficiles \u00e0 valider.<\/span><\/p>\r\n<p data-start=\"31936\" data-end=\"32041\"><span style=\"color: #15384e;\">La formation travaille donc une boucle volontairement courte : instruction, action, contr\u00f4le, correction.<\/span><\/p>\r\n<p data-start=\"32043\" data-end=\"32168\"><span style=\"color: #15384e;\">L\u2019agent est utilis\u00e9 comme op\u00e9rateur dans un cadre d\u00e9fini, pas comme designer autonome auquel on d\u00e9l\u00e8gue l\u2019ensemble du projet.<\/span><\/p>\r\n<h2 data-section-id=\"jtqjck\" data-start=\"32170\" data-end=\"32230\"><strong><span style=\"color: #15384e;\">Transformer une m\u00e9thode de travail en skill r\u00e9utilisable<\/span><\/strong><\/h2>\r\n<p data-start=\"32232\" data-end=\"32336\"><span style=\"color: #15384e;\">Une grande partie de l\u2019int\u00e9r\u00eat d\u2019un agent appara\u00eet lorsque l\u2019on cesse de r\u00e9p\u00e9ter les m\u00eames instructions.<\/span><\/p>\r\n<p data-start=\"32338\" data-end=\"32641\"><span style=\"color: #15384e;\">Un skill permet de formaliser une m\u00e9thode sous forme d\u2019instructions r\u00e9utilisables. Figma d\u00e9finit actuellement ces custom skills comme des fichiers Markdown capables d\u2019encapsuler un workflow afin que l\u2019agent puisse reproduire plus r\u00e9guli\u00e8rement une s\u00e9rie d\u2019\u00e9tapes.<\/span><\/p>\r\n<p data-start=\"32643\" data-end=\"32810\"><span style=\"color: #15384e;\">Une \u00e9quipe peut par exemple formaliser un contr\u00f4le qualit\u00e9 UI, une revue de design system, une v\u00e9rification de nomenclature ou une proc\u00e9dure de pr\u00e9paration au handoff.<\/span><\/p>\r\n<p data-start=\"32812\" data-end=\"32873\"><span style=\"color: #15384e;\">L\u2019enjeu n\u2019est pas de transformer toutes les t\u00e2ches en skills.<\/span><\/p>\r\n<p data-start=\"32875\" data-end=\"33071\"><span style=\"color: #15384e;\">Une proc\u00e9dure m\u00e9rite surtout cette formalisation lorsqu\u2019elle est suffisamment stable, r\u00e9p\u00e9titive et explicite pour qu\u2019un agent puisse la reproduire sans r\u00e9inventer les r\u00e8gles \u00e0 chaque utilisation.<\/span><\/p>\r\n<p data-start=\"33073\" data-end=\"33183\"><span style=\"color: #15384e;\">Cr\u00e9er un skill oblige d\u2019ailleurs souvent \u00e0 clarifier une m\u00e9thode qui n\u2019avait jamais \u00e9t\u00e9 r\u00e9ellement document\u00e9e.<\/span><\/p>\r\n<p data-start=\"33185\" data-end=\"33351\"><span style=\"color: #15384e;\">C\u2019est l\u2019un des apports les plus int\u00e9ressants de l\u2019agentique en entreprise : avant d\u2019automatiser une pratique, il faut \u00eatre capable de d\u00e9crire comment elle fonctionne.<\/span><\/p>\r\n<h2 data-section-id=\"9qws14\" data-start=\"33353\" data-end=\"33403\"><strong><span style=\"color: #15384e;\">MCP et Figma : de quoi parle-t-on exactement ?<\/span><\/strong><\/h2>\r\n<p data-start=\"33405\" data-end=\"33474\"><span style=\"color: #15384e;\">Le terme MCP recouvre plusieurs usages qu\u2019il est utile de distinguer.<\/span><\/p>\r\n<p data-start=\"33476\" data-end=\"33795\"><span style=\"color: #15384e;\">Depuis Figma, un connecteur MCP peut permettre \u00e0 l\u2019agent d\u2019acc\u00e9der au contexte d\u2019un outil ou d\u2019une ressource externe. Figma documente notamment la possibilit\u00e9 de connecter des serveurs MCP publics ou priv\u00e9s afin d\u2019apporter des donn\u00e9es suppl\u00e9mentaires \u00e0 Figma Agent ou Figma Make.<\/span><\/p>\r\n<p data-start=\"33797\" data-end=\"34061\"><span style=\"color: #15384e;\">Dans l\u2019autre sens, le serveur MCP Figma permet \u00e0 un agent externe compatible d\u2019acc\u00e9der au contexte structur\u00e9 d\u2019un fichier Figma : composants, variables, donn\u00e9es de layout et autres informations qui ne seraient pas disponibles \u00e0 partir d\u2019une simple capture d\u2019\u00e9cran.<\/span><\/p>\r\n<p data-start=\"34063\" data-end=\"34234\"><span style=\"color: #15384e;\">Des clients comme Claude Code, Codex, Cursor, VS Code ou Gemini CLI sont aujourd\u2019hui document\u00e9s par Figma pour ce type de workflow.<\/span><\/p>\r\n<p data-start=\"34236\" data-end=\"34449\"><span style=\"color: #15384e;\">Cette distinction est centrale pour comprendre les workflows agentiques : parfois Figma sollicite une information externe ; parfois un agent externe vient chercher le contexte de Figma pour poursuivre son travail.<\/span><\/p>\r\n<h2 data-section-id=\"nhtgbt\" data-start=\"34451\" data-end=\"34491\"><strong><span style=\"color: #15384e;\">Du design-to-code au write-to-canvas<\/span><\/strong><\/h2>\r\n<p data-start=\"34493\" data-end=\"34575\"><span style=\"color: #15384e;\">Le MCP ouvre \u00e9galement une circulation plus directe entre design et d\u00e9veloppement.<\/span><\/p>\r\n<p data-start=\"34577\" data-end=\"34729\"><span style=\"color: #15384e;\">Un agent peut r\u00e9cup\u00e9rer le contexte d\u2019une maquette afin de g\u00e9n\u00e9rer une impl\u00e9mentation qui tienne davantage compte des composants et variables existants.<\/span><\/p>\r\n<p data-start=\"34731\" data-end=\"35088\"><span style=\"color: #15384e;\">\u00c0 l\u2019inverse, les capacit\u00e9s de write-to-canvas permettent d\u00e9sormais, dans les configurations compatibles, de cr\u00e9er ou modifier de v\u00e9ritables \u00e9l\u00e9ments Figma depuis un agent externe : Frames, composants, variables ou Auto Layout restent \u00e9ditables dans le fichier plut\u00f4t que d\u2019\u00eatre produits sous forme d\u2019une simple image.<\/span><\/p>\r\n<p data-start=\"35090\" data-end=\"35204\"><span style=\"color: #15384e;\">La promesse est importante, mais elle ne fait pas dispara\u00eetre le besoin d\u2019un design system correctement construit.<\/span><\/p>\r\n<p data-start=\"35206\" data-end=\"35402\"><span style=\"color: #15384e;\">Plus les \u00e9changes entre code, agents et canvas deviennent directs, plus les conventions de nommage, composants, variables et correspondances entre design et d\u00e9veloppement deviennent structurantes.<\/span><\/p>\r\n<p data-start=\"35404\" data-end=\"35554\"><span style=\"color: #15384e;\">Code Connect est situ\u00e9 dans cette logique lorsque l\u2019\u00e9quipe cherche \u00e0 relier les composants d\u00e9finis dans Figma \u00e0 ceux r\u00e9ellement utilis\u00e9s dans le code.<\/span><\/p>\r\n<h2 data-section-id=\"12lnzlw\" data-start=\"35556\" data-end=\"35615\"><strong><span style=\"color: #15384e;\">Custom skills Figma et skills MCP : quelle diff\u00e9rence ?<\/span><\/strong><\/h2>\r\n<p data-start=\"35617\" data-end=\"35693\"><span style=\"color: #15384e;\">C\u2019est une distinction assez r\u00e9cente, et potentiellement source de confusion.<\/span><\/p>\r\n<p data-start=\"35695\" data-end=\"35845\"><span style=\"color: #15384e;\">Les custom skills utilis\u00e9s dans Figma Agent servent \u00e0 formaliser une m\u00e9thode que l\u2019agent pourra appliquer directement dans Figma Design ou Figma Make.<\/span><\/p>\r\n<p data-start=\"35847\" data-end=\"36171\"><span style=\"color: #15384e;\">Figma propose parall\u00e8lement des skills destin\u00e9s \u00e0 son serveur MCP. Ceux-ci apprennent \u00e0 un client agentique externe comment ex\u00e9cuter correctement certaines t\u00e2ches li\u00e9es \u00e0 Figma, par exemple cr\u00e9er un fichier, construire un \u00e9cran \u00e0 partir d\u2019un design system ou intervenir sur le canvas.<\/span><\/p>\r\n<p data-start=\"36173\" data-end=\"36338\"><span style=\"color: #15384e;\">Les deux reposent sur la m\u00eame id\u00e9e g\u00e9n\u00e9rale, donner \u00e0 l\u2019agent des instructions plus stables et r\u00e9utilisables, mais ils ne s\u2019ins\u00e8rent pas au m\u00eame endroit du workflow.<\/span><\/p>\r\n<p data-start=\"36340\" data-end=\"36460\"><span style=\"color: #15384e;\">C\u2019est pr\u00e9cis\u00e9ment le type de distinction que cette journ\u00e9e cherche \u00e0 rendre intelligible avant de multiplier les outils.<\/span><\/p>\r\n<h2 data-section-id=\"1ty3ze6\" data-start=\"36462\" data-end=\"36508\"><strong><span style=\"color: #15384e;\">O\u00f9 se situe Figma Weave dans ce workflow ?<\/span><\/strong><\/h2>\r\n<p data-start=\"36510\" data-end=\"36549\"><span style=\"color: #15384e;\">Figma Weave occupe un autre territoire.<\/span><\/p>\r\n<p data-start=\"36551\" data-end=\"36922\"><span style=\"color: #15384e;\">Ses outils int\u00e9gr\u00e9s dans Figma Design permettent aujourd\u2019hui d\u2019effectuer diff\u00e9rentes op\u00e9rations de g\u00e9n\u00e9ration et d\u2019\u00e9dition visuelle : changement de fond, transfert de style, variations, adaptation de lumi\u00e8re ou g\u00e9n\u00e9ration d\u2019illustrations. Ces fonctions sont actuellement propos\u00e9es en beta sur certains forfaits professionnels.<\/span><\/p>\r\n<p data-start=\"36924\" data-end=\"37284\"><span style=\"color: #15384e;\">Chaque outil Weave int\u00e9gr\u00e9 repose sur un workflow nodal qui peut \u00eatre ouvert dans l\u2019environnement Figma Weave afin d\u2019en observer la construction, de le dupliquer ou de le modifier. Figma Weave demeure actuellement une plateforme distincte, m\u00eame si certaines de ses fonctions sont d\u00e9sormais accessibles dans Figma Design.<\/span><\/p>\r\n<p data-start=\"37286\" data-end=\"37431\"><span style=\"color: #15384e;\">L\u2019int\u00e9r\u00eat de la formation n\u2019est donc pas de transformer une journ\u00e9e consacr\u00e9e au design agentique en formation compl\u00e8te \u00e0 la g\u00e9n\u00e9ration d\u2019images.<\/span><\/p>\r\n<p data-start=\"37433\" data-end=\"37604\"><span style=\"color: #15384e;\">Weave est utilis\u00e9 pour comprendre comment un workflow visuel g\u00e9n\u00e9ratif peut venir compl\u00e9ter un travail d\u2019interface lorsque cela apporte r\u00e9ellement quelque chose au projet.<\/span><\/p>\r\n<h2 data-section-id=\"t1momg\" data-start=\"37606\" data-end=\"37674\"><strong><span style=\"color: #15384e;\">\u00c0 quels professionnels s\u2019adresse une formation Figma agentique ?<\/span><\/strong><\/h2>\r\n<p data-start=\"37676\" data-end=\"37880\"><span style=\"color: #15384e;\">Elle concerne principalement les UI et Product Designers exp\u00e9riment\u00e9s, Design System Designers, Design Ops et profils hybrides design \/ d\u00e9veloppement qui disposent d\u00e9j\u00e0 d\u2019un environnement Figma structur\u00e9.<\/span><\/p>\r\n<p data-start=\"37882\" data-end=\"38114\"><span style=\"color: #15384e;\">Elle peut \u00e9galement \u00eatre utile aux Product Managers ou directeurs artistiques digitaux qui interviennent de mani\u00e8re suffisamment proche des syst\u00e8mes de conception pour participer \u00e0 la d\u00e9finition des r\u00e8gles, processus et validations.<\/span><\/p>\r\n<p data-start=\"38116\" data-end=\"38200\"><span style=\"color: #15384e;\">Ce n\u2019est en revanche ni une initiation \u00e0 Figma, ni une initiation \u00e0 l\u2019IA g\u00e9n\u00e9rative.<\/span><\/p>\r\n<p data-start=\"38202\" data-end=\"38349\"><span style=\"color: #15384e;\">Pour acqu\u00e9rir d\u2019abord les m\u00e9canismes avanc\u00e9s de design system, variables et handoff, mieux vaut passer par <span class=\"contents\" data-content-reference-start=\"38597\" data-content-reference-end=\"38647\"><span class=\"\" data-state=\"closed\"><a class=\"decorated-link\" style=\"color: #15384e;\" href=\"https:\/\/www.swash-formation.fr\/formation\/figma-gagner-en-efficacite\/?utm_source=chatgpt.com\" target=\"_blank\" rel=\"noopener\">Figma : gagner en efficacit\u00e9<\/a><\/span><\/span>.<\/span><\/p>\r\n<p data-start=\"38351\" data-end=\"38621\"><span style=\"color: #15384e;\">Pour travailler la logique agentique ind\u00e9pendamment de Figma, notre formation <span class=\"contents\" data-content-reference-start=\"38728\" data-content-reference-end=\"38794\"><span class=\"\" data-state=\"closed\"><a class=\"decorated-link\" style=\"color: #15384e;\" href=\"https:\/\/www.swash-formation.fr\/formation\/ia-agentique-brief-automatisation\/?utm_source=chatgpt.com\" target=\"_blank\" rel=\"noopener\">IA agentique : du brief \u00e0 l\u2019automatisation<\/a><\/span><\/span> aborde la transformation d\u2019un brief en mission, la formalisation de skills et la supervision d\u2019un processus multi-\u00e9tapes dans un cadre plus transversal.<\/span><\/p>\r\n<h2 data-section-id=\"1vd39jt\" data-start=\"38623\" data-end=\"38685\"><strong><span style=\"color: #15384e;\">En intra : construire le workflow avant de former l\u2019\u00e9quipe<\/span><\/strong><\/h2>\r\n<p data-start=\"38687\" data-end=\"38798\"><span style=\"color: #15384e;\">Sur cette formation, l\u2019intra peut difficilement se limiter \u00e0 changer le nom de l\u2019entreprise dans les exercices.<\/span><\/p>\r\n<p data-start=\"38800\" data-end=\"39032\"><span style=\"color: #15384e;\">Un workflow MCP d\u00e9pend du forfait Figma, du type de licence, des fonctions effectivement d\u00e9ploy\u00e9es, du client agentique autoris\u00e9, des droits d\u2019acc\u00e8s, des politiques IT et des donn\u00e9es que l\u2019organisation accepte de rendre accessibles.<\/span><\/p>\r\n<p data-start=\"39034\" data-end=\"39170\"><span style=\"color: #15384e;\">Le travail de pr\u00e9paration peut donc associer design, produit, d\u00e9veloppement et, lorsque cela est n\u00e9cessaire, les \u00e9quipes IT ou s\u00e9curit\u00e9.<\/span><\/p>\r\n<p data-start=\"39172\" data-end=\"39407\"><span style=\"color: #15384e;\">Nous pouvons partir d\u2019un design system r\u00e9el et d\u2019un cas d\u2019usage pr\u00e9cis : contr\u00f4le d\u2019interface, cr\u00e9ation d\u2019\u00e9crans \u00e0 partir de composants existants, pr\u00e9paration du handoff, passage design-to-code ou connexion \u00e0 une documentation interne.<\/span><\/p>\r\n<p data-start=\"39409\" data-end=\"39552\"><span style=\"color: #15384e;\">Le programme devient alors un moyen de tester une architecture de workflow, ses b\u00e9n\u00e9fices et ses limites avant d\u2019envisager un usage plus large.<\/span><\/p>\r\n<p data-start=\"39554\" data-end=\"39789\"><span style=\"color: #15384e;\">C\u2019est probablement sur ce quatri\u00e8me niveau que le format <span class=\"contents\" data-content-reference-start=\"39937\" data-content-reference-end=\"39977\"><span class=\"\" data-state=\"closed\"><a class=\"decorated-link\" style=\"color: #15384e;\" href=\"https:\/\/www.swash-formation.fr\/formation-intra-sur-mesure\/?utm_source=chatgpt.com\" target=\"_blank\" rel=\"noopener\">intra \/ sur mesure<\/a><\/span><\/span> apporte le plus de valeur, car l\u2019efficacit\u00e9 d\u2019un workflow agentique d\u00e9pend directement de l\u2019environnement dans lequel il doit fonctionner.<\/span><\/p>\r\n<h2 data-section-id=\"1xxf4ds\" data-start=\"39791\" data-end=\"39798\"><strong><span style=\"color: #15384e;\">FAQ<\/span><\/strong><\/h2>\r\n<h3 data-start=\"39800\" data-end=\"39856\"><strong><span style=\"color: #15384e;\">Quelle diff\u00e9rence entre Figma Agent et Figma Make ?<\/span><\/strong><\/h3>\r\n<p data-start=\"39858\" data-end=\"40182\"><span style=\"color: #15384e;\">Figma Make est principalement orient\u00e9 vers la g\u00e9n\u00e9ration et l\u2019\u00e9volution de prototypes fonctionnels ou web apps \u00e0 partir d\u2019instructions et de r\u00e9f\u00e9rences. Figma Agent intervient directement dans l\u2019environnement de conception et peut utiliser les composants, styles, variables, skills et ressources disponibles dans le fichier.<\/span><\/p>\r\n<h3 data-start=\"40184\" data-end=\"40239\"><strong><span style=\"color: #15384e;\">Faut-il savoir coder pour suivre cette formation ?<\/span><\/strong><\/h3>\r\n<p data-start=\"40241\" data-end=\"40442\"><span style=\"color: #15384e;\">Non. Le programme n\u2019est pas une formation au d\u00e9veloppement. Une bonne compr\u00e9hension des \u00e9changes entre design et code facilite toutefois la partie consacr\u00e9e au MCP, \u00e0 Code Connect et au design-to-code.<\/span><\/p>\r\n<h3 data-start=\"40444\" data-end=\"40524\"><strong><span style=\"color: #15384e;\">Un serveur MCP Figma donne-t-il acc\u00e8s \u00e0 tous les fichiers de l\u2019entreprise ?<\/span><\/strong><\/h3>\r\n<p data-start=\"40526\" data-end=\"40851\"><span style=\"color: #15384e;\">Non. Les possibilit\u00e9s d\u00e9pendent des droits de l\u2019utilisateur, du type de serveur et de la configuration utilis\u00e9e. Les permissions doivent faire partie int\u00e9grante du cadrage du workflow. Figma documente d\u2019ailleurs s\u00e9par\u00e9ment les conditions d\u2019acc\u00e8s de ses serveurs MCP distant et desktop.<\/span><\/p>\r\n<h3 data-start=\"40853\" data-end=\"40921\"><strong><span style=\"color: #15384e;\">Un agent externe peut-il r\u00e9ellement modifier un fichier Figma ?<\/span><\/strong><\/h3>\r\n<p data-start=\"40923\" data-end=\"41232\"><span style=\"color: #15384e;\">Oui, certaines fonctions actuelles du serveur MCP distant et des skills Figma permettent d\u2019\u00e9crire sur le canvas et de cr\u00e9er ou modifier du contenu Figma natif. Ces fonctions \u00e9tant encore en \u00e9volution et partiellement en b\u00eata, les acc\u00e8s sont v\u00e9rifi\u00e9s avant la formation.<\/span><\/p>\r\n<h3 data-start=\"41234\" data-end=\"41297\"><strong><span style=\"color: #15384e;\">Quelle diff\u00e9rence entre un skill et un prompt enregistr\u00e9 ?<\/span><\/strong><\/h3>\r\n<p data-start=\"41299\" data-end=\"41624\"><span style=\"color: #15384e;\">Un skill ne contient pas seulement une formulation \u00e0 r\u00e9utiliser. Il peut formaliser une proc\u00e9dure, un ordre d\u2019ex\u00e9cution, les ressources \u00e0 consulter, les r\u00e8gles \u00e0 respecter et les contr\u00f4les \u00e0 effectuer. Il est donc particuli\u00e8rement adapt\u00e9 aux workflows r\u00e9p\u00e9titifs ou aux m\u00e9thodes qu\u2019une \u00e9quipe souhaite rendre plus coh\u00e9rentes.<\/span><\/p>\r\n<h3 data-start=\"41626\" data-end=\"41668\"><strong><span style=\"color: #15384e;\">Figma Weave fait-il partie de Figma ?<\/span><\/strong><\/h3>\r\n<p data-start=\"41670\" data-end=\"41917\"><span style=\"color: #15384e;\">Une s\u00e9lection de Weave tools est d\u00e9sormais int\u00e9gr\u00e9e \u00e0 Figma Design. L\u2019environnement complet Figma Weave reste actuellement un produit distinct permettant de cr\u00e9er et modifier des workflows g\u00e9n\u00e9ratifs nodaux.<\/span><\/p>","FOR_PlanCond":1,"FOR_PlanDist":null,"FOR_PlanPres":[{"FOR_Dates":"le 15 janvier 2027","FOR_Mentorat":null,"FOR_DateOff":"20270115"},{"FOR_Dates":"le 2 avril 2027","FOR_Mentorat":null,"FOR_DateOff":"20270402"},{"FOR_Dates":"le 15 septembre 2027","FOR_Mentorat":null,"FOR_DateOff":"20270915"},{"FOR_Dates":"le 15 d\u00e9cembre 2027","FOR_Mentorat":null,"FOR_DateOff":"20271215"}],"for_tag-new":true,"for_tag-update":false},"_links":{"self":[{"href":"https:\/\/www.swash-formation.fr\/sw-connect\/wp\/v2\/formation\/8780","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.swash-formation.fr\/sw-connect\/wp\/v2\/formation"}],"about":[{"href":"https:\/\/www.swash-formation.fr\/sw-connect\/wp\/v2\/types\/formation"}],"wp:attachment":[{"href":"https:\/\/www.swash-formation.fr\/sw-connect\/wp\/v2\/media?parent=8780"}],"wp:term":[{"taxonomy":"domaine","embeddable":true,"href":"https:\/\/www.swash-formation.fr\/sw-connect\/wp\/v2\/domaine?post=8780"},{"taxonomy":"motcle","embeddable":true,"href":"https:\/\/www.swash-formation.fr\/sw-connect\/wp\/v2\/motcle?post=8780"},{"taxonomy":"metier","embeddable":true,"href":"https:\/\/www.swash-formation.fr\/sw-connect\/wp\/v2\/metier?post=8780"},{"taxonomy":"etiquette","embeddable":true,"href":"https:\/\/www.swash-formation.fr\/sw-connect\/wp\/v2\/etiquette?post=8780"},{"taxonomy":"type_ra","embeddable":true,"href":"https:\/\/www.swash-formation.fr\/sw-connect\/wp\/v2\/type_ra?post=8780"},{"taxonomy":"logiciel","embeddable":true,"href":"https:\/\/www.swash-formation.fr\/sw-connect\/wp\/v2\/logiciel?post=8780"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}