Pourquoi utiliser Figma en tant que développeur ?
Un bref historique des outils pour les maquettes
Au fil des années, les développeurs et les designers ont utilisé divers outils pour travailler avec des maquettes et des designs.
Historiquement chez Be API, nous utilisions principalement Photoshop : mais il n’était pas spécialement conçu pour la collaboration entre designers et développeurs et peu adapté au design web. Nous utilisions Avocode en complément de Photoshop qui permettait d’avoir les codes CSS associés aux éléments des maquettes. Parallèlement, nous collaborions avec nos clients avec Adobe XD, une solution plus adaptée au design web.
Par la suite, nous avons opté pour des outils comme Sketch, offrant une meilleure expérience pour les designers, mais l’absence d’une gestion cloud native compliquait parfois le partage et la collaboration.
Ces solutions étaient souvent fragmentées, nécessitant l’utilisation de plusieurs outils pour maintenir une collaboration fluide.
Pourquoi Figma est l’outil idéal pour les développeurs et designers ?
Figma a révolutionné le domaine en proposant une plateforme tout-en-un, collaborative et basée sur le cloud. Contrairement à ses prédécesseurs, Figma permet aux développeurs et designers de travailler en temps réel sur un même fichier, sans avoir à passer par des exportations ou des applications tierces.
Grâce à des fonctionnalités comme le Dev Mode, Figma simplifie considérablement l’accès aux spécifications des designs, telles que les mesures, les couleurs et les assets téléchargeables. Cela réduit les frictions dans les workflows et offre une expérience fluide, particulièrement adaptée aux besoins modernes des équipes agiles.
De plus, les fichiers de Figma sont accessibles via le navigateur web, et ne nécessitent donc pas de télécharger le logiciel.
Figma s’est imposé comme un outil indispensable grâce à sa flexibilité, sa collaboration en temps réel et ses fonctionnalités spécifiques pour les développeurs.
Figma Dev Mode : Une révolution pour les développeurs
Qu’est-ce que le mode développeur sur Figma ?
Par le passé, Figma intégrait les propriétés et valeurs de styles CSS dans une seule vue, ce qui n’apportait pas de bénéfice pour les designers. Le mode développeur sur Figma (aussi appelé Developer Mode) est une vue dédiée aux développeurs apportant plusieurs fonctionnalités facilitant l’intégration des maquettes web :
- Inspecter les éléments : Voir les tailles, marges, paddings, couleurs, polices, etc.
- Exporter les assets : Télécharger des images, SVG ou autres formats prévus par le designer.
- Copier du code : Copier du code CSS, Swift, ou XML Android pour un élément sélectionné.
- Voir les composants : Affiche les composants réutilisables et leurs variantes.
- Intégrations : Connexion possible avec GitHub, Jira, Storybook, etc. pour suivre les tâches ou l’état du code.
Comment activer et utiliser le Dev Mode ?
Le Dev Mode est accessible depuis la barre d’outils située en contrebas de l’application. Au clic sur le bouton représenté par </> , vous basculerez sur la vue développeur et pourrez accéder à ses fonctionnalités dédiées.
Le panneau d’inspection vous fournit les détails de conception et les informations sur les composants nécessaires pour transformer une maquette en code. Voici comment en tirer parti :
➡️ Afficher les noms et types de calques : Le nom et le type du calque sélectionné s’affichent en haut du panneau d’inspection. Vous pouvez également voir la date de dernière mise à jour de ce calque.
➡️ Tester les variantes de composants dans l’espace de prévisualisation : Lorsque vous sélectionnez un composant ou une instance, vous accédez à : un aperçu du composant, un lien vers le composant principal, ainsi que des liens vers la documentation et les ressources destinées aux développeurs.
➡️ Ajouter des liens et ressources externes : Les designers et les développeurs peuvent ajouter des liens vers des ressources utiles à l’implémentation (par exemple : GitHub, Jira, Storybook).
➡️ Accélérer le développement grâce à des extraits de code personnalisables : En mode développeur, cliquez sur un objet de la maquette pour faire apparaître un extrait de code généré automatiquement dans la section « Code » du panneau d’inspection. Vous pouvez personnaliser le langage (CSS, Swift, XML…) ainsi que les unités de mesure utilisées dans ces extraits.
➡️ Consulter les styles appliqués : Vous avez accès aux styles et variables (couleurs, typographies, espacements, etc.) associés au calque sélectionné.
➡️ Télécharger les assets : Le mode développeur peut détecter automatiquement les icônes et les proposer au téléchargement.
➡️ Exporter des éléments : Vous pouvez définir des paramètres d’exportation sur les calques (formats PNG, JPG, SVG, PDF, etc.), ainsi que les réglages associés (dimensions, suffixes, etc.).
Figma et le développement front-end
Intégrer un design Figma en HTML/CSS
L’étape la plus classique pour un développeur est de traduire une maquette Figma en HTML et CSS. Grâce au mode développeur de Figma, cette tâche est largement facilitée :
- Le panneau d’inspection permet de consulter les tailles, couleurs, typographies et espacements.
- Les grilles, contraintes et flexibilité des éléments peuvent être observées, ce qui aide à reproduire un layout réactif.
- Les assets (icônes, images, SVG) sont téléchargeables directement depuis l’interface.
Un bon réflexe est de synchroniser les valeurs déclarées dans Figma avec un framework CSS comme Tailwind pour avoir concordance entre ce qui est définie sur la maquette et ce qui sera utilisé dans vos pages webs.
👉 Chez Be API, nous travaillons exclusivement sur WordPress et de plus en plus sur des thèmes Full Site Editing (FSE). Lors des premières étapes d’intégrations, nous prenons soin de récupérer toutes les valeurs des maquettes (couleurs, espacements, typographies etc…) pour les ajouter dans le fichier theme.json qui permet de déclarer toutes les variables CSS qui servent à la construction des pages du site.
Convertir un design en React ou Vue.js
Figma facilite aussi le travail par composants, ce qui correspond parfaitement à une architecture moderne avec React, Vue ou tout framework basé sur une UI modulaire.
- Chaque composant Figma (bouton, carte, champ de formulaire, etc.) peut être associé à un composant React/Vue dans votre codebase.
- Le naming des composants dans Figma peut refléter celui du code pour améliorer la traçabilité.
- Grâce aux variantes de composants dans Figma, vous pouvez anticiper les
props(taille, état, style) dans votre code. - Des plugins comme Figma to Code, Anima, ou Locofy permettent de générer un squelette HTML/JSX/Vue de base, à affiner manuellement ensuite.
Il faut que les développeurs et designer travaillent en étroite collaboration pour avoir une cohérence entre l’organisation des modules sur Figma et des composants sur une application avec React ou Vue.js.
Automatiser le workflow avec des plugins Figma pour développeurs
Une autre force de Figma est son écosystème et sa communauté. Plusieurs extensions sont développées par des tiers et permettent de faciliter entre autres les méthodes de travail des développeurs. Voici une liste non exhaustive d’extensions populaires :
Figma Tokens : Synchroniser les design tokens (couleurs, typographie, espacements) avec votre projet (Style Dictionary, Tailwind config, etc.)
Themer : Exporter/importer des thèmes entiers pour les intégrer à un système design
Figma to Code : Génération automatique de code React/Vue/HTML/CSS
Story.to.design : Importer des composants Storybook dans Figma pour visualisation inverse
Content Reel: Ajouter du contenu dynamique pour tester l’UI avec des données réalistes
Bonnes pratiques pour collaborer efficacement avec les designers
Pour une collaboration optimale entre développeurs et designers, il est essentiel de poser un cadre clair dès le départ : nommage cohérent des composants, design system partagé, et usage de variables (design tokens) pour harmoniser le code et le visuel.
Figma permet une collaboration en temps réel, mais c’est surtout son système de commentaires et d’annotations contextualisés qui facilite les échanges : chaque élément peut recevoir un retour précis, évitant les malentendus. Les développeurs peuvent poser des questions directement sur la maquette, et les designers y répondre sans multiplier les captures d’écran ou documents externes.
En complément, utilisez le mode développeur pour accéder à toutes les specs sans perturber la maquette, et planifiez régulièrement des revues croisées pour valider l’alignement entre design et implémentation. Une bonne communication, des outils bien exploités et une documentation légère, mais rigoureuse sont les clés d’une collaboration front-end/design efficace.
Conclusion
Figma ne se limite pas à la création de maquettes : c’est un outil central de collaboration entre designers et développeurs. En exploitant ses fonctionnalités comme le mode développeur, les commentaires contextualisés et une structuration rigoureuse des composants, il devient un véritable levier pour gagner en efficacité, en cohérence et en qualité dans le développement d’interfaces web ou mobiles.
