{"id":17159,"date":"2026-09-23T16:00:00","date_gmt":"2026-09-23T16:00:00","guid":{"rendered":"https:\/\/www.agence-exoa.com\/?p=17159"},"modified":"2026-08-04T13:51:35","modified_gmt":"2026-08-04T13:51:35","slug":"brief-prototype-process-figma-5-etapes","status":"publish","type":"post","link":"https:\/\/www.agence-exoa.com\/en\/brief-prototype-process-figma-5-etapes\/","title":{"rendered":"Du brief au prototype : notre process Figma en 5 \u00e9tapes"},"content":{"rendered":"<p><script type=\"application\/ld+json\">{\"@context\": \"https:\/\/schema.org\", \"@type\": \"BlogPosting\", \"headline\": \"Du brief au prototype : notre process Figma en 5 \u00e9tapes\", \"description\": \"Process Figma : les 5 \u00e9tapes de notre agence, du brief client au prototype cliquable pr\u00eat pour l\u2019int\u00e9gration Webflow. D\u00e9lais, livrables et validations.\", \"datePublished\": \"2026-09-23\", \"dateModified\": \"2026-09-23\", \"author\": {\"@type\": \"Organization\", \"name\": \"\u00c9quipe Exoa\", \"url\": \"https:\/\/www.agence-exoa.com\"}, \"publisher\": {\"@type\": \"Organization\", \"name\": \"Exoa\", \"logo\": {\"@type\": \"ImageObject\", \"url\": \"https:\/\/www.agence-exoa.com\/wp-content\/uploads\/2026\/03\/logo-exoa-noir-2-1.svg\"}}, \"mainEntityOfPage\": {\"@type\": \"WebPage\", \"@id\": \"https:\/\/www.agence-exoa.com\/brief-prototype-process-figma-5-etapes\/\"}, \"keywords\": \"process Figma, prototype, brief cr\u00e9atif, webdesign, workflow agence\"}<\/script><br \/>\n<script type=\"application\/ld+json\">{\"@context\": \"https:\/\/schema.org\", \"@type\": \"FAQPage\", \"mainEntity\": [{\"@type\": \"Question\", \"name\": \"Combien de temps dure ce process complet ?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"Pour un site vitrine de cinq \u00e0 dix pages, comptez trois \u00e0 cinq semaines du brief au prototype valid\u00e9, allers-retours compris. Les projets e-commerce ou les refontes complexes demandent davantage. Le facteur le plus d\u00e9terminant n\u2019est pas la production graphique mais la r\u00e9activit\u00e9 des validations \u00e0 chaque \u00e9tape.\"}}, {\"@type\": \"Question\", \"name\": \"Que doit contenir un bon brief de site web ?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"L\u2019essentiel tient en une page : objectifs business du site, cibles prioritaires, actions attendues des visiteurs, contraintes de marque, exemples de sites appr\u00e9ci\u00e9s et d\u00e9test\u00e9s, contenus disponibles. Un bon brief dit pourquoi le site existe \u2014 le comment rel\u00e8ve justement du process de design qui suit.\"}}, {\"@type\": \"Question\", \"name\": \"Le client peut-il demander des modifications apr\u00e8s validation d\u2019une \u00e9tape ?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"Oui, mais chaque validation constitue un jalon : revenir sur une \u00e9tape valid\u00e9e relance le travail en aval et fait l\u2019objet d\u2019un chiffrage. Ce cadre n\u2019est pas une rigidit\u00e9 commerciale \u2014 c\u2019est lui qui prot\u00e8ge le planning et le budget du projet, et il incite chacun \u00e0 valider s\u00e9rieusement plut\u00f4t que par politesse.\"}}, {\"@type\": \"Question\", \"name\": \"Pourquoi passer par un moodboard plut\u00f4t que directement aux maquettes ?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"Parce que le moodboard permet de d\u00e9battre de la direction artistique \u2014 ambiance, couleurs, typographies \u2014 avant d\u2019avoir investi des jours dans des maquettes. Corriger une direction sur un moodboard co\u00fbte une heure ; sur des maquettes finalis\u00e9es, une semaine. C\u2019est l\u2019\u00e9tape la moins co\u00fbteuse et la plus structurante du process.\"}}, {\"@type\": \"Question\", \"name\": \"Comment le prototype Figma devient-il un site Webflow ?\", \"acceptedAnswer\": {\"@type\": \"Answer\", \"text\": \"Le prototype valid\u00e9 sert de r\u00e9f\u00e9rence exacte : structure, styles, espacements et interactions sont reproduits dans Webflow, dont la logique de classes \u00e9pouse bien les composants Figma. Certains \u00e9l\u00e9ments s\u2019importent directement, le reste s\u2019int\u00e8gre manuellement avec le mode d\u00e9veloppeur de Figma en appui. Le site final est conforme \u00e0 la maquette, au pixel pr\u00e8s ou presque.\"}}]}<\/script><\/p>\n<p>Un beau site ne na\u00eet pas d\u2019un coup de g\u00e9nie sur un coin d\u2019\u00e9cran : il sort d\u2019un process. Le n\u00f4tre tient en cinq \u00e9tapes, toutes men\u00e9es dans Figma, du premier brief au prototype cliquable que le client valide avant qu\u2019une seule ligne de code ne soit \u00e9crite. Nous l\u2019avons rod\u00e9 sur des dizaines de projets \u2014 sites vitrines, e-commerce, refontes \u2014 et il a une vertu cardinale : chacun sait toujours o\u00f9 en est le projet, ce qui est valid\u00e9 et ce qui reste \u00e0 d\u00e9cider. Le voici en d\u00e9tail, avec les livrables, les d\u00e9lais indicatifs et les pi\u00e8ges de chaque \u00e9tape. Si vous vous demandez ce qui se passe entre \u00ab voici notre brief \u00bb et \u00ab voici votre site \u00bb, la r\u00e9ponse est exactement ceci.<\/p>\n<h2>\u00c9tape 1 \u2014 Le brief et le cadrage<\/h2>\n<p>Tout commence par une conversation structur\u00e9e : objectifs du site, cibles, actions attendues des visiteurs, contraintes de marque, contenus existants. Nous en tirons un document de cadrage d\u2019une page \u2014 le contrat de d\u00e9part du design. Cette \u00e9tape filtre les malentendus les plus co\u00fbteux : un d\u00e9saccord sur les priorit\u00e9s d\u00e9tect\u00e9 ici co\u00fbte une r\u00e9union ; d\u00e9couvert aux maquettes, il co\u00fbte des semaines. Dur\u00e9e : deux \u00e0 quatre jours, atelier compris.<\/p>\n<h2>\u00c9tape 2 \u2014 L\u2019architecture et les wireframes<\/h2>\n<p>Dans Figma, nous posons l\u2019arborescence puis les wireframes des pages cl\u00e9s : des \u00e9crans en niveaux de gris, sans aucun choix esth\u00e9tique. On y d\u00e9cide la hi\u00e9rarchie des messages, l\u2019emplacement des appels \u00e0 l\u2019action, le parcours de navigation. Le client valide la structure sans \u00eatre distrait par les couleurs \u2014 c\u2019est tout l\u2019int\u00e9r\u00eat du wireframe, et la raison pour laquelle nous refusons de sauter cette \u00e9tape, m\u00eame sur les petits projets. Dur\u00e9e : trois \u00e0 cinq jours.<\/p>\n<h2>\u00c9tape 3 \u2014 La direction artistique<\/h2>\n<p>Avant de maquetter, nous fixons l\u2019univers visuel : un moodboard (ambiances, palettes, typographies, r\u00e9f\u00e9rences assum\u00e9es) puis un mini UI kit \u2014 boutons, titres, cartes \u2014 appliqu\u00e9 \u00e0 une seule page t\u00e9moin. Le client choisit une direction sur pi\u00e8ces, pas sur des adjectifs. Cette \u00e9tape courte \u00e9vite le syndrome du \u00ab j\u2019imaginais autre chose \u00bb qui ruine les plannings. Dur\u00e9e : deux \u00e0 quatre jours.<\/p>\n<h2>\u00c9tape 4 \u2014 Les maquettes haute fid\u00e9lit\u00e9<\/h2>\n<p>La direction valid\u00e9e se d\u00e9ploie sur toutes les pages, en version desktop et mobile, avec les vrais contenus chaque fois que possible. Nous construisons en composants Figma : un bouton corrig\u00e9 se corrige partout, et le futur design system du site na\u00eet ici. Les commentaires du client s\u2019\u00e9pinglent directement sur les maquettes, ce qui remplace les \u00e9changes de captures d\u2019\u00e9cran annot\u00e9es. Dur\u00e9e : une \u00e0 deux semaines selon le nombre de gabarits.<\/p>\n<h2>\u00c9tape 5 \u2014 Le prototype cliquable et le handoff<\/h2>\n<p>Les maquettes reli\u00e9es deviennent un prototype navigable : menus fonctionnels, encha\u00eenements r\u00e9els, interactions cl\u00e9s simul\u00e9es. Le client teste le site \u00ab comme s\u2019il y \u00e9tait \u00bb et donne sa validation finale en connaissance de cause. Puis vient le handoff : gr\u00e2ce au mode d\u00e9veloppeur de Figma, les int\u00e9grateurs r\u00e9cup\u00e8rent styles, espacements et exports sans interpr\u00e9tation. Chez nous, cette \u00e9tape alimente le plus souvent une int\u00e9gration <a href=\"https:\/\/www.agence-exoa.com\/agence-webflow\/\">Webflow<\/a>, dont la logique de classes se marie naturellement avec les composants Figma \u2014 le prototype devient un site en ligne avec une fid\u00e9lit\u00e9 remarquable.<\/p>\n<h2>Le process en un tableau<\/h2>\n<table style=\"width:100%;border-collapse:collapse\">\n<thead>\n<tr>\n<th style=\"border:1px solid #ddd;padding:10px;text-align:left;background:#f5f5f5\">\u00c9tape<\/th>\n<th style=\"border:1px solid #ddd;padding:10px;text-align:left;background:#f5f5f5\">Livrable<\/th>\n<th style=\"border:1px solid #ddd;padding:10px;text-align:left;background:#f5f5f5\">Dur\u00e9e indicative<\/th>\n<th style=\"border:1px solid #ddd;padding:10px;text-align:left;background:#f5f5f5\">Validation client<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"border:1px solid #ddd;padding:10px;text-align:left\">1. Brief et cadrage<\/td>\n<td style=\"border:1px solid #ddd;padding:10px;text-align:left\">Document de cadrage<\/td>\n<td style=\"border:1px solid #ddd;padding:10px;text-align:left\">2 \u00e0 4 jours<\/td>\n<td style=\"border:1px solid #ddd;padding:10px;text-align:left\">Objectifs et p\u00e9rim\u00e8tre<\/td>\n<\/tr>\n<tr>\n<td style=\"border:1px solid #ddd;padding:10px;text-align:left\">2. Wireframes<\/td>\n<td style=\"border:1px solid #ddd;padding:10px;text-align:left\">Squelettes des pages cl\u00e9s<\/td>\n<td style=\"border:1px solid #ddd;padding:10px;text-align:left\">3 \u00e0 5 jours<\/td>\n<td style=\"border:1px solid #ddd;padding:10px;text-align:left\">Structure et parcours<\/td>\n<\/tr>\n<tr>\n<td style=\"border:1px solid #ddd;padding:10px;text-align:left\">3. Direction artistique<\/td>\n<td style=\"border:1px solid #ddd;padding:10px;text-align:left\">Moodboard + page t\u00e9moin<\/td>\n<td style=\"border:1px solid #ddd;padding:10px;text-align:left\">2 \u00e0 4 jours<\/td>\n<td style=\"border:1px solid #ddd;padding:10px;text-align:left\">Univers visuel<\/td>\n<\/tr>\n<tr>\n<td style=\"border:1px solid #ddd;padding:10px;text-align:left\">4. Maquettes haute fid\u00e9lit\u00e9<\/td>\n<td style=\"border:1px solid #ddd;padding:10px;text-align:left\">Pages desktop et mobile<\/td>\n<td style=\"border:1px solid #ddd;padding:10px;text-align:left\">1 \u00e0 2 semaines<\/td>\n<td style=\"border:1px solid #ddd;padding:10px;text-align:left\">Design final<\/td>\n<\/tr>\n<tr>\n<td style=\"border:1px solid #ddd;padding:10px;text-align:left\">5. Prototype et handoff<\/td>\n<td style=\"border:1px solid #ddd;padding:10px;text-align:left\">Prototype cliquable + specs<\/td>\n<td style=\"border:1px solid #ddd;padding:10px;text-align:left\">2 \u00e0 3 jours<\/td>\n<td style=\"border:1px solid #ddd;padding:10px;text-align:left\">Validation avant d\u00e9veloppement<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>Pourquoi ce process tient la route<\/h2>\n<p>Sa force n\u2019est pas dans les outils mais dans l\u2019ordre des d\u00e9cisions : structure, puis style, puis d\u00e9tail. Chaque \u00e9tape verrouille un acquis avant d\u2019ouvrir le chantier suivant, et chaque validation engage \u2014 revenir en arri\u00e8re reste possible, mais se chiffre. R\u00e9sultat : pas de maquettes redessin\u00e9es trois fois, pas de d\u00e9veloppement commenc\u00e9 sur des bases mouvantes, et un client qui d\u00e9couvre son site en le reconnaissant, puisqu\u2019il en a valid\u00e9 chaque couche. Nous avons d\u00e9taill\u00e9 les raisons de fond dans notre article sur <a href=\"https:\/\/www.agence-exoa.com\/figma-maquette-site-avant-code\/\">le maquettage avant la premi\u00e8re ligne de code<\/a> ; ce process en est simplement la version op\u00e9rationnelle, telle que nous la d\u00e9roulons semaine apr\u00e8s semaine.<\/p>\n<h2 id=\"faq\">FAQ \u2014 vos questions fr\u00e9quentes<\/h2>\n<p><strong>Q. Combien de temps dure ce process complet ?<\/strong><br \/>R. Pour un site vitrine de cinq \u00e0 dix pages, comptez trois \u00e0 cinq semaines du brief au prototype valid\u00e9, allers-retours compris. Les projets e-commerce ou les refontes complexes demandent davantage. Le facteur le plus d\u00e9terminant n\u2019est pas la production graphique mais la r\u00e9activit\u00e9 des validations \u00e0 chaque \u00e9tape.<\/p>\n<p><strong>Q. Que doit contenir un bon brief de site web ?<\/strong><br \/>R. L\u2019essentiel tient en une page : objectifs business du site, cibles prioritaires, actions attendues des visiteurs, contraintes de marque, exemples de sites appr\u00e9ci\u00e9s et d\u00e9test\u00e9s, contenus disponibles. Un bon brief dit pourquoi le site existe \u2014 le comment rel\u00e8ve justement du process de design qui suit.<\/p>\n<p><strong>Q. Le client peut-il demander des modifications apr\u00e8s validation d\u2019une \u00e9tape ?<\/strong><br \/>R. Oui, mais chaque validation constitue un jalon : revenir sur une \u00e9tape valid\u00e9e relance le travail en aval et fait l\u2019objet d\u2019un chiffrage. Ce cadre n\u2019est pas une rigidit\u00e9 commerciale \u2014 c\u2019est lui qui prot\u00e8ge le planning et le budget du projet, et il incite chacun \u00e0 valider s\u00e9rieusement plut\u00f4t que par politesse.<\/p>\n<p><strong>Q. Pourquoi passer par un moodboard plut\u00f4t que directement aux maquettes ?<\/strong><br \/>R. Parce que le moodboard permet de d\u00e9battre de la direction artistique \u2014 ambiance, couleurs, typographies \u2014 avant d\u2019avoir investi des jours dans des maquettes. Corriger une direction sur un moodboard co\u00fbte une heure ; sur des maquettes finalis\u00e9es, une semaine. C\u2019est l\u2019\u00e9tape la moins co\u00fbteuse et la plus structurante du process.<\/p>\n<p><strong>Q. Comment le prototype Figma devient-il un site Webflow ?<\/strong><br \/>R. Le prototype valid\u00e9 sert de r\u00e9f\u00e9rence exacte : structure, styles, espacements et interactions sont reproduits dans Webflow, dont la logique de classes \u00e9pouse bien les composants Figma. Certains \u00e9l\u00e9ments s\u2019importent directement, le reste s\u2019int\u00e8gre manuellement avec le mode d\u00e9veloppeur de Figma en appui. Le site final est conforme \u00e0 la maquette, au pixel pr\u00e8s ou presque.<\/p>\n<h2>Conclusion<\/h2>\n<p>Cinq \u00e9tapes, des livrables clairs, des validations qui verrouillent chaque acquis : ce process Figma est la colonne vert\u00e9brale de tous nos projets de design. Il n\u2019a rien de secret \u2014 sa valeur tient \u00e0 la discipline de son ex\u00e9cution. Notre <a href=\"https:\/\/www.agence-exoa.com\/partenaires-outils\/figma\/\">fiche outil Figma<\/a> vous donnera les cl\u00e9s de l\u2019outil, et si votre projet appelle une int\u00e9gration rapide et fid\u00e8le, notre <a href=\"https:\/\/www.agence-exoa.com\/agence-webflow\/\">agence Webflow<\/a> transforme le prototype valid\u00e9 en site en ligne.<\/p>\n<p><em>Sources : Figma (figma.com, help.figma.com), Webflow (webflow.com), Nielsen Norman Group.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Process Figma : les 5 \u00e9tapes de notre agence, du brief client au prototype cliquable pr\u00eat pour l\u2019int\u00e9gration Webflow. D\u00e9lais, livrables et validations.<\/p>","protected":false},"author":4,"featured_media":17129,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"_sitemap_exclude":false,"_sitemap_priority":"","_sitemap_frequency":"","rank_math_title":"Process Figma : du brief au prototype en 5 \u00e9tapes | Exoa","rank_math_description":"Process Figma : les 5 \u00e9tapes de notre agence, du brief client au prototype cliquable pr\u00eat pour l\u2019int\u00e9gration Webflow. D\u00e9lais, livrables et validations.","rank_math_focus_keyword":"process Figma","rank_math_canonical_url":"","rank_math_facebook_title":"","rank_math_facebook_description":"","rank_math_twitter_title":"","rank_math_twitter_description":"","rank_math_robots":["index"],"rank_math_advanced_robots":[],"footnotes":""},"categories":[180],"tags":[393,417,418],"class_list":["post-17159","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-ux-ui-design","tag-figma","tag-prototype","tag-workflow-design"],"_yoast_wpseo_focuskw":null,"_yoast_wpseo_metadesc":null,"jetpack_featured_media_url":"https:\/\/www.agence-exoa.com\/wp-content\/uploads\/2026\/08\/img-brief-prototype-process-figma-5-etapes.jpg","_links":{"self":[{"href":"https:\/\/www.agence-exoa.com\/en\/wp-json\/wp\/v2\/posts\/17159","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.agence-exoa.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.agence-exoa.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.agence-exoa.com\/en\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.agence-exoa.com\/en\/wp-json\/wp\/v2\/comments?post=17159"}],"version-history":[{"count":1,"href":"https:\/\/www.agence-exoa.com\/en\/wp-json\/wp\/v2\/posts\/17159\/revisions"}],"predecessor-version":[{"id":17160,"href":"https:\/\/www.agence-exoa.com\/en\/wp-json\/wp\/v2\/posts\/17159\/revisions\/17160"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.agence-exoa.com\/en\/wp-json\/wp\/v2\/media\/17129"}],"wp:attachment":[{"href":"https:\/\/www.agence-exoa.com\/en\/wp-json\/wp\/v2\/media?parent=17159"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.agence-exoa.com\/en\/wp-json\/wp\/v2\/categories?post=17159"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.agence-exoa.com\/en\/wp-json\/wp\/v2\/tags?post=17159"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}