FigmaHANDOFF DEV SPECS
Prérequis
- Fichier Figma structuré (composants, auto-layout, styles)
- Licence Figma incluant Dev Mode pour les développeurs concernés
- Convention de nommage design system alignée avec le code (tokens CSS)
Un handoff flou génère des allers-retours coûteux : mauvaises couleurs, espacements inventés, assets manquants. Dev Mode dans Figma aligne design et développement sur les mêmes mesures, variables et composants documentés. Vous allez préparer le fichier, inspecter les specs et livrer avec annotations et revue structurée.
Activer Dev Mode et préparer le fichier
Passez en Dev Mode depuis la barre d'outils. Les développeurs voient dimensions, typo, couleurs liées aux variables et suggestions de code.
Organisez les pages : « Handoff », « Design system », « Archive ». Seule la page Handoff est figée en fin de sprint.
Marquez les sections « Ready for dev » via le statut de section ou un préfixe dans le nom. Les frames en cours restent hors périmètre d'intégration.
Inspecter composants, variables et assets
Sélectionnez un composant : le panneau droit liste padding, gap auto-layout, border-radius et variables liées. Documentez les variantes (size, state) dans la description du master.
Configurez les export settings au niveau composant (SVG pour icônes, WebP/PNG 2x pour raster). Nom de fichier = slug cohérent (`icon-cart.svg`).
Pour le responsive, fournissez les breakpoints clés avec contraintes auto-layout explicites, pas seulement trois frames détachées.
Annotations, tickets et revue handoff
Utilisez les commentaires ou la Description pour les comportements non visuels : focus clavier, aria-label, états loading, délais d'animation.
Liez les frames aux tickets ClickUp ou issues GitHub. Cursor + Figma : le dev s'appuie sur Dev Mode et les tokens déjà mappés dans le repo.
Organisez une revue handoff (15 min) par lot : le dev partage écran en Dev Mode, le design valide ou corrige sur le vif.
Erreurs fréquentes
Frames non composants : impossible de maintenir la cohérence en intégration.
Couleurs en dur non liées aux variables : dette visuelle immédiate.
Oublier les états focus et erreur formulaire : recette accessibilité en échec.
Handoff sans version figée : le dev intègre une maquette modifiée en parallèle.
Ce qu'il faut retenir
Dev Mode + variables Figma = source de vérité pour les specs.
Frames nommées, statuts « Ready for dev », exports configurés.
Annotations pour le comportement, pas seulement le pixel.
Revue handoff courte : moins de rework en développement.
FAQ
Pour la plupart des équipes déjà sur Figma, oui. L'essentiel est la discipline sur variables, composants et statuts de livraison, pas l'outil annexe.
Figez un snapshot (branch Figma ou version history) par sprint. Les changements hors périmètre passent par un change request explicite.
Dev Mode nécessite les droits adaptés selon votre plan. Vérifiez votre facturation avant d'onboarder toute l'équipe.
Cursor