{"id":1125,"date":"2025-11-03T11:10:34","date_gmt":"2025-11-03T10:10:34","guid":{"rendered":"https:\/\/mnugier.fr\/?page_id=1125"},"modified":"2025-11-03T11:10:34","modified_gmt":"2025-11-03T10:10:34","slug":"%f0%9f%9a%80-flux-de-travail-complet-dans-figma","status":"publish","type":"page","link":"https:\/\/mnugier.fr\/?page_id=1125","title":{"rendered":"\ud83d\ude80 Flux de travail complet dans Figma"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\">\ud83e\udde0 <strong>1. Commence dans FigJam \u2014 Id\u00e9e et plan<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Lance un <strong>nouveau tableau FigJam<\/strong>.<\/li>\n\n\n\n<li><strong>Brainstorme<\/strong> les id\u00e9es principales du projet.<\/li>\n\n\n\n<li><strong>Cr\u00e9e<\/strong> des <strong>personas<\/strong>, des <strong>user flows<\/strong> et des <strong>cartes d\u2019empathie<\/strong>.<\/li>\n\n\n\n<li><strong>Organise<\/strong> les priorit\u00e9s et les fonctionnalit\u00e9s du futur site ou produit.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83e\ude84 <em>Exemple : d\u00e9finis le parcours \u201cVisiteur \u2192 Page d\u2019accueil \u2192 Produit \u2192 Achat\u201d.<\/em><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83c\udfa8 <strong>2. Passe \u00e0 Design \u2014 Cr\u00e9e la maquette et le prototype<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Ouvre<\/strong> un nouveau fichier <strong>Figma Design<\/strong>.<\/li>\n\n\n\n<li><strong>Esquisse<\/strong> des <strong>wireframes<\/strong> simples pour chaque page.<\/li>\n\n\n\n<li><strong>Applique<\/strong> ensuite les <strong>couleurs, polices et composants<\/strong> du design system.<\/li>\n\n\n\n<li><strong>Construit<\/strong> des <strong>prototypes interactifs<\/strong> (liens entre les \u00e9crans, transitions).<\/li>\n\n\n\n<li><strong>Teste<\/strong> la navigation comme si le site \u00e9tait r\u00e9el.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83e\ude84 <em>Exemple : con\u00e7ois la page d\u2019accueil, la fiche produit et le formulaire de contact.<\/em><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\u2699\ufe0f <strong>3. Utilise Make \u2014 Automatise et acc\u00e9l\u00e8re la cr\u00e9ation<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Active<\/strong> les outils d\u2019IA ou d\u2019automatisation.<\/li>\n\n\n\n<li><strong>G\u00e9n\u00e8re<\/strong> des variantes de ton design ou du contenu fictif.<\/li>\n\n\n\n<li><strong>Simplifie<\/strong> les t\u00e2ches r\u00e9p\u00e9titives (duplication, mise en page, etc.).<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83e\ude84 <em>Exemple : g\u00e9n\u00e8re trois versions diff\u00e9rentes de la page produit pour comparer les styles.<\/em><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udce3 <strong>4. Active Buzz \u2014 Communique et partage les avanc\u00e9es<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Publie<\/strong> des <strong>annonces d\u2019\u00e9quipe<\/strong> (nouvelle version, correctifs, etc.).<\/li>\n\n\n\n<li><strong>Partage<\/strong> les <strong>progr\u00e8s du projet<\/strong> directement dans Figma.<\/li>\n\n\n\n<li><strong>Collecte<\/strong> les <strong>retours<\/strong> de l\u2019\u00e9quipe ou du client.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83e\ude84 <em>Exemple : poste une mise \u00e0 jour \u201cPrototype mobile pr\u00eat pour test \u2705\u201d.<\/em><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\uddbc\ufe0f <strong>5. Cr\u00e9e dans Slides \u2014 Pr\u00e9sente le projet<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Ouvre<\/strong> un fichier <strong>Figma Slides<\/strong>.<\/li>\n\n\n\n<li><strong>Int\u00e8gre<\/strong> les maquettes et prototypes directement depuis Figma Design.<\/li>\n\n\n\n<li><strong>Ajoute<\/strong> des <strong>commentaires, animations et notes<\/strong>.<\/li>\n\n\n\n<li><strong>Pr\u00e9sente<\/strong> ton travail \u00e0 ton \u00e9quipe, ton client ou ton enseignant.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83e\ude84 <em>Exemple : pr\u00e9sente le design du nouveau site avec les parcours utilisateurs.<\/em><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83c\udf10 <strong>6. Termine avec Sites \u2014 Publie en ligne<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Transforme<\/strong> ton design ou ta pr\u00e9sentation en <strong>page web<\/strong>.<\/li>\n\n\n\n<li><strong>Personnalise<\/strong> le titre, le lien et le style.<\/li>\n\n\n\n<li><strong>Publie<\/strong> et <strong>partage<\/strong> l\u2019URL pour permettre \u00e0 d\u2019autres de le consulter.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83e\ude84 <em>Exemple : publie la maquette de ton site comme une mini-page web consultable.<\/em><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83e\udded <strong>R\u00e9sum\u00e9 du flux de travail (en mode action)<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u00c9tape<\/th><th>Outil<\/th><th>Action principale<\/th><\/tr><\/thead><tbody><tr><td>1\ufe0f\u20e3 Id\u00e9ation<\/td><td><strong>FigJam<\/strong><\/td><td>Brainstorme et planifie<\/td><\/tr><tr><td>2\ufe0f\u20e3 Design<\/td><td><strong>Design<\/strong><\/td><td>Cr\u00e9e et prototype<\/td><\/tr><tr><td>3\ufe0f\u20e3 Automatisation<\/td><td><strong>Make<\/strong><\/td><td>G\u00e9n\u00e8re et acc\u00e9l\u00e8re<\/td><\/tr><tr><td>4\ufe0f\u20e3 Communication<\/td><td><strong>Buzz<\/strong><\/td><td>Informe et collabore<\/td><\/tr><tr><td>5\ufe0f\u20e3 Pr\u00e9sentation<\/td><td><strong>Slides<\/strong><\/td><td>Montre et explique<\/td><\/tr><tr><td>6\ufe0f\u20e3 Publication<\/td><td><strong>Sites<\/strong><\/td><td>Publie et partage<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>\ud83e\udde0 1. Commence dans FigJam \u2014 Id\u00e9e et plan \ud83e\ude84 Exemple : d\u00e9finis le parcours \u201cVisiteur \u2192 Page d\u2019accueil \u2192 Produit \u2192 Achat\u201d. \ud83c\udfa8 2. Passe \u00e0 Design \u2014 Cr\u00e9e la maquette et le prototype \ud83e\ude84 Exemple : con\u00e7ois la page d\u2019accueil, la fiche produit et le formulaire de contact. \u2699\ufe0f 3. Utilise Make \u2014 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1125","page","type-page","status-publish","hentry","wpbf-post"],"_links":{"self":[{"href":"https:\/\/mnugier.fr\/index.php?rest_route=\/wp\/v2\/pages\/1125","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mnugier.fr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mnugier.fr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mnugier.fr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mnugier.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1125"}],"version-history":[{"count":1,"href":"https:\/\/mnugier.fr\/index.php?rest_route=\/wp\/v2\/pages\/1125\/revisions"}],"predecessor-version":[{"id":1126,"href":"https:\/\/mnugier.fr\/index.php?rest_route=\/wp\/v2\/pages\/1125\/revisions\/1126"}],"wp:attachment":[{"href":"https:\/\/mnugier.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1125"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}