Figma Dev Mode à été lancé en 2023 et est devenu gratuit pour tous les plans en 2026. Il répond à un besoin historique : permettre aux développeurs d’inspecter les designs et d’extraire les specs (couleurs, tailles, espacements, code CSS) sans avoir besoin d’un compte payant Figma et sans risquer de modifier les fichiers de design.
Avant Dev Mode, les équipes utilisaient des outils tiers comme Zeplin ou Inspect pour ce rôle. Dev Mode les rend obsolètes pour la plupart des cas d’usage en intégrant l’inspection directement dans Figma.
Les fonctionnalités clés pour les développeurs
Activer Dev Mode (bouton en haut à droite de Figma) change le panneau d’inspection de droite :
- Inspection des propriétés : sélectionner n’importe quel élément affiche ses propriétés CSS dans le panneau de droite. Couleurs au format hex, rgb ou hsl selon la préférence. Tailles en px ou rem. Border radius, opacité, effets de shadow.
- Code CSS généré : un onglet « Code » génère le CSS complet du composant sélectionné. Pas nécessairement du code production-ready, mais une base précise qui réduit les erreurs de transposition.
- Variants iOS et Android : pour les composants liés à un design system, le code généré peut être affiché en Swift (iOS), Kotlin (Android) ou CSS (web) selon la plateforme cible.
- Export d’assets : exporter des icônes, images et illustrations aux formats et résolutions configurés par le designer (SVG, PNG, WebP, @1x, @2x, @3x).
- Variables et tokens : quand le design utilise des Variables Figma, les valeurs affichées dans l’inspection montrent le nom de la variable, pas la valeur brute. « color-primary » au lieu de « #2563EB ». Les développeurs voient directement le token à utiliser dans le code.
Dev Mode ne génère pas du code prêt à coller en production. Il génère des specs précises qui éliminent les allers-retours « c’est quelle couleur exactement » et « le padding c’est 16 ou 20 ? » Ces questions représentaient une fraction non négligeable du temps de communication design-développement.
Pour les designers : préparer des fichiers Dev Mode-ready
La qualité des informations que les développeurs extraient de Dev Mode dépend directement de la façon dont les designers ont structuré leurs fichiers :
- Utiliser des Variables Figma : les propriétés remplies avec des Variables Figma montrent le nom du token dans l’inspection. Les développeurs savent immédiatement quelle variable utiliser dans le code.
- Nommer les calques : des calques nommés clairement (« btn-primary », « card-header », « icon-search ») aident les développeurs à naviguer dans les composants complexes.
- Utiliser des Styles plutôt que des valeurs brutes : les couleurs et typographies appliquées via des Styles Figma montrent le nom du Style dans l’inspection (« Heading/H1 », « Brand/Primary »).
- Configurer les exports : pour les assets (icônes, illustrations), configurer les paramètres d’export directement dans le fichier. Les développeurs exportent en un clic sans demander au designer le bon format.
- Ajouter des annotations : Dev Mode permet d’ajouter des annotations de design directement dans Figma, visibles uniquement en mode Dev. Pour les comportements, les états et les règles qui ne se voient pas dans le design statique.
Dev Mode et les plugins de génération de code
Figma marketplace propose plusieurs plugins qui s’intègrent à Dev Mode pour aller plus loin dans la génération de code :
- CopyCat : génère des composants React complets depuis les designs Figma
- Anima : génère du HTML/CSS ou React avec une fidélité visuelle élevée
- Figma to Code : génère du code Tailwind CSS depuis les designs
Ces plugins ne génèrent pas du code production-ready dans la plupart des cas complexes. Ils accélèrent le travail d’un développeur junior ou servent de référence pour comprendre la structure attendue.
Dev Mode représente un pas important vers la réduction du fossé design-développement. Les équipes qui l’utilisent bien, avec des fichiers structurés et des Variables correctement configurées, réduisent significativement le temps de handoff et les itérations dues aux malentendus sur les specs.
