Ajouter des mesures et annoter les designs dans le Dev Mode

Avant de commencer

Qui peut utiliser cette fonctionnalité

Disponible dans tous les abonnements payants

Toute personne disposant d'une place design complète peut éditer des annotations dans le Dev Mode

Toute personne disposant d'une place Dev Mode peut voir les annotations dans le Dev Mode

Créez des transferts plus rapides et plus transparents avec des annotations et des mesures qui restent à jour, même lorsque les designs changent.

Grâce aux annotations, les designers peuvent communiquer et relier les détails clés directement aux designs :

• Mettre en évidence les propriétés importantes pour que les développeurs ne passent pas à côté
• Aider les développeurs à visualiser rapidement les spécifications telles que l'espacement et la taille
• Partager du contexte supplémentaire avec des notes textuelles

Les développeurs peuvent voir les annotations des designers en temps réel lorsqu'ils travaillent en Dev Mode, ce qui leur permet de ne pas manquer d'informations cruciales pendant le transfert.

Ajouter des mesures à un design

L'ajout de mesures aide les développeurs à visualiser rapidement l'espacement et la taille.

Pour ajouter une mesure à 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 Measure dans la barre d'outils ou utilisez le raccourci clavier Maj M.
3. Passez le curseur sur un calque pour afficher les options permettant de commencer la mesure.
4. Cliquez et faites glisser à partir de votre point de départ jusqu'au calque où vous souhaitez que la mesure se termine.
5. Cliquez et faites glisser la mesure de manière à ce qu'elle ne recouvre pas le design.

Ajouter des annotations à un design

Les designers peuvent ajouter des annotations pour fournir du contexte, définir des propriétés de design ou communiquer d'autres informations pertinentes aux développeurs pour transformer le design en code. Il est possible d'annoter à la fois du texte libre et des propriétés définies, telles que le sens de l'alignement ou la taille. Même si les designs sont mis à jour par la suite, les propriétés d'annotations restent à jour et précises, garantissant que rien ne soit perdu dans la traduction.

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.

Cacher les annotations

Par défaut, toutes les annotations sur un fichier Figma design sont visibles en Dev Mode. Pour cacher les annotations :

1. Cliquez sur Menu principal dans la barrre d'outils.
2. Passez le curseur de la souris sur View dans le menu déroulant.
3. Désélectionnez Annotations.