Un beau site ne naît pas d’un coup de génie sur un coin d’écran : il sort d’un process. Le nôtre tient en cinq étapes, toutes menées dans Figma, du premier brief au prototype cliquable que le client valide avant qu’une seule ligne de code ne soit écrite. Nous l’avons rodé sur des dizaines de projets — sites vitrines, e-commerce, refontes — et il a une vertu cardinale : chacun sait toujours où en est le projet, ce qui est validé et ce qui reste à décider. Le voici en détail, avec les livrables, les délais indicatifs et les pièges de chaque étape. Si vous vous demandez ce qui se passe entre « voici notre brief » et « voici votre site », la réponse est exactement ceci.
Étape 1 — Le brief et le cadrage
Tout commence par une conversation structurée : objectifs du site, cibles, actions attendues des visiteurs, contraintes de marque, contenus existants. Nous en tirons un document de cadrage d’une page — le contrat de départ du design. Cette étape filtre les malentendus les plus coûteux : un désaccord sur les priorités détecté ici coûte une réunion ; découvert aux maquettes, il coûte des semaines. Durée : deux à quatre jours, atelier compris.
Étape 2 — L’architecture et les wireframes
Dans Figma, nous posons l’arborescence puis les wireframes des pages clés : des écrans en niveaux de gris, sans aucun choix esthétique. On y décide la hiérarchie des messages, l’emplacement des appels à l’action, le parcours de navigation. Le client valide la structure sans être distrait par les couleurs — c’est tout l’intérêt du wireframe, et la raison pour laquelle nous refusons de sauter cette étape, même sur les petits projets. Durée : trois à cinq jours.
Étape 3 — La direction artistique
Avant de maquetter, nous fixons l’univers visuel : un moodboard (ambiances, palettes, typographies, références assumées) puis un mini UI kit — boutons, titres, cartes — appliqué à une seule page témoin. Le client choisit une direction sur pièces, pas sur des adjectifs. Cette étape courte évite le syndrome du « j’imaginais autre chose » qui ruine les plannings. Durée : deux à quatre jours.
Étape 4 — Les maquettes haute fidélité
La direction validée se déploie 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é se corrige partout, et le futur design system du site naît ici. Les commentaires du client s’épinglent directement sur les maquettes, ce qui remplace les échanges de captures d’écran annotées. Durée : une à deux semaines selon le nombre de gabarits.
Étape 5 — Le prototype cliquable et le handoff
Les maquettes reliées deviennent un prototype navigable : menus fonctionnels, enchaînements réels, interactions clés simulées. Le client teste le site « comme s’il y était » et donne sa validation finale en connaissance de cause. Puis vient le handoff : grâce au mode développeur de Figma, les intégrateurs récupèrent styles, espacements et exports sans interprétation. Chez nous, cette étape alimente le plus souvent une intégration Webflow, dont la logique de classes se marie naturellement avec les composants Figma — le prototype devient un site en ligne avec une fidélité remarquable.
Le process en un tableau
| Étape | Deliverable | Durée indicative | Validation client |
|---|---|---|---|
| 1. Brief et cadrage | Document de cadrage | 2 à 4 jours | Objectifs et périmètre |
| 2. Wireframes | Squelettes des pages clés | 3 à 5 jours | Structure et parcours |
| 3. Direction artistique | Moodboard + page témoin | 2 à 4 jours | Univers visuel |
| 4. Maquettes haute fidélité | Pages desktop et mobile | 1 à 2 semaines | Design final |
| 5. Prototype et handoff | Prototype cliquable + specs | 2 à 3 jours | Validation avant développement |
Pourquoi ce process tient la route
Sa force n’est pas dans les outils mais dans l’ordre des décisions : structure, puis style, puis détail. Chaque étape verrouille un acquis avant d’ouvrir le chantier suivant, et chaque validation engage — revenir en arrière reste possible, mais se chiffre. Résultat : pas de maquettes redessinées trois fois, pas de développement commencé sur des bases mouvantes, et un client qui découvre son site en le reconnaissant, puisqu’il en a validé chaque couche. Nous avons détaillé les raisons de fond dans notre article sur le maquettage avant la première ligne de code ; ce process en est simplement la version opérationnelle, telle que nous la déroulons semaine après semaine.
FAQ — vos questions fréquentes
Q. Combien de temps dure ce process complet ?
R. Pour un site vitrine de cinq à dix pages, comptez trois à cinq semaines du brief au prototype validé, allers-retours compris. Les projets e-commerce ou les refontes complexes demandent davantage. Le facteur le plus déterminant n’est pas la production graphique mais la réactivité des validations à chaque étape.
Q. Que doit contenir un bon brief de site web ?
R. L’essentiel tient en une page : objectifs business du site, cibles prioritaires, actions attendues des visiteurs, contraintes de marque, exemples de sites appréciés et détestés, contenus disponibles. Un bon brief dit pourquoi le site existe — le comment relève justement du process de design qui suit.
Q. Le client peut-il demander des modifications après validation d’une étape ?
R. Oui, mais chaque validation constitue un jalon : revenir sur une étape validée relance le travail en aval et fait l’objet d’un chiffrage. Ce cadre n’est pas une rigidité commerciale — c’est lui qui protège le planning et le budget du projet, et il incite chacun à valider sérieusement plutôt que par politesse.
Q. Pourquoi passer par un moodboard plutôt que directement aux maquettes ?
R. Parce que le moodboard permet de débattre de la direction artistique — ambiance, couleurs, typographies — avant d’avoir investi des jours dans des maquettes. Corriger une direction sur un moodboard coûte une heure ; sur des maquettes finalisées, une semaine. C’est l’étape la moins coûteuse et la plus structurante du process.
Q. Comment le prototype Figma devient-il un site Webflow ?
R. Le prototype validé sert de référence exacte : structure, styles, espacements et interactions sont reproduits dans Webflow, dont la logique de classes épouse bien les composants Figma. Certains éléments s’importent directement, le reste s’intègre manuellement avec le mode développeur de Figma en appui. Le site final est conforme à la maquette, au pixel près ou presque.
Conclusion
Cinq étapes, des livrables clairs, des validations qui verrouillent chaque acquis : ce process Figma est la colonne vertébrale de tous nos projets de design. Il n’a rien de secret — sa valeur tient à la discipline de son exécution. Notre fiche outil Figma vous donnera les clés de l’outil, et si votre projet appelle une intégration rapide et fidèle, notre agence Webflow transforme le prototype validé en site en ligne.
Sources : Figma (figma.com, help.figma.com), Webflow (webflow.com), Nielsen Norman Group.