Avant de commencer

À qui est destinée cette fonctionnalité ?

S'applique à toutes les équipes et tous les forfaits

Toute personne bénéficiant de l'accès peut voir peut visualiser les designs en Dev Mode.

Toute personne disposant de l'accès peut voir peut ajouter des liens de ressources de développeur aux composants.

Toute personne bénéficiant d'un accès peut éditer peut créer et marquer des sections comme étant prêtes pour le développement.

 

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

Le Dev Mode vous permet :

• de voir et de copier des propriétés, des valeurs et des codes à partir de composants de design ;
• de repérer ce qui a changé depuis la dernière fois que vous avez consulté un fichier, en comparant des versions de cadre ;
• d'examiner des fichiers de design et de les parcourir grâce à de simples interactions qui permettent d'extraire des informations de calque importantes ;
• de trouver rapidement des designs prêts pour le développement grâce aux statuts des sections ;
• de simplifier votre flux de travail grâce à des intégrations dédiées aux développeurs, comme Jira, Storybook et GitHub ;
• d'ajouter des liens pertinents et des ressources de développeurs aux composants.

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.

Parcourir les designs

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

  Visualiser des sections prêtes pour le développement

  L'icône du Dev Mode indique les pages qui contiennent des sections marquées comme étant prêtes pour le développement. Les sections marquées comme étant prêtes s'affichent sous Ready for development dans le panneau de navigation Dev Mode.

• 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,designers 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

Examiner des designs

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 cadre où vous pouvez comparer la version actuelle aux versions antérieures du design.

  Vous pouvez également comparer un composant détaché au composant principal et effacer son historique de détachement pour éviter de voir les informations à propos du composant d'origine.

  Comparer les changements de cadre 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 canevas 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 canevas et le code généré, ainsi qu'élargir la fonctionnalité des fragments de code.

  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→

Utiliser des extensions du Dev Mode

Les plugins du Dev Mode améliorent le workflow des développeurs en automatisant des tâches, en ajoutant de nouvelles fonctionnalités et en intégrant des outils utilisés pour la documentation et la communication.

• Gardez le cap en suivant les tâches de développement et en vous synchronisant avec Jira dans Figma, FigJam et le Dev Mode
• Connectez 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 à Figma.

L'onglet Plugins dans le Dev Mode montre les plugins que vous avez récemment utilisés, ainsi que les plugins recommandés par la Communauté Figma.

Découvrez comment utiliser des plugins dans des fichiers→

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→