Guide d'inspection

J'ai le Dev Mode

Pour inspecter les designs, passez en Dev Mode en sélectionnant le bouton Dev Mode à l'aide du raccourci clavier Shift D. À partir de là, vous pouvez utiliser les outils d'inspection suivants :

Mesurer les distances

Vous pouvez mesurer la distance entre plusieurs objets, même s'ils sont imbriqués dans des frames, des groupes ou des composants. En Dev Mode, sélectionnez un calque parent ou enfant sur le plan de travail. Lorsque vous survolez les calques environnants, Figma affiche les valeurs de padding ou les distances entre les deux objets. Vous pouvez également mesurer la distance entre des objets spécifiques :

1. Sélectionnez le premier objet sur le plan de travail.
2. Maintenez la touche de combinaison enfoncée :
   • macOS : ⌥ Option
   • Windows : Alt
3. Passez la souris sur le deuxième objet.

Figma affiche une ligne rouge entre les deux objets, ainsi que des mesures horizontales et verticales.

Générer du code

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 d'extraits de code générés automatiquement pour l'objet.

Pour changer de langue et d'unité, ou utiliser un plugin codegen :

1. En haut à droite de la section Code, sélectionnez une langue ou un plugin dans la liste déroulante.
2. Si nécessaire, 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 →

Afficher les propriétés

En Dev Mode, l'onglet Inspect vous fournit une liste de propriétés des objets sur le plan de travail. Il s'agit de propriétés telles que la mise en page, la couleur, la typographie, les chaînes de texte, les propriétés des composants, les styles et les variables. Pour afficher les propriétés d'un objet :

1. Dans le Dev Mode, sélectionnez un objet sur le plan de travail.
2. Dans l'onglet Inspect de la barre latérale droite, faites défiler jusqu'à la section contenant les propriétés que vous souhaitez examiner.

Explorer les variables

Le Dev Mode offre plusieurs manières de travailler avec des variables lorsque vous inspectez un design :

• Affichez les détails d'une variable, y compris la valeur et le mode. Vous pouvez intervertir les modes et, si la valeur utilise des alias, toute la chaîne d'alias jusqu'à la valeur brute de la variable.
• Obtenez des suggestions de variables pour les valeurs brutes d'un design, si les valeurs correspondent à une ou plusieurs de vos variables existantes.
• Accédez aux collections de variables créées dans le fichier actuel et visualisez toutes les variables et tous les modes dans un tableau.

Pour plus de détails, consultez la section Variables en Dev Mode.

Exporter ou télécharger des ressources

Le Dev Mode peut détecter automatiquement les icônes et les présenter comme des ressources téléchargeables pour les développeurs. Vous verrez ces ressources dans l'onglet Inspect, au-dessus des paramètres d'exportation. Survolez n'importe quel élément, sélectionnez un type de fichier, puis cliquez sur l'icône de téléchargement.

Pour configurer une exportation personnalisée :

1. En Dev Mode, sélectionnez les calques que vous souhaitez exporter.
2. Dans l'onglet Inspect, cliquez sur l'icône plus dans la section Export pour ajouter une configuration d'exportation. Vous pouvez ajouter autant de configurations d'exportation que nécessaire.
3. Configurez les paramètres d'exportation. En savoir plus sur les formats et paramètres d'exportation de Figma →
4. Si nécessaire, cliquez sur Preview pour voir à quoi ressemblera votre ressource. Si vous avez sélectionné plusieurs objets, le paramètre Preview ne s'affiche pas.
5. Cliquez sur Exporter.

Afficher ou ajouter des annotations

Grâce aux annotations, les designers peuvent communiquer directement aux développeurs les détails clés d'un design. Cela permet notamment la mise en évidence des propriétés importantes, la visualisation de l'espacement et de la taille à l'aide de mesures, ou le partage du contexte avec des notes textuelles.

En Dev Mode, les annotations apparaissent sur le plan de travail sous la forme d'un point vert. Cliquez sur une annotation pour révéler son contenu.

Pour ajouter des annotations à un design :

1. Cliquez sur le bouton d'activation du Dev Mode en haut à droite de la barre d'outils ou utilisez le raccourci clavier Maj D.
2. Cliquez sur Annotate dans la barre d'outils ou utilisez le raccourci clavier Maj T.
3. Sélectionnez le calque que vous souhaitez annoter.
4. Ajoutez une note dans le champ de texte, ou cliquez sur + Property pour sélectionner une propriété dans la liste. Vous pouvez inclure du texte simple ainsi que des propriétés dans une annotation.

Pour ajouter une mesure à un design :

1. Cliquez sur Measure dans la barre d'outils ou utilisez le raccourci clavier Maj M.
2. Survolez un calque pour voir les options permettant de commencer une mesure.
3. Cliquez et faites glisser à partir de votre point de départ jusqu'au calque où vous souhaitez que la mesure se termine.
4. Cliquez et faites glisser la mesure de manière à ce qu'elle ne recouvre pas le design.

Utiliser les plugins

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écouvrir comment utiliser des plugins dans des fichiers →

Comparer les modifications

Si une frame ou un composant a été mis à jour depuis votre dernière consultation, vous pouvez comparer son historique de versions. Cela vous permet de suivre les dernières mises à jour et de maintenir l'exactitude du code de production.

Vous pouvez également comparer des composants distincts (ou des instances avec des annulations de design) au composant principal.

1. Sélectionnez une frame ou un composant de premier niveau.
2. Dans l'onglet Inspect dans la barre latérale de droite, cliquez sur Compare changes.

En savoir plus sur la comparaison des modifications dans Dev Mode →