Un site ou une application ne se construit pas directement dans le code. Chez HWS, chaque projet ou presque commence dans Figma : c'est là que le design se décide, se discute et se valide avec le client, avant qu'une seule ligne ne soit intégrée. Voici pourquoi cet outil est devenu le point de départ de notre méthode.
À quoi sert Figma ?
Figma est un outil de design d'interfaces. Il sert à dessiner des maquettes : des représentations fidèles, écran par écran, de ce que sera votre futur site ou votre future application. La particularité de Figma, c'est qu'il fonctionne dans le navigateur et qu'il est collaboratif en temps réel — comme un Google Docs du design. Vous ouvrez un lien, vous voyez la maquette, vous laissez un commentaire directement sur l'écran concerné.
Pour un dirigeant, c'est un changement concret : plus besoin d'imaginer le résultat à partir d'un long document ou d'un discours commercial. Vous voyez votre site avant qu'il n'existe, au pixel près, et vous pouvez demander des ajustements quand ils ne coûtent encore presque rien.
Comment nous l'utilisons chez HWS
Figma intervient sur la quasi-totalité de nos projets, des vitrines Webflow comme Kairos ou Clever aux produits plus ambitieux comme Listti, un réseau social de listes, ou Walleto, un outil de cartes Apple et Google Wallet. La méthode reste la même, du premier atelier à la maquette validée.
L'atelier de cadrage : poser les bases
Tout commence par un échange structuré : qui sont vos clients, qu'est-ce qu'ils doivent comprendre en dix secondes, quelle action doivent-ils accomplir ? Nous traduisons ces réponses en une structure de pages et en wireframes — des maquettes volontairement grises et simplifiées qui règlent l'organisation du contenu avant de parler couleurs. Cette étape évite le piège classique : débattre de la teinte d'un bouton alors que le message principal n'est pas encore clair.
La maquette haute-fidélité : voir le site avant de le construire
Une fois la structure validée, nous passons au design final : typographies, couleurs, images, animations décrites écran par écran, du grand écran au mobile. Pour Clever, cabinet de conseil, ce travail incluait la refonte complète de la charte graphique ; la maquette Figma a servi de référence unique, du logo au site livré en trois semaines.
La validation client, directement sur la maquette
Le lien Figma est partagé au client, qui commente précisément là où il a une remarque : « ce titre est trop long », « cette photo ne nous ressemble pas ». Chaque aller-retour est tracé, rien ne se perd dans une chaîne d'emails. Quand la maquette est validée, elle devient notre contrat visuel : ce que vous avez vu est ce qui sera livré.
Le prototype cliquable : tester avant de développer
Quand un projet comporte des parcours importants — une prise de rendez-vous, une inscription, un tunnel de commande — nous relions les écrans entre eux pour créer un prototype cliquable. Le client navigue dans son futur site comme s'il existait déjà, sur ordinateur comme sur mobile. C'est le moyen le plus économique de détecter un parcours confus : corriger une maquette prend une heure, corriger un développement prend des jours.
Le design system : la cohérence qui fait gagner du temps
Dans Figma, nous construisons chaque projet à partir de composants réutilisables — boutons, cartes, formulaires — définis une fois et déclinés partout. C'est ce qui garantit qu'un site reste cohérent page après page, et c'est ce qui accélère l'intégration ensuite, que le projet parte vers Webflow ou vers du développement sur-mesure.
Pourquoi ce choix (et ses limites)
Nous avons adopté Figma parce qu'il fluidifie la relation client. Pas de fichier à installer, pas de version PDF obsolète qui circule : une seule source de vérité, accessible à tous, à jour en permanence. Côté production, le passage de la maquette à l'intégration est direct : dimensions, couleurs et espacements sont lisibles dans l'outil, sans interprétation.
Les limites, maintenant. Une maquette Figma reste une image : elle ne teste pas la vitesse de chargement, le vrai contenu qui déborde, ou le comportement d'un formulaire. C'est pour cela que nous validons toujours certaines décisions dans le produit réel, pas seulement sur la maquette. Autre écueil, plus humain que technique : le perfectionnisme. On peut passer des semaines à polir des écrans qui ne seront jamais construits. Notre garde-fou est simple : nous ne maquettons que ce qui sera intégré, et nous gardons des cycles courts entre design et mise en ligne.
Un exemple concret : Clever
La refonte de Clever illustre bien le rôle de Figma dans notre méthode. Ce cabinet de conseil voulait moderniser à la fois son image et son site. Tout s'est joué dans la maquette : nouvelle charte, nouvelles pages, validation des écrans par le client directement dans Figma. L'intégration dans Webflow n'a ensuite été qu'une exécution fidèle — trois semaines au total entre le début du travail et la mise en ligne. Sans cette phase de design, chaque hésitation graphique aurait été corrigée dans le site lui-même, au triple du coût.
Figma n'est pas un luxe d'agence : c'est ce qui vous permet de valider votre futur site avant de payer sa construction. Si vous préparez une refonte ou un nouveau produit, demandez toujours à voir une maquette. Et pour comprendre ce qui se passe après la validation, lisez comment nous intégrons ces maquettes dans Webflow, ou comment nous concevons des applications mobiles et SaaS à partir du même point de départ.
