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 :

1. Ouvrez un fichier Figma Design.
2. Cliquez sur le bouton d’activation du Dev Mode ou utilisez le raccourci clavier ShiftD.

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 :

  1. Dans Dev Mode, sélectionnez une frame, un composant, une instance ou une section.
  2. 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.

  Parcourir les frames et les calques dans Dev Mode ->

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.

  Ajouter des liens de ressources aux calques dans Dev Mode →

C

Accélérer la création grâce aux fragments de code personnalisables

• 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 :

  1. Cliquez sur Main menu dans la barre d'outils
  2. Passez le curseur de la souris sur View dans le menu déroulant
  3. 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

En savoir plus sur l'extension Figma pour VS Code→