\u00c0 partir d\u2019un brief, d\u00e9finir le contexte et les instructions n\u00e9cessaires \u00e0 une g\u00e9n\u00e9ration pertinente, puis produire et faire \u00e9voluer une interface ou un prototype fonctionnel avec Figma Make.<\/p>\r\n
\u00c9valuer diff\u00e9rentes solutions d\u2019IA, s\u00e9lectionner les propositions pertinentes et restructurer le r\u00e9sultat dans Figma Design afin d\u2019obtenir une maquette coh\u00e9rente, exploitable et ma\u00eetris\u00e9e par le designer.<\/p>","FOR_Obj":"
Cette formation s\u2019adresse aux professionnels utilisant d\u00e9j\u00e0 Figma et souhaitant int\u00e9grer la g\u00e9n\u00e9ration d\u2019interfaces et le prototypage assist\u00e9 par IA \u00e0 leur processus de conception :<\/p>\r\n
Pour les sessions intra :\u00a0<\/p>\r\n
-> Exercice : confronter deux approches sur un m\u00eame besoin puis argumenter le choix de la proposition \u00e0 poursuivre<\/strong><\/em><\/p>\r\n -> Exercice de synth\u00e8se : partir d\u2019une g\u00e9n\u00e9ration IA et la transformer en maquette structur\u00e9e et exploitable par une \u00e9quipe produit<\/em><\/strong><\/p>","FOR_Profil":" UI Designer avec plus de 10 ans d\u2019exp\u00e9rience en animation de formation.<\/span><\/p>","FOR_Ressources":" Quiz de positionnement \u276f\u00a0<\/span>1 jour pr\u00e9sentiel \u276f <\/span><\/span>\u00c9valuation des acquis<\/span><\/p>\r\n Expositive + d\u00e9monstrative : expos\u00e9s th\u00e9oriques, d\u00e9monstrations, mise en pratique, feedbacks personnalis\u00e9s<\/span><\/p>\r\n Quiz de positionnement \u276f<\/span> 1 classe virtuelle synchrone \u276f <\/span><\/span>\u00c9valuation des acquis<\/span><\/p>\r\n Expositive + d\u00e9monstrative : expos\u00e9s th\u00e9oriques, d\u00e9monstrations, mise en pratique, feedbacks personnalis\u00e9s<\/span><\/p>\r\n \u2026\/\u2026<\/span><\/p>\r\n Les outils d\u2019intelligence artificielle savent d\u00e9sormais produire en quelques minutes des interfaces qui auraient auparavant n\u00e9cessit\u00e9 plusieurs heures de \u00ab maquettage \u00bb.<\/span><\/p>\r\n Cette rapidit\u00e9 pose cependant une nouvelle question : que vaut r\u00e9ellement ce qui vient d\u2019\u00eatre g\u00e9n\u00e9r\u00e9 ?<\/span><\/p>\r\n Une interface peut \u00eatre visuellement cr\u00e9dible tout en reposant sur une mauvaise hi\u00e9rarchie, un parcours incoh\u00e9rent ou une structure difficile \u00e0 reprendre. Un prototype peut sembler fonctionnel sans r\u00e9pondre correctement au brief. Et multiplier les g\u00e9n\u00e9rations ne constitue pas davantage une m\u00e9thode de conception.<\/span><\/p>\r\n Cette formation Figma Make et IA se concentre donc sur l\u2019ensemble du processus : pr\u00e9parer le contexte, g\u00e9n\u00e9rer, comparer, tester, s\u00e9lectionner puis reprendre la main dans Figma Design.<\/span><\/p>\r\n Un bon r\u00e9sultat ne d\u00e9pend pas seulement de la formulation d\u2019une instruction. Avant de demander \u00e0 Figma Make de g\u00e9n\u00e9rer une interface, il faut d\u00e9terminer ce que l\u2019on cherche r\u00e9ellement \u00e0 produire : objectifs, utilisateurs, fonctionnalit\u00e9s, parcours prioritaires, contenus, contraintes techniques et direction visuelle.<\/span><\/p>\r\n La formation apprend \u00e0 hi\u00e9rarchiser ces informations et \u00e0 distinguer ce qui doit \u00eatre fourni imm\u00e9diatement de ce qui peut \u00eatre pr\u00e9cis\u00e9 au fil des it\u00e9rations.<\/span><\/p>\r\n Figma Make permet aujourd\u2019hui de combiner instructions, designs existants, images, contexte provenant de biblioth\u00e8ques et, sur certaines offres, un \u00ab Plan mode \u00bb qui pr\u00e9pare un plan structur\u00e9 avant la g\u00e9n\u00e9ration.<\/span><\/p>\r\n Cette \u00e9tape est particuli\u00e8rement int\u00e9ressante sur des projets complexes : elle permet de contr\u00f4ler la compr\u00e9hension du besoin avant de commencer \u00e0 produire.<\/span><\/p>\r\n Figma Make appartient \u00e0 la cat\u00e9gorie des outils dits \u00ab prompt-to-app \u00bb.<\/span><\/p>\r\n Il peut produire une interface interactive, un prototype fonctionnel ou une web app \u00e0 partir d\u2019instructions et de r\u00e9f\u00e9rences existantes.<\/span><\/p>\r\n La formation ne s\u2019arr\u00eate cependant pas au premier r\u00e9sultat : les participants testent les parcours cr\u00e9\u00e9s, examinent les \u00e9tats et interactions, demandent des modifications cibl\u00e9es, utilisent des r\u00e9f\u00e9rences Figma et confrontent diff\u00e9rentes pistes.<\/span><\/p>\r\n Cette logique d\u2019it\u00e9ration est essentielle : g\u00e9n\u00e9rer \u00e0 nouveau l\u2019ensemble du projet d\u00e8s qu\u2019un d\u00e9tail pose probl\u00e8me conduit souvent \u00e0 perdre ce qui fonctionnait d\u00e9j\u00e0.<\/span><\/p>\r\n Le travail porte donc autant sur la mani\u00e8re de dialoguer avec Figma Make que sur la capacit\u00e9 \u00e0 diagnostiquer pr\u00e9cis\u00e9ment ce qui m\u00e9rite d\u2019\u00eatre modifi\u00e9.<\/span><\/p>\r\n Parce que tous les outils d\u2019IA pour l\u2019UX\/UI ne r\u00e9pondent pas au m\u00eame besoin :\u00a0<\/span><\/p>\r\n L\u2019enjeu p\u00e9dagogique n\u2019est donc pas de d\u00e9signer le \u00ab meilleur outil IA pour cr\u00e9er une interface \u00bb car une telle r\u00e9ponse deviendrait rapidement obsol\u00e8te. Nous pr\u00e9f\u00e9rons apprendre \u00e0 choisir l\u2019outil en fonction de l\u2019\u00e9tape du projet et \u00e0 comparer plusieurs solutions \u00e0 partir d\u2019un m\u00eame besoin.<\/span><\/p>\r\n Cette d\u00e9marche permet \u00e9galement d\u2019\u00e9viter un biais fr\u00e9quent : consid\u00e9rer qu\u2019une g\u00e9n\u00e9ration est pertinente simplement parce qu\u2019elle est impressionnante ou qu\u2019elle provient de l\u2019outil le plus r\u00e9cent.<\/span><\/p>\r\n C\u2019est probablement le point le plus important de cette formation : une g\u00e9n\u00e9ration IA n\u2019est pas consid\u00e9r\u00e9e comme la fin du workflow.<\/span><\/p>\r\n Lorsque le format produit et l\u2019outil utilis\u00e9 le permettent, le r\u00e9sultat est repris dans Figma Design afin d\u2019analyser la structure des Frames et des calques, remettre en place les Auto Layout, identifier les \u00e9l\u00e9ments qui doivent devenir des composants, appliquer les styles et variables du design system et contr\u00f4ler responsive, accessibilit\u00e9 et coh\u00e9rence graphique.<\/span><\/p>\r\n Le designer doit \u00e9galement remplacer les contenus g\u00e9n\u00e9riques, arbitrer les choix UX et reprendre les d\u00e9cisions que l\u2019IA a effectu\u00e9es sans disposer de suffisamment de contexte.<\/span><\/p>\r\n Autrement dit, la formation ne cherche pas \u00e0 supprimer la conception manuelle. Elle travaille sur une autre r\u00e9partition du temps : g\u00e9n\u00e9rer plus rapidement certaines hypoth\u00e8ses pour consacrer davantage d\u2019attention \u00e0 leur s\u00e9lection, leur correction et leur structuration.<\/span><\/p>\r\n La ma\u00eetrise pr\u00e9alable de Figma reste donc indispensable. Si cette reprise du fichier constitue encore une difficult\u00e9, la formation Figma : gagner en efficacit\u00e9<\/a><\/span><\/span> est un meilleur point d\u2019entr\u00e9e.<\/span><\/p>\r\n Pour un UI ou Product Designer, Figma Make peut acc\u00e9l\u00e9rer l\u2019exploration d\u2019une piste, la cr\u00e9ation d\u2019un prototype testable ou la mat\u00e9rialisation d\u2019une variante.<\/span><\/p>\r\n Pour un UX Designer, l\u2019int\u00e9r\u00eat peut r\u00e9sider dans la possibilit\u00e9 de confronter rapidement plusieurs solutions \u00e0 un m\u00eame parcours.<\/span><\/p>\r\n Pour un Product Manager ou Product Owner, un prototype g\u00e9n\u00e9r\u00e9 peut rendre une hypoth\u00e8se plus concr\u00e8te avant d\u2019engager une production plus lourde.<\/span><\/p>\r\n Pour un directeur artistique digital, la g\u00e9n\u00e9ration peut permettre d\u2019explorer des structures ou directions avant de les reprendre avec davantage de pr\u00e9cision.<\/span><\/p>\r\n Enfin, certains profils hybrides design \/ produit \/ front-end peuvent utiliser ces outils pour rapprocher plus rapidement conception et comportement fonctionnel.<\/span><\/p>\r\n Dans tous les cas, le gain d\u00e9pend du projet. Sur une interface simple parfaitement cadr\u00e9e, g\u00e9n\u00e9rer puis r\u00e9parer un r\u00e9sultat moyen peut \u00eatre moins efficace que concevoir directement dans Figma. La formation apprend \u00e9galement \u00e0 identifier ces situations.<\/span><\/p>\r\n Les deux outils mobilisent l\u2019IA, mais la logique de travail n\u2019est pas la m\u00eame.<\/span><\/p>\r\n Figma Make est particuli\u00e8rement adapt\u00e9 lorsqu\u2019on part d\u2019une intention, d\u2019un brief ou d\u2019une maquette pour construire et faire \u00e9voluer un prototype fonctionnel.<\/span><\/p>\r\n L\u2019agent Figma intervient davantage dans l\u2019environnement Design : il peut travailler sur des \u00e9l\u00e9ments existants, utiliser les composants et variables et appliquer des instructions ou skills dans un syst\u00e8me d\u00e9j\u00e0 structur\u00e9.<\/span><\/p>\r\n Ces usages sont approfondis dans Figma Agent, skills et MCP : structurer un workflow de design agentique<\/a><\/span><\/span>.<\/span><\/p>\r\nStructurer, finaliser et reprendre en main une maquette g\u00e9n\u00e9r\u00e9e par l'IA<\/h3>\r\n
\r\n\t
\r\n\t
Parcours p\u00e9dagogique\u00a0: <\/strong><\/h4>\r\n
M\u00e9thode p\u00e9dagogique : <\/strong><\/h4>\r\n
Moyens techniques : <\/strong><\/h4>\r\n
\r\n\t
Parcours p\u00e9dagogique\u00a0:<\/h4>\r\n
M\u00e9thode p\u00e9dagogique :<\/h4>\r\n
Moyens techniques\u00a0:<\/h4>\r\n
\r\n\t
\r\n\t
\r\n\t
Commencer par le brief plut\u00f4t que par le prompt<\/strong><\/span><\/h2>\r\n
De la g\u00e9n\u00e9ration d\u2019interface au prototype fonctionnel<\/strong><\/span><\/h2>\r\n
Pourquoi comparer Figma Make avec Relume, Stitch ou UX Pilot ?<\/strong><\/span><\/h2>\r\n
\r\n\t
Le designer reprend la main dans Figma Design<\/strong><\/span><\/h2>\r\n
Pour qui la g\u00e9n\u00e9ration d\u2019interfaces par IA est-elle r\u00e9ellement utile ?<\/strong><\/span><\/h2>\r\n
Figma Make ou agent Figma ?<\/strong><\/span><\/h2>\r\n