Concevoir, structurer et prototyper des interfaces web ou applicatives dans Figma en mobilisant les principaux outils de mise en pages, les composants, l\u2019Auto Layout et les variables pour produire des maquettes coh\u00e9rentes, interactives et \u00e9volutives<\/p>","FOR_Obj":"
Cette formation s\u2019adresse aux professionnels qui souhaitent prendre en main Figma pour concevoir, structurer ou prototyper des interfaces num\u00e9riques :<\/p>\r\n
Elle convient aux personnes souhaitant acqu\u00e9rir une m\u00e9thode de travail compl\u00e8te dans Figma, depuis la cr\u00e9ation des premiers \u00e9crans jusqu\u2019au prototype interactif et au partage<\/p>","FOR_Prerequis":"
Aucune connaissance pr\u00e9alable de Figma n\u2019est n\u00e9cessaire. Une bonne culture web, produit ou interfaces num\u00e9riques est recommand\u00e9e. \u00catre \u00e0 l\u2019aise avec l\u2019utilisation courante d\u2019un ordinateur et d\u2019un navigateur<\/p>\r\n
En distanciel :
\r\n- Disposer d\u2019un compte Figma et d\u2019une connexion Internet stable
\r\n- Certaines fonctions d\u2019IA, biblioth\u00e8ques partag\u00e9es ou fonctions avanc\u00e9es peuvent d\u00e9pendre du forfait Figma et des droits accord\u00e9s dans l\u2019espace de travail<\/p>","FOR_Programme":"
-> Activit\u00e9 : analyser l\u2019organisation d\u2019un fichier Figma et manipuler ses principaux espaces de travail<\/em><\/strong><\/p>\r\n UI Designer avec plus de 10 ans d\u2019exp\u00e9rience en animation de formation. <\/span><\/p>","FOR_Ressources":" Quiz de positionnement \u276f\u00a0<\/span>2 jours pr\u00e9sentiels continus \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> 2 classes virtuelles discontinues (2 x 1 jour) \u276f <\/span><\/span>\u00c9valuation des acquis<\/span><\/p>\r\n Expositive + d\u00e9monstrative : expos\u00e9s th\u00e9oriques, d\u00e9monstrations, mise en pratique, travail individuel inter-sessions, feedbacks personnalis\u00e9s<\/span><\/p>\r\n \u00a0<\/p>\r\n \u2026\/\u2026<\/p>\r\n Prendre en main Figma ne consiste pas seulement \u00e0 retrouver les \u00e9quivalents des outils que l\u2019on conna\u00eet d\u00e9j\u00e0 dans Illustrator, Photoshop, Sketch ou Adobe XD (coup de vieux !). Le logiciel repose sur une logique de conception sp\u00e9cifique : Frames, Auto Layout, composants, propri\u00e9t\u00e9s, variants, variables et prototypage sont pens\u00e9s pour construire des interfaces qui peuvent \u00e9voluer plut\u00f4t que des \u00e9crans ind\u00e9pendants les uns des autres.<\/p>\r\n C\u2019est pr\u00e9cis\u00e9ment le cap que cette formation d'initiation \u00e0 Figma propose de franchir.<\/span><\/p>\r\n Lorsqu\u2019on d\u00e9bute sur Figma, il est tentant de dessiner une maquette comme on composerait un support graphique : positionner des \u00e9l\u00e9ments, ajuster visuellement les espacements puis dupliquer l\u2019\u00e9cran pour cr\u00e9er ses diff\u00e9rentes versions.<\/span><\/p>\r\n Cette m\u00e9thode fonctionne tant que le projet reste simple. Elle montre rapidement ses limites lorsqu\u2019un contenu change, qu\u2019une interface doit \u00eatre d\u00e9clin\u00e9e sur mobile et desktop ou qu\u2019un m\u00eame \u00e9l\u00e9ment appara\u00eet \u00e0 plusieurs endroits.<\/span><\/p>\r\n L\u2019Auto Layout permet de construire des blocs dont les dimensions et les espacements r\u00e9agissent au contenu. Les contraintes et Frames permettent d\u2019anticiper diff\u00e9rents formats d\u2019\u00e9cran. Les composants \u00e9vitent de recr\u00e9er plusieurs fois le m\u00eame bouton, champ ou \u00e9l\u00e9ment de navigation. Les variables introduisent une logique de valeurs r\u00e9utilisables et constituent une premi\u00e8re porte d\u2019entr\u00e9e vers les design tokens.<\/span><\/p>\r\n La formation associe ces notions d\u00e8s le d\u00e9part afin d\u2019acqu\u00e9rir de bonnes habitudes de production et de concevoir des interfaces web ou applicatives plus faciles \u00e0 modifier, d\u00e9cliner et partager.<\/span><\/p>\r\n Concevoir une interface responsive ne consiste pas \u00e0 fabriquer s\u00e9par\u00e9ment une maquette desktop, une maquette tablette et une maquette mobile.<\/span><\/p>\r\n L\u2019enjeu est d\u2019anticiper la mani\u00e8re dont une interface doit r\u00e9agir lorsque sa largeur change, lorsqu\u2019un texte s\u2019allonge ou lorsqu\u2019un \u00e9l\u00e9ment appara\u00eet ou dispara\u00eet.<\/span><\/p>\r\n Frames, grilles, contraintes et Auto Layout permettent progressivement de raisonner en comportements plut\u00f4t qu\u2019en dimensions fig\u00e9es. Cette comp\u00e9tence est utile pour les UI designers, mais \u00e9galement pour les graphistes et directeurs artistiques qui \u00e9tendent leur pratique au design d\u2019\u00e9cran, ou pour les professionnels du digital qui doivent modifier des interfaces existantes sans d\u00e9grader leur structure.<\/span><\/p>\r\n Pour ceux qui souhaitent \u00e9largir ensuite leur pratique au-del\u00e0 de Figma, notre offre de formations UX \/ UI \/ Web<\/a><\/span><\/span> permet de poursuivre vers la conception d\u2019interfaces, HTML\/CSS ou la cr\u00e9ation de sites.<\/span><\/p>\r\n Les composants sont l\u2019un des principaux changements de logique pour un nouvel utilisateur de Figma.<\/span><\/p>\r\n Un bouton, une card ou un champ de formulaire peut \u00eatre construit une seule fois puis utilis\u00e9 dans diff\u00e9rentes situations. Les propri\u00e9t\u00e9s permettent d\u2019en modifier certains contenus ou caract\u00e9ristiques, tandis que les variants regroupent diff\u00e9rentes versions ou diff\u00e9rents \u00e9tats.<\/span><\/p>\r\n L\u2019objectif de cette initiation n\u2019est pas de construire un design system complexe en deux jours. Il est de comprendre suffisamment t\u00f4t comment structurer les \u00e9l\u00e9ments r\u00e9currents d\u2019une interface et commencer \u00e0 constituer une biblioth\u00e8que coh\u00e9rente.<\/span><\/p>\r\n C\u2019est \u00e9galement pour cette raison que variables et design tokens sont abord\u00e9s d\u00e8s ce premier niveau : non pour entrer dans leur architecture avanc\u00e9e, mais pour comprendre comment un projet Figma peut progressivement passer d\u2019une logique de maquette \u00e0 une logique de syst\u00e8me.<\/span><\/p>\r\n Les utilisateurs qui ma\u00eetrisent d\u00e9j\u00e0 ces fondamentaux pourront approfondir cette approche avec la formation Figma : gagner en efficacit\u00e9<\/a><\/span><\/span>.<\/span><\/p>\r\n Une interface ne se juge pas uniquement \u00e9cran par \u00e9cran.<\/span><\/p>\r\n Le mode Prototype de Figma permet de relier les Frames, simuler une navigation, g\u00e9rer des overlays, tester diff\u00e9rents \u00e9tats et cr\u00e9er des transitions ou micro-interactions avec Smart Animate.<\/span><\/p>\r\n Cette \u00e9tape aide \u00e0 mat\u00e9rialiser un parcours avant son d\u00e9veloppement et facilite les \u00e9changes avec un client, un chef de projet, une \u00e9quipe produit ou des utilisateurs.<\/span><\/p>\r\n La formation apprend donc \u00e0 passer progressivement d\u2019une interface statique \u00e0 un prototype interactif suffisamment construit pour tester une logique de navigation et pr\u00e9senter les principaux comportements envisag\u00e9s.<\/span><\/p>\r\n Il ne s\u2019agit pas de produire une application fonctionnelle. Cette distinction devient importante avec l\u2019arriv\u00e9e de Figma Make, qui fait pr\u00e9cis\u00e9ment l\u2019objet d\u2019une formation d\u00e9di\u00e9e.<\/span><\/p>\r\n Figma int\u00e8gre d\u00e9sormais l\u2019IA \u00e0 plusieurs endroits de son environnement.<\/span><\/p>\r\n Les participants d\u00e9couvrent les fonctions susceptibles de les aider \u00e0 explorer, modifier ou organiser certains \u00e9l\u00e9ments, ainsi que les territoires respectifs de l\u2019agent Figma, de Figma Motion et de Figma Make. L\u2019objectif est de savoir ce qui existe et \u00e0 quel moment ces fonctions peuvent devenir utiles, sans empi\u00e9ter sur l\u2019apprentissage des m\u00e9canismes fondamentaux de Figma.<\/span><\/p>\r\n Pour aller plus loin, la formation Figma Make et IA : concevoir des interfaces et prototypes fonctionnels<\/a><\/span><\/span> est consacr\u00e9e \u00e0 la g\u00e9n\u00e9ration et au prototypage fonctionnel assist\u00e9s par IA. Les workflows agentiques avanc\u00e9s sont trait\u00e9s s\u00e9par\u00e9ment dans Figma Agent, skills et MCP : structurer un workflow de design agentique<\/a><\/span><\/span>.<\/span><\/p>\r\n Cette formation peut correspondre \u00e0 des situations assez diff\u00e9rentes.<\/span><\/p>\r\n Un graphiste ou un directeur artistique peut vouloir passer plus facilement du print ou de la communication visuelle au design d\u2019interface.<\/span><\/p>\r\n Un UX designer peut avoir besoin de mat\u00e9rialiser plus pr\u00e9cis\u00e9ment ses wireframes et parcours.<\/span><\/p>\r\n Un UI ou Product Designer peut d\u00e9j\u00e0 conna\u00eetre les principes du design num\u00e9rique mais devoir apprendre Figma pour rejoindre une nouvelle \u00e9quipe.<\/span><\/p>\r\n Un Product Owner, Product Manager ou chef de projet digital peut chercher davantage d\u2019autonomie pour consulter, adapter ou prototyper des interfaces et mieux collaborer avec les designers.<\/span><\/p>\r\n Dans tous ces cas, l\u2019objectif n\u2019est pas de transformer les participants en UX\/UI designers en deux jours. Il est de leur donner une ma\u00eetrise op\u00e9rationnelle de Figma adapt\u00e9e \u00e0 leur m\u00e9tier et \u00e0 la place qu\u2019ils occupent dans un projet num\u00e9rique.<\/span><\/p>\r\n Notre entretien avec K\u00e9vin Mercier sur Figma, Webflow et les design systems<\/a><\/span><\/span> permet \u00e9galement de replacer ces comp\u00e9tences dans des workflows r\u00e9els de designers, d\u00e9veloppeurs et \u00e9quipes produit.<\/span><\/p>\r\nConcevoir des \u00e9crans structur\u00e9s et responsive avec les outils de mise en page de Figma<\/h3>\r\n
\r\n\t
\r\n<\/em><\/div>\r\nConstruire et r\u00e9utiliser des composants, propri\u00e9t\u00e9s, variants et variables<\/h3>\r\n
\r\n\t
R\u00e9aliser un prototype interactif et cr\u00e9er des micro-interactions<\/h3>\r\n
\r\n\t
Partager une maquette, collaborer et d\u00e9couvrir les principaux leviers d'optimisation du workflow avec les biblioth\u00e8ques et l'IA int\u00e9gr\u00e9e.<\/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
Concevoir une interface plut\u00f4t qu\u2019une succession d\u2019\u00e9crans<\/span><\/strong><\/h2>\r\n
Apprendre Figma pour le responsive design<\/span><\/strong><\/h2>\r\n
Cr\u00e9er des composants r\u00e9utilisables sans construire une usine \u00e0 gaz<\/span><\/strong><\/h2>\r\n
Passer de la maquette au prototype interactif<\/span><\/strong><\/h2>\r\n
Quelle place l\u2019intelligence artificielle occupe-t-elle dans cette formation Figma ?<\/span><\/strong><\/h2>\r\n
Pour quels usages professionnels se former \u00e0 Figma ?<\/span><\/strong><\/h2>\r\n
Figma en intra : homog\u00e9n\u00e9iser les pratiques d\u2019une \u00e9quipe<\/span><\/strong><\/h2>\r\n