Guide sur Dev Mode
Cet article est disponible à la fois pour l’ancienne interface utilisateur Figma et la nouvelle interface utilisateur Figma. Utilisez le bouton en bas à gauche de la page pour sélectionner votre interface utilisateur actuelle. Faites connaissance avec UI3 : la nouvelle conception de Figma →
Avant de commencer
Qui peut utiliser cette fonctionnalité
Disponible avec tous les forfaits payants
Nécessite une licence Design complète ou une licence Dev Mode
Dev Mode dans Figma offre aux développeurs tout ce dont vous avez besoin pour naviguer dans les fichiers de design et transformer les designs en code. Grâce à Dev Mode, les concepteurs et les développeurs peuvent rester sur la même longueur d'onde et s'assurer que les détails importants ne sont pas perdus au cours du processus de transfert.
Les développeurs utilisent Dev Mode afin :
- d'accéder à des capacités d'inspection avancées et à d'autres langages de codegen ;
- de s'assurer qu'ils utilisent les dernières spécifications pour leurs créations en comparant facilement les versions de cadres ;
- d'examiner rapidement les designs qui sont prêts pour le développement avec des statuts et des annotations ;
- de rationaliser les workflows avec des intégrations axées sur les développeurs comme JIRA, Storybook et GitHub ;
- d'explorer toutes les variantes dans un ensemble de composants sans modifier le fichier ;
- de lier les designs à des tickets, de la documentation et des composants de code ;
- d'examiner des designs et d'écrire du code côte à côte en utilisant l'extension Figma pour VS Code.
Présentation de Dev Mode
Dev Mode est une interface axée sur les développeurs qui leur permet d'inspecter et de parcourir les designs. Vous pouvez accéder à Dev Mode depuis n'importe quel fichier Figma Design. Pour basculer entre Design Mode et Dev Mode :
- Ouvrez un fichier Figma Design.
- Cliquez sur le bouton d’activation du Dev Mode ou utilisez le raccourci clavier ShiftD.
Remarque : Dev Mode s'active automatiquement lorsque vous ouvrez un fichier Figma Design avec un lien Dev Mode.
Navigation
Dans Dev Mode, la barre latérale gauche permet de parcourir facilement les designs marqués comme étant prêts pour le développement.
-
A
Afficher les ressources prêtes pour le développement
L'icône de Dev Mode indique les pages contenant des frames, des composants, des instances et des sections prêts pour le développement. Les objets sur le plan de travail qui sont marqués comme prêts s'affichent sous Ready for development dans le panneau des calques de Dev Mode.
Pour marquer une ressource prête pour le développement :
- Dans Dev Mode, sélectionnez une frame, un composant, une instance ou une section.
- Cliquez sur Mark as ready for dev dans la barre d'outils.
En outre, si vous disposez d'une licence complète, Dev Mode ou Spectateur au sein d'une organisation ou d'une entreprise, Dev Mode présente une vue des designs qui sont marqués comme étant prêts pour le développement. La vue Ready for Dev s'affiche uniquement sur les fichiers qui comportent un ou plusieurs designs présentant le statut Dev Mode.
-
B
Déterminer la dernière fois qu'une frame a été modifiée
Vous pouvez voir quand une frame a été modifiée pour la dernière fois sous le nom de la frame, dans le panneau de navigation.
-
C
Parcourir les frames et les calques
Dans Design Mode, n'importe qui peut regrouper du contenu associé dans des sections et marquer celles-ci comme étant prêtes pour le développement. Dev Mode donne la priorité au contenu se trouvant dans une section. Le contenu non classé dans une section reste visible dans la barre latérale gauche, mais est réduit par défaut.
Cliquez sur une frame dans la barre latérale gauche pour le centrer sur le plan de travail. Sélectionnez la frame sur le plan de travail pour voir les calques qui y sont imbriqués. La sélection d'une frame change le panneau de navigation en un panneau des calques et affiche uniquement les calques pour la frame supérieure actuellement sélectionnée.
Inspection
Le panneau d'inspection affiche les spécifications du design ainsi que les informations de composants pertinentes, nécessaires pour comprendre un design et le transformer en code.
-
A
Comparer des changements de design
Si des changements ont été apportés depuis la dernière fois que vous avez consulté un fichier, Compare changes s'affichera près des informations du calque, dans le panneau d'inspection. Cliquez sur le lien pour ouvrir la fenêtre modale de l'historique de la frame où vous pouvez comparer la version actuelle aux versions antérieures du design.
Vous pouvez également comparer un composant détaché aux versions précédents et au composant principal auquel il était précédemment lié. Vous pouvez effacer son historique de détachement pour éviter de voir les informations concernant son composant principal d'origine.
Comparer les changements dans Dev Mode -> -
B
Ajouter des liens et des ressources externes pour les développeurs
Les designers et les développeurs peuvent ajouter des liens aux ressources externes afin de faciliter l'implémentation d'un composant, notamment des liens GitHub, Jira et Storybook, ainsi que des liens VS Code qui peuvent être utilisés avec l'extension Figma pour VS Code. Les ressources pour développeurs ajoutées aux composants se propagent à toutes les instances de ce composant.
C
Accélérer la création grâce aux fragments de code personnalisables
Cliquez sur n'importe quel objet du plan de travail dans Dev Mode pour remplir la section Code du panneau d'inspection. Selon ce qui est sélectionné, un aperçu typographique ou un modèle de zone s'affiche, suivi des extraits de code générés automatiquement pour l'objet.
Vous pouvez sélectionner la langue et les unités qui apparaîtront dans le plan de travail et le code généré, ainsi qu'élargir la fonctionnalité des fragments de code. Pour modifier la sélection de la langue et des unités :
- En haut à droite de la section Code, sélectionnez une langue dans la liste déroulante.
- Cliquez sur Inspect settings et sélectionnez une unité dans la liste déroulante.
Découvrir comment utiliser des extraits de code dans Dev Mode →
Code Connect
Code Connect est un outil conçu pour permettre aux équipes de design systems et d'ingénierie d'indiquer le code de leurs composants dans Dev Mode. En inspectant un composant à l'aide de fragments de code connecté, les développeurs peuvent visualiser le code d'un design system depuis leurs bibliothèques au lieu d'utiliser un code généré automatiquement. Utilisez Code Connect pour :
- mettre facilement à disposition les codes des composants personnalisés pour favoriser l’adoption du design system ;
- définir les variantes et les propriétés d’un composant de design sous forme de code pour établir une cohérence entre les équipes produit ;
- créer des exemples pour des cas d’utilisation de composants spécifiques afin d’aider les développeurs à comprendre leur utilisation correcte ;
personnaliser les fragments de code créés grâce à l’API Figma et entièrement personnalisables pour prendre en charge différents design systems, produits et langues.
Remarque : Code Connect est disponible avec les forfaits Organisation et Entreprise et nécessite une licence design complète ou une licence Dev Mode.
-
D
Afficher les noms et les types de calques
Le nom du calque sélectionné est affiché en haut du panneau d'inspection, avec son type de calque (composant, instance, frame, texte, etc.). Vous pouvez également voir quand le calque a été mis à jour pour la dernière fois.
-
E
Tester des variations de composants grâce à l'initiation aux composants
En sélectionnant un composant ou une instance, vous verrez un aperçu du composant, un lien vers le composant principal, ainsi que tous les liens vers les documents pertinents et les ressources pour développeurs.
La fonction Initiation aux composants s'affiche dans le panneau d'inspection lorsqu'une instance de composant est sélectionnée. Utilisez le fichier d'initiation pour expérimenter les différentes propriétés du composant sans changer le design réel.
-
F
Afficher les styles appliqués
Affichez les styles et les variables appliqués au calque sélectionné. En outre, vous pouvez voir les détails des variables et obtenir des suggestions de variables.
-
G
Télécharger des ressources
Dev Mode peut détecter les icônes automatiquement et les présenter comme des ressources téléchargeables pour les développeurs. Si vous souhaitez inspecter un calque vectoriel individuel contenu dans une icône, vous pouvez désactiver la détection automatique des icônes :
- Cliquez sur Main menu dans la barre d'outils
- Passez le curseur de la souris sur View dans le menu déroulant
- Désélectionnez Automatically detect icons
Les ressources vous permettent également de télécharger les nœuds des images GIF et vidéos MP4.
-
H
Exporter
Vous pouvez exporter les paramètres des calques pour définir le format et tous les autres paramètres d'exportation. Figma prend en charge les formats d'exportation suivants : PNG, JPG, SVG, and PDFEn savoir plus sur les exportations dans Figma→
Annoter
Les designers peuvent utiliser des annotations pour marquer des designs avec du contenu, des spécifications et des mesures supplémentaires. Cela permet aux développeurs de s'assurer de ne pas rater d'informations cruciales pendant le transfert. Utilisez des annotations et des mesures dans Dev Mode pour :
- indiquer des propriétés importantes afin que les développeurs ne les ratent pas ;
- permettre aux développeurs de visualiser rapidement l'espacement et la taille ;
- ajouter du contexte supplémentaire avec des notes textuelles associées directement aux designs.
Découvrir comment ajouter des mesures et annoter les designs dans Dev Mode →
Gérer le transfert dans Dev Mode
Lorsque vous avez des sections, des frames et des composants marqués Ready for Dev, vous pouvez utiliser les vues Ready for Dev et Focus de Dev Mode pour vous aider à gérer votre processus de livraison aux développeurs.
-
La vue Prêt pour le développement permet de parcourir facilement tous les designs d'un fichier qui sont marqués comme étant prêts pour le développement. Vous pouvez filtrer et visualiser tous vos designs marqués comme prêts pour le développement. En savoir plus sur la vue Prêt pour le développement et le processus de transfert →
-
La vue Focus affiche les fichiers prêts pour le développement un à un. Vous pouvez utiliser tous vos outils Dev Mode habituels, explorer les calques du design et retrouver des informations importantes telles que l'historique des versions annoté. En savoir plus sur la vue Focus →
Statuts et notifications Dev Mode
Les statuts et les notifications Dev Mode permettent de gérer la livraison aux développeurs. Grâce aux statuts, vous savez quand les sections, les frames ou les composants sont prêts pour le développement. Les notifications sont quant à elles basées sur les changements de statut afin que les développeurs puissent réagir à l'état des designs.
Statuts
Tous les forfaits qui comprennent Dev Mode incluent le statut Ready for Dev. Vous pouvez activer le statut Ready for Dev pour les composants, les frames et les sections afin d'indiquer que le design est prêt pour le développement. Un statut supplémentaire, Completed, est disponible si vous disposez d'un forfait Organisation ou Entreprise.
Pour plus d'informations, notamment sur l'utilisation des statuts, consultez l'article Statuts et notifications Dev Mode.
Notifications
Si vous avez visualisé un fichier en Dev Mode et que vous disposez d'une place complète ou Dev Mode, vous recevrez une notification à chaque fois qu'un design est marqué comme prêt pour le développement dans ce fichier. Vous recevrez également une notification la première fois qu'un design est marqué comme prêt pour le développement, ainsi que lorsque le statut Prêt pour le développement est supprimé et défini à nouveau.
Pour plus d'informations, notamment sur la manière d'activer et de désactiver les notifications Dev Mode, consultez l'article Statuts et notifications Dev Mode.
Utiliser des plugins Dev Mode
Les plugins Dev Mode vous permettent d'automatiser les tâches et de relier d'autres outils à des fins de documentation et de communication. Par exemple :
- Gardez le cap en suivant les tâches de développement et en vous synchronisant avec Jira dans Figma, FigJam et Dev Mode
- Reliez votre design system Figma et votre design system en code avec Storybook
- Liez les designs au code afin qu'ils restent toujours synchronisés, en intégrant Github dans Figma
- Personnalisez la sortie du code (pour Tailwind ou React) ou pour vos propres composants de code
L'onglet Plugins de Dev Mode affiche les plugins que vous avez récemment utilisés, ainsi que les plugins recommandés par la communauté Figma.
Découvrir comment utiliser des plugins dans des fichiers →
Consultez le fichier Plugins for Dev Mode playground pour en savoir plus sur les plugins de Dev Mode.
Figma pour VS Code
Figma pour VS Code vous permet de parcourir et d'inspecter les fichiers de design, de collaborer avec les designers, de suivre les changements de design et d'accélérer l'implémentation du design, le tout sans quitter votre éditeur de texte. Augmentez la productivité des développeurs tout en éliminant le changement de contexte et le travail nécessaire pour transformer les designs en code.
- Suivre et répondre aux commentaires et à l'activité en temps réel
- Obtenir des suggestions de code basées sur les designs
- Associer les fichiers de code aux composants de design
Avant de commencer
Qui peut utiliser cette fonctionnalité
Disponible avec tous les forfaits payants
Nécessite une licence Design complète ou une licence Dev Mode
Dev Mode dans Figma offre aux développeurs tout ce dont vous avez besoin pour naviguer dans les fichiers de design et transformer les designs en code. Grâce à Dev Mode, les concepteurs et les développeurs peuvent rester sur la même longueur d'onde et s'assurer que les détails importants ne sont pas perdus au cours du processus de transfert.
Les développeurs utilisent Dev Mode afin :
- d'accéder à des capacités d'inspection avancées et à d'autres langages de codegen ;
- de s'assurer qu'ils utilisent les dernières spécifications pour leurs créations en comparant facilement les versions de cadres ;
- d'examiner rapidement les designs qui sont prêts pour le développement avec des statuts et des annotations ;
- de rationaliser les workflows avec des intégrations axées sur les développeurs comme JIRA, Storybook et GitHub ;
- d'explorer toutes les variantes dans un ensemble de composants sans modifier le fichier ;
- de lier les designs à des tickets, de la documentation et des composants de code ;
- d'examiner des designs et d'écrire du code côte à côte en utilisant l'extension Figma pour VS Code.
Présentation de Dev Mode
Dev Mode est une interface axée sur les développeurs qui leur permet d'inspecter et de parcourir les designs. Vous pouvez accéder à Dev Mode depuis n'importe quel fichier Figma Design. Pour basculer entre Design Mode et Dev Mode :
- Ouvrez un fichier Figma Design.
- Cliquez sur le bouton d’activation du Dev Mode ou utilisez le raccourci clavier ShiftD.
Remarque : Dev Mode s'active automatiquement lorsque vous ouvrez un fichier Figma Design avec un lien Dev Mode.
Navigation
Dans Dev Mode, la barre latérale gauche permet de parcourir facilement les designs marqués comme étant prêts pour le développement.
-
A
Afficher les ressources prêtes pour le développement
L'icône de Dev Mode indique les pages contenant des frames, des composants, des instances et des sections prêts pour le développement. Les objets sur le plan de travail qui sont marqués comme prêts s'affichent sous Ready for development dans le panneau des calques de Dev Mode.
Pour marquer une ressource prête pour le développement :
- Dans Dev Mode, sélectionnez une frame, un composant, une instance ou une section.
- Cliquez sur Mark as ready for dev dans la barre d'outils.
En outre, si vous disposez d'une licence complète, Dev Mode ou Spectateur au sein d'une organisation ou d'une entreprise, Dev Mode présente une vue des designs qui sont marqués comme étant prêts pour le développement. La vue Ready for Dev s'affiche uniquement sur les fichiers qui comportent un ou plusieurs designs présentant le statut Dev Mode.
-
B
Déterminer la dernière fois qu'une frame a été modifiée
Vous pouvez voir quand une frame a été modifiée pour la dernière fois sous le nom de la frame, dans le panneau de navigation.
-
C
Parcourir les frames et les calques
Dans Design Mode, n'importe qui peut regrouper du contenu associé dans des sections et marquer celles-ci comme étant prêtes pour le développement. Dev Mode donne la priorité au contenu se trouvant dans une section. Le contenu non classé dans une section reste visible dans la barre latérale gauche, mais est réduit par défaut.
Cliquez sur une frame dans la barre latérale gauche pour le centrer sur le plan de travail. Sélectionnez la frame sur le plan de travail pour voir les calques qui y sont imbriqués. La sélection d'une frame change le panneau de navigation en un panneau des calques et affiche uniquement les calques pour la frame supérieure actuellement sélectionnée.
Inspection
Le panneau d'inspection affiche les spécifications du design ainsi que les informations de composants pertinentes, nécessaires pour comprendre un design et le transformer en code.
-
A
Comparer des changements de design
Si des changements ont été apportés depuis la dernière fois que vous avez consulté un fichier, Compare changes s'affichera près des informations du calque, dans le panneau d'inspection. Cliquez sur le lien pour ouvrir la fenêtre modale de l'historique de la frame où vous pouvez comparer la version actuelle aux versions antérieures du design.
Vous pouvez également comparer un composant détaché aux versions précédents et au composant principal auquel il était précédemment lié. Vous pouvez effacer son historique de détachement pour éviter de voir les informations concernant son composant principal d'origine.
Comparer les changements dans Dev Mode -> -
B
Ajouter des liens et des ressources externes pour les développeurs
Les designers et les développeurs peuvent ajouter des liens aux ressources externes afin de faciliter l'implémentation d'un composant, notamment des liens GitHub, Jira et Storybook, ainsi que des liens VS Code qui peuvent être utilisés avec l'extension Figma pour VS Code. Les ressources pour développeurs ajoutées aux composants se propagent à toutes les instances de ce composant.
C
Accélérer la création grâce aux fragments de code personnalisables
Cliquez sur n'importe quel objet du plan de travail dans Dev Mode pour remplir la section Code du panneau d'inspection. Selon ce qui est sélectionné, un aperçu typographique ou un modèle de zone s'affiche, suivi des extraits de code générés automatiquement pour l'objet.
Vous pouvez sélectionner la langue et les unités qui apparaîtront dans le plan de travail et le code généré, ainsi qu'élargir la fonctionnalité des fragments de code. Pour modifier la sélection de la langue et des unités :
- En haut à droite de la section Code, sélectionnez une langue dans la liste déroulante.
- Cliquez sur Inspect settings et sélectionnez une unité dans la liste déroulante.
Découvrir comment utiliser des extraits de code dans Dev Mode →
Code Connect
Code Connect est un outil conçu pour permettre aux équipes de design systems et d'ingénierie d'indiquer le code de leurs composants dans Dev Mode. En inspectant un composant à l'aide de fragments de code connecté, les développeurs peuvent visualiser le code d'un design system depuis leurs bibliothèques au lieu d'utiliser un code généré automatiquement. Utilisez Code Connect pour :
- mettre facilement à disposition les codes des composants personnalisés pour favoriser l’adoption du design system ;
- définir les variantes et les propriétés d’un composant de design sous forme de code pour établir une cohérence entre les équipes produit ;
- créer des exemples pour des cas d’utilisation de composants spécifiques afin d’aider les développeurs à comprendre leur utilisation correcte ;
personnaliser les fragments de code créés grâce à l’API Figma et entièrement personnalisables pour prendre en charge différents design systems, produits et langues.
Remarque : Code Connect est disponible avec les forfaits Organisation et Entreprise et nécessite une licence design complète ou une licence Dev Mode.
-
D
Afficher les noms et les types de calques
Le nom du calque sélectionné est affiché en haut du panneau d'inspection, avec son type de calque (composant, instance, frame, texte, etc.). Vous pouvez également voir quand le calque a été mis à jour pour la dernière fois.
-
E
Tester des variations de composants grâce à l'initiation aux composants
En sélectionnant un composant ou une instance, vous verrez un aperçu du composant, un lien vers le composant principal, ainsi que tous les liens vers les documents pertinents et les ressources pour développeurs.
La fonction Initiation aux composants s'affiche dans le panneau d'inspection lorsqu'une instance de composant est sélectionnée. Utilisez le fichier d'initiation pour expérimenter les différentes propriétés du composant sans changer le design réel.
-
F
Afficher les styles appliqués
Consultez les styles et les variables appliqués au calque sélectionné.
-
G
Télécharger des ressources
Dev Mode peut détecter les icônes automatiquement et les présenter comme des ressources téléchargeables pour les développeurs. Si vous souhaitez inspecter un calque vectoriel individuel contenu dans une icône, vous pouvez désactiver la détection automatique des icônes :
- Cliquez sur Main menu dans la barre d'outils
- Passez le curseur de la souris sur View dans le menu déroulant
- Désélectionnez Automatically detect icons
Les ressources vous permettent également de télécharger les nœuds des images GIF et vidéos MP4.
-
H
Exporter
Vous pouvez exporter les paramètres des calques pour définir le format et tous les autres paramètres d'exportation. Figma prend en charge les formats d'exportation suivants : PNG, JPG, SVG, and PDFEn savoir plus sur les exportations dans Figma→
Annoter
Les designers peuvent utiliser des annotations pour marquer des designs avec du contenu, des spécifications et des mesures supplémentaires. Cela permet aux développeurs de s'assurer de ne pas rater d'informations cruciales pendant le transfert. Utilisez des annotations et des mesures dans Dev Mode pour :
- indiquer des propriétés importantes afin que les développeurs ne les ratent pas ;
- permettre aux développeurs de visualiser rapidement l'espacement et la taille ;
- ajouter du contexte supplémentaire avec des notes textuelles associées directement aux designs.
Découvrir comment ajouter des mesures et annoter les designs dans Dev Mode →
Gérer le transfert dans Dev Mode
En marquant des sections, des frames et des composants comme étant prêts pour le développement, vous pouvez utiliser les vues Prêt pour le développement et Focus de Dev Mode pour vous aider à gérer votre processus de livraison aux développeurs.
-
La vue Prêt pour le développement permet de parcourir facilement tous les designs d'un fichier qui sont marqués comme étant prêts pour le développement. Vous pouvez filtrer et visualiser tous vos designs marqués comme prêts pour le développement. En savoir plus sur la vue Prêt pour le développement et le processus de transfert →
-
La vue Focus affiche les fichiers prêts pour le développement un à un. Vous pouvez utiliser tous vos outils Dev Mode habituels, explorer les calques du design et retrouver des informations importantes telles que l'historique des versions annoté. En savoir plus sur la vue Focus →
Statuts et notifications Dev Mode
Les statuts et les notifications Dev Mode permettent de gérer la livraison aux développeurs. Grâce aux statuts, vous savez quand les sections, les frames ou les composants sont prêts pour le développement. Les notifications sont quant à elles basées sur les changements de statut afin que les développeurs puissent réagir à l'état des designs.
Statuts
Tous les forfaits qui comprennent Dev Mode incluent le statut Ready for Dev. Vous pouvez activer le statut Ready for Dev pour les composants, les frames et les sections afin d'indiquer que le design est prêt pour le développement. Un statut supplémentaire, Completed, est disponible si vous disposez d'un forfait Organisation ou Entreprise.
Pour plus d'informations, notamment sur l'utilisation des statuts, consultez l'article Statuts et notifications Dev Mode.
Notifications
Si vous avez visualisé un fichier en Dev Mode et que vous disposez d'une place complète ou Dev Mode, vous recevrez une notification à chaque fois qu'un design est marqué comme prêt pour le développement dans ce fichier. Vous recevrez également une notification la première fois qu'un design est marqué comme prêt pour le développement, ainsi que lorsque le statut Prêt pour le développement est supprimé et défini à nouveau.
Pour plus d'informations, notamment sur la manière d'activer et de désactiver les notifications Dev Mode, consultez l'article Statuts et notifications Dev Mode.
Utiliser des plugins Dev Mode
Les plugins Dev Mode vous permettent d'automatiser les tâches et de relier d'autres outils à des fins de documentation et de communication. Par exemple :
- Gardez le cap en suivant les tâches de développement et en vous synchronisant avec Jira dans Figma, FigJam et Dev Mode
- Reliez votre design system Figma et votre design system en code avec Storybook
- Liez les designs au code afin qu'ils restent toujours synchronisés, en intégrant Github dans Figma
- Personnalisez la sortie du code (pour Tailwind ou React) ou pour vos propres composants de code
L'onglet Plugins de Dev Mode affiche les plugins que vous avez récemment utilisés, ainsi que les plugins recommandés par la communauté Figma.
Découvrir comment utiliser des plugins dans des fichiers →
Consultez le fichier Plugins for Dev Mode playground pour en savoir plus sur les plugins de Dev Mode.
Figma pour VS Code
Figma pour VS Code vous permet de parcourir et d'inspecter les fichiers de design, de collaborer avec les designers, de suivre les changements de design et d'accélérer l'implémentation du design, le tout sans quitter votre éditeur de texte. Augmentez la productivité des développeurs tout en éliminant le changement de contexte et le travail nécessaire pour transformer les designs en code.
- Suivre et répondre aux commentaires et à l'activité en temps réel
- Obtenir des suggestions de code basées sur les designs
- Associer les fichiers de code aux composants de design