Dev Mode
Conçu pour les développeurs, Dev Mode vous permet d'inspecter facilement les designs et de les traduire en code, sans modifier le fichier de design. Dev Mode est compris dans les licences Dev et Full avec tous les forfaits payants.
Ces entreprises font confiance à Figma
Générez un meilleur code avec le contexte Figma
Transformez les designs Figma en code précis avec le serveur MCP Figma. Il intègre le contexte Figma directement aux outils de codage agentiques, tels que VS Code, Cursor, Windsurf et Claude, pour un workflow plus efficace.
Trouvez rapidement les informations dont vous avez besoin pour coder
Optimisez votre workflow grâce à des fonctionnalités conçues pour simplifier l'inspection du code et mettre en avant les éléments prêts à être développés.
Comparez des changements de design
Affichez les dernières modifications des frames et des composants, ou ouvrez l'historique des versions pour visualiser les changements de design en parallèle.
Explorez les spécifications du design
Inspectez les propriétés des composants, comme les codes couleur et les valeurs des tokens, vérifiez les espacements, puis copiez-collez le code pour accélérer le développement.
Changez de vue pour plus de clarté
Passez en vue Ready for dev pour voir les designs marqués comme prêts pour le développement. Vous pouvez également cliquer sur des composants spécifiques pour les isoler grâce à la vue Focus.
Codez avec l'extension VS Code
Changez moins souvent d'écran et codez plus tout en travaillant dans un environnement familier avec l'extension VS Code.
Le Dev Mode de Figma facilite une collaboration rationalisée entre les développeurs et les designers, grâce à la réduction des points de friction entre les deux, pour notre plus grande satisfaction.
Sandra Schaus
Lead UX Expert, services de développement commercial, Volkswagen Group Services
Connectez votre design system et votre base de code pour plus de cohérence
Dev Mode vous offre la possibilité de coder des designs cohérents et réutilisables, et de les connecter facilement à votre base de code grâce à Code Connect.
Associez votre base de code avec Code Connect
Avec Code Connect, générez instantanément des extraits de code prêts à l'emploi en connectant votre base de code et votre design system existant dans Figma.
Visualisez toutes les options de composants
Le bac à sable des composant vous permet de visualiser toutes les variantes possibles et le comportement des composants, et vous fournit même le code à implémenter. Tout ce qu'il vous reste à faire, c'est de choisir la meilleure option.
Accédez aux variables de design à l'échelle du système
Créez en conformité avec l'image de votre marque et gagnez du temps grâce aux variables existantes ou aux valeurs de token, et aux syntaxes de code correspondantes dans Figma. Vous pourrez facilement assurer la cohérence des éléments dans toutes vos applications.
Le plus de Code Connect ? Il évite aux développeurs d'avoir à passer fréquemment d'un contexte à l'autre.
Gilson Hoffmeister
Spécialiste en design system, HP
Rationalisez les allers-retours avec vos partenaires de design
Des fonctionnalités comme les mises à jour de statut, les commentaires et les annotations vous aident à rester en phase avec les designers tout au long du projet.
Réduisez le nombre de tâches répétitives avec une meilleure communication
Travaillez à partir d'informations actualisées grâce aux notifications en temps réel en cas de modifications d'un design. La vue Ready for dev fournit un résumé clair des éléments modifiés, terminés et prêts à être développés.
Codez en contexte
Parcourez les annotations et les commentaires des designers pour mieux comprendre ce que vous devez réaliser.
Vérifiez vos mesures
Les designers peuvent ajouter des mesures pour vous aider à visualiser rapidement les marges et les dimensions afin que rien ne soit perdu quand vous passez du design au code.
Explorez d'autres ressources sur le design et le développement
Tout ce que vous devez savoir sur le Dev Mode
Nous avons créé le Dev Mode pour rendre le développement de produits plus efficace, de l’idée au code. Découvrez notre philosophie produit et les prochaines étapes.
5 choses que les designers doivent savoir pour une livraison en douceur
La livraison est un processus, et non un moment. Étant donné qu'il s'agit d'un flux constant de designs en cours, de communication et de collaboration, comment la simplifier ? Lauren Andres, designer advocate, vous donne ses conseils.
Découvrez les plugins de la communauté pour les développeurs
Parcourez des milliers de plugins créés par la communauté et consolidez votre utilisation de Figma.