Vue Focus de Dev Mode

Lorsque vous utilisez la Vue Prêt pour le développement de Dev Mode pour explorer les sections, les cadres et les composants prêts pour le développement, vous souhaitez souvent examiner de plus près des designs spécifiques. Pour obtenir des détails sur les designs prêts à être développés, utilisez la vue Focus de Dev Mode. La vue Focus vous permet d'obtenir les éléments suivants :

• Les mêmes outils que ceux dont vous disposez normalement dans la barre d'outils de Dev Mode.
• Les mêmes onglets Inspect (Inspecter) et Plugins que ceux auxquels vous avez accès dans l'expérience complète de Dev Mode.
• Un historique des versions avec des descriptions spécifiques au design que vous visualisez, que vous pouvez utiliser pour comparer différentes versions et voir les changements au fil du temps.
• Un moyen facile d'étendre et d'explorer les claques d'un design donné qui est prêt à être développé.
• La possibilité de marquer le travail comme terminé pour un design spécifique.

Pour accéder à la vue Focus :

1. Ouvrez un fichier Figma design.

2. Cliquez sur Ready for dev (Prêt pour le développement) dans la barre latérale gauche.

   La vue Prêt pour le développement s'ouvre et affiche une liste de tous les designs marqués d'un statut de développement.

3. Cliquez sur le design sur lequel vous souhaitez vous concentrer.

Alternativement :

1. Ouvrez un fichier Figma design.

2. Dans le plan de travail, pour le design sur lequel vous souhaitez mettre l'accent, cliquez sur le statut de développement et sélectionnez Show in focus view (Afficher dans la vue Focus).

   

3. En option, cliquez sur Copy link to focus view (Copier le lien vers la vue Focus) pour obtenir un lien vers le design en focus que vous pouvez partager avec d'autres personnes.

La vue Focus s'ouvre et affiche les éléments suivants :

• Le design que vous vouliez inspecter apparaît au centre de la vue Focus. Vous pouvez utiliser vos outils Dev Mode pour mesurer, annoter et commenter le design.
• Les onglets Inspect (Inspecter) et Plugins, qui permettent de générer du code, d'afficher les propriétés du design, d'exporter ou de télécharger divers éléments et d'exécuter des plugins pour Dev Mode.
• Le bouton Mark as completed, que vous utilisez pour confirmer que le travail de développement pour le design est terminé.

Navigation

Dans la vue Focus, Figma propose quelques moyens de naviguer vers d'autres zones de Dev Mode.

Pour accéder à la vue Prêt pour le développement, cliquez sur Ready for dev (Prêt pour le développement) dans le coin supérieur gauche de la vue Focus.

Pour voir le design dans le contexte du plan de travail, dans le coin supérieur droit de la vue Focus, cliquez sur puis sélectionnez Show on page (Afficher sur la page).

Pour revenir à la zone de l'interface Figma que vous utilisiez avant d'entrer dans la vue Focus, dans le coin supérieur droit de la vue Focus, cliquez sur . Si vous êtes entré dans la vue Focus à partir du plan de travail, vous revenez à la position que vous occupiez sur le plan de travail. Si vous êtes entré à partir de la vue Prêt pour le développement ou en utilisant un lien, vous êtes renvoyé à la vue Prêt pour le développement.

Explorer les calques

La vue Focus permet d'explorer facilement les différents calques d'un design donné. Le panneau des calques de la vue Focus apparaît lorsque vous sélectionnez une ou plusieurs parties du design.

Panneaux Inspect (Inspecter) et Plugins

Les panneaux Inspect (Inspecter) et Plugins sont les mêmes que ceux de l'expérience Dev Mode normale, mais leur portée est limitée au design que vous visualisez. Pour savoir comment utiliser ces panneaux, consultez le Guide du Dev Mode →

Historique des versions

Tout comme l'historique des versions disponible pour les fichiers, la vue Focus comprend un historique des versions annoté qui permet de suivre les itérations du travail sur le design.

Normalement, l'historique des versions de l'ensemble du fichier vous montre toutes les versions d'un fichier, mais il y a souvent beaucoup d'activité et vous vous intéressez surtout à ce qui a été modifié dans un cadre ou une section spécifique que vous êtes en train de réviser et d'implémenter. L'historique des versions dans la vue Focus vous montre les versions et fonctionne de la même manière que l'historique de l'ensemble du fichier, mais il est limité aux versions qui affectent le design spécifique que vous avez ouvert dans la vue Focus.

Au fur et à mesure que les designers et les développeurs travaillent sur un design, ils mettent à jour le statut et ajoutent des notes pour décrire les changements. Chaque mise à jour de statut entraîne l'ajout d'une annonce dans l'historique des versions. Vous pouvez également comparer différentes versions afin d'identifier les changements entre chaque itération.

Vous pouvez consulter les anciennes versions, copier un lien vers cette version particulière ou la comparer à la dernière version présente dans votre fichier. En savoir plus sur la comparaison dans Dev Mode →

Marquer comme terminé

Pour montrer que le travail de développement d'un design est terminé, utilisez le bouton Mark as completed (Marquer comme terminé) en haut de la vue Focus.

Lorsqu'un design est marqué comme terminé, une nouvelle entrée est ajoutée à l'historique des versions, et le design reste disponible dans la vue Prêt pour le développement pour les itérations ultérieures.