Dev Mode permet aux développeurs de connaître la date de la dernière modification d'une frame ou d'un composant et de comparer les modifications effectuées à différentes étapes de l'historique des versions. Comme le transfert entre les phases de design et de développement est souvent itératif, pouvoir comparer les modifications et les versions permet de clarifier le processus. Grâce à la fonctionnalité de comparaison des modifications, vous pouvez suivre les dernières mises à jour et disposer des codes de production exacts à tout moment.

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. Vous pouvez également comparer des composants distincts ou des instances avec des annulations de design par rapport au composant de base. 

1. Sélectionnez une frame ou un composant de premier niveau.

   Astuce : maintenez la touche Maj enfoncée tout en sélectionnant deux composants à comparer sur le plan de travail.

2. Dans l'onglet Inspect dans la barre latérale de droite, cliquez sur Compare changes.

• A

  Historique des versions

  Visualisez la chronologie de l'historique du fichier, y compris les versions enregistrées et enregistrées automatiquement. Cliquez sur une version précédente pour la comparer à la version actuelle. L'historique des versions n'est visible que lors de la comparaison d'une frame de premier niveau dans le temps.

• B

  Afficher les calques modifiés

  Sous Layers, vous pouvez voir comment le calque individuel d'une ressource a évolué dans le temps. Les modifications de calques sont identifiées selon les catégories suivantes :

  • Modifié : le calque a été modifié entre la version actuelle et la version sélectionnée
  • Ajouté : le calque a été ajouté entre la version actuelle et la version sélectionnée
  • Supprimé : le calque a été supprimé entre la version actuelle et la version sélectionnée

  Cliquer sur un calque de la liste permet de zoomer sur le calque sélectionné dans la vue côte à côte ou superposée.

• C

  Côte à côte

  Une vue côte à côte de la version sélectionnée et de la version actuelle d'une ressource. Ajustez les paramètres du zoom modal à l'aide des boutons de zoom avant et zoom arrière situés à droite.

• D

  Superposée

  Une vue superposée de la version actuelle de la frame sur la version sélectionnée est utile pour faire ressortir les petites modifications. Utilisez le curseur de droite pour ajuster la transparence de la frame actuelle ou cliquez sur pour basculer entre les vues. Ajustez les paramètres du zoom modal à l'aide des boutons de zoom avant et zoom arrière situés à droite.

• E

  Comparer les codes

  Lorsque vous sélectionnez un calque modifié, vous pouvez visualiser le code mis à jour en comparant l'ancienne version et la version actuelle. Cette fonction est utile pour vous assurer que votre base de code correspond aux designs les plus récents.

  Utilisez la liste déroulante pour sélectionner le langage souhaité pour le panneau de code, puis cliquez sur pour sélectionner l'unité souhaitée.

  En savoir plus sur l'utilisation d'extraits de code dans Dev Mode →

• F

  Comparer les propriétés

  Lorsque vous sélectionnez un calque modifié, les propriétés mises à jour ainsi que les valeurs attribuées de la version précédente et de la version actuelle s'affichent.

Comparer les modifications dans la vue Focus

Lorsque vous vous concentrez sur un design dans Dev Mode, vous pouvez tirer parti de l'historique des versions dans la vue Focus pour comparer les modifications. L'interface est alors la même que celle détaillée dans Comparer les modifications.

Pour comparer les modifications en vue Focus :

1. Ouvrez un fichier Figma Design.
2. Sur le plan de travail, pour le design sur lequel vous souhaitez mettre l'accent, cliquez sur l'indicateur du statut de développement et sélectionnez Show in Focus view.Tant que rien n'est sélectionné, la vue Focus affiche l'historique des versions sur le côté droit de la vue.
3. Pour la version que vous souhaitez comparer à la dernière, cliquez sur … et sélectionnez Compare to latest version.
   
4. Si vous le souhaitez, vous pouvez obtenir un lien vers la vue Focus à partager avec d'autres en cliquant sur Copy link.

En savoir plus sur la vue Focus →