Le Dev Mode dans Figma vous offre tout ce dont vous avez besoin pour parcourir les fichiers de design et transformer des designs en code. Grâce au Dev Mode, les designers et les développeurs peuvent rester sur la même page, garantissant ainsi que des détails importants ne sont pas perdus durant le processus de transfert.

Les développeurs utilisent le 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 frame ;
• d'examiner rapidement les designs qui sont prêtes 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 du Dev Mode

Le Dev Mode est une interface dédiée aux développeurs qui permet d'examiner des designs et de les parcourir. Vous pouvez accéder au Dev Mode dans n'importe quel fichier de design Figma. Pour passer du Design Mode au Dev Mode :

1. Ouvrez un fichier de design Figma.
2. Cliquez sur le bouton d'activation du Dev Mode en haut de la page ou utilisez le raccourci clavier MajD.

Navigation

Dans le 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 du 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 du Dev Mode.

  Pour marquer une ressource prête pour le développement :

  1. En 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.
• B

  Déterminer la dernière fois qu'un cadre a été modifié

  Vous pouvez voir quand un cadre a été modifié pour la dernière fois sous le nom du cadre, dans le panneau de navigation.

• C

  Parcourir les cadres et les calques

  En 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. Le Dev Mode donnera 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 un cadre dans la barre latérale gauche pour le centrer sur le canevas. Sélectionnez le cadre sur le canevas pour voir les calques qui y sont imbriqués. La sélection d'un cadre change le panneau de navigation en un panneau des calques et affiche uniquement les calques pour le cadre supérieur actuellement sélectionné.

  Parcourir les cadres et les calques dans le Dev Mode ->1

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 du 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 le 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 le Dev Mode →

• C

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

  Cliquez sur n'importe quel objet du plan de travail en 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 fragments 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 :

  1. En haut à droite de la section Code, sélectionnez une langue dans la liste déroulante.
  2. Cliquez sur Inspect settings et sélectionnez une unité dans la liste déroulante.

  Découvrir comment utiliser des fragments de code dans le 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, cadre, 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

  Afficher les styles et variables appliqués au calque sélectionné.

• G

  Télécharger des ressources

  Le 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.

• E

  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 le 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 le 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 le 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 du 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 du 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.

• Suivez et répondez aux commentaires et à l'activité en temps réel
• Obtenez des suggestions de code basées sur les designs
• Associez les fichiers de code aux composants de design

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