Guide pour le Dev Mode
đźš§Â Le Dev Mode est actuellement en bĂŞta ouverte
Les fonctionnalités bêta peuvent évoluer pendant la bêta. Des bugs ou des problèmes de performances peuvent apparaître durant cette phase. En savoir plus sur les fonctionnalités bêta →
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 :
- Ouvrez un fichier de design Figma.
- Cliquez sur le bouton d'activation du Dev Mode
</>
en haut de la page ou utilisez le raccourci clavier MajD.
Remarque : le Dev Mode s'active automatiquement lorsque vous ouvrez un fichier de design Figma avec un lien Dev Mode.
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,
designersn'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é.
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.
-
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.
-
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 :
- 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.
-
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
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