Handoff design-dev : comment ne rien perdre entre Figma et le code

Traduire fidèlement des maquettes en HTML/CSS/JS tout en garantissant l'accessibilité, la performance et la maintenabilité est un exercice où la moindre approximation se voit immédiatement en production.

HTML sémantique, CSS Grid, JS en amélioration progressive

Le HTML5 sémantique structure la page avec des landmarks clairs, des titres correctement hiérarchisés et des formulaires bien étiquetés. Le CSS Grid gère la macro-structure de la page, tandis que Flexbox aligne les composants à une échelle plus locale. Le JavaScript ES6+ s'utilise en amélioration progressive : il gère les interactions, l'accessibilité dynamique (focus, aria-live) et les petites animations utiles, sans jamais devenir une dépendance bloquante pour le contenu essentiel.

CMS ou no-code : un choix qui engage

WordPress, avec un thème comme Salient par exemple, Webflow, Framer ou Bubble répondent à des besoins très différents. Le choix dépend de la maintenance envisagée, de l'autonomie de l'équipe cliente, de la scalabilité attendue, de la sécurité et du coût total sur la durée. Les limites et le risque de lock-in de chaque solution doivent être anticipés avant la décision, pas découverts deux ans plus tard.

Le handoff qui ne perd rien

Le handoff s'appuie sur l'inspection Figma ou Zeplin, des design tokens partagés entre design et développement, une documentation claire, un versioning rigoureux, et une Definition of Done qui inclut explicitement la conformité UI, l'accessibilité, les tests et la performance, avec par exemple un objectif de LCP inférieur à 2,5 secondes.

Concrètement, un exercice de handoff type produit des annotations précises (tailles, rayons, états, motion) et un extrait de tokens au format JSON pour les couleurs, l'espacement, la typographie et les durées d'animation, un langage commun entre designer et développeur qui élimine l'essentiel des allers-retours inutiles.

Questions fréquentes

Pourquoi privilégier CSS Grid plutôt que Flexbox pour la structure globale ?

CSS Grid gère naturellement les deux dimensions (lignes et colonnes) d'une mise en page complexe, tandis que Flexbox excelle sur l'alignement d'éléments dans une seule direction. Les deux se combinent efficacement selon l'échelle du composant.

Comment choisir entre WordPress et une solution no-code comme Webflow ?

WordPress offre plus de flexibilité et d'autonomie à long terme via son écosystème de plugins, tandis que Webflow ou Framer accélèrent la mise en ligne initiale au prix d'une dépendance plus forte à la plateforme.

Que doit contenir une Definition of Done pour un projet web ?

Au minimum : conformité visuelle avec la maquette, tests d'accessibilité passés, performance validée (Core Web Vitals) et une revue de code, pour éviter qu'un site "visuellement fini" cache des problèmes non résolus.

Florent Dabernat

Directeur artistique et fondateur d'IDSEED, à Aix-en-Provence. J'accompagne mes clients sur le branding, l'UX/UI et le web, avec une méthode claire et documentée. En savoir plus ➞