Ajouter des mesures et annoter les designs dans Dev Mode
Cet article est disponible à la fois pour l’ancienne interface utilisateur Figma et la nouvelle interface utilisateur Figma. Utilisez le bouton en bas à gauche de la page pour sélectionner votre interface utilisateur actuelle. Faites connaissance avec UI3 : la nouvelle conception de Figma →
Avant de commencer
Qui peut utiliser cette fonctionnalité
Disponible avec tous les forfaits payants
Toute personne disposant d'une licence Design complète et d'un accès peut éditer pour un fichier peut ajouter des mesures et des annotations.
Toute personne disposant d'une licence Design complète ou d'une licence Dev Mode et ayant au moins un accès peut voir pour un fichier peut visualiser les mesures et les annotations.
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 modifications des annotations en temps réel lorsqu'ils travaillent dans Dev Mode, ce qui leur permet de ne pas manquer d'informations cruciales pendant le transfert.
Astuce : en Design Mode, vous serez notifié lorsque de nouvelles annotations auront été ajoutées à un fichier. Cliquez sur le point situé à côté du design et sélectionnez Afficher les annotations en Dev Mode pour voir les annotations mises à jour en Dev Mode.
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 :
- Cliquez sur le bouton d'activation du Dev Mode en haut à droite de la barre d'outils ou utilisez le raccourci clavier Maj D.
- Cliquez sur Measure dans la barre d'outils ou utilisez le raccourci clavier Maj M.
- Survolez un calque pour voir les options permettant de commencer une mesure.
- Cliquez et faites glisser à partir de votre point de départ jusqu'au calque où vous souhaitez que la mesure se termine.
- Cliquez et faites glisser la mesure de manière à ce qu'elle ne recouvre pas le design.
Astuce : pour supprimer une mesure, cliquez dessus et appuyez sur la touche Supprimer ou Retour arrière.
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 :
- Cliquez sur le bouton d'activation du Dev Mode en haut à droite de la barre d'outils ou utilisez le raccourci clavier Maj D.
- Cliquez sur Annotate dans la barre d'outils ou utilisez le raccourci clavier Maj T.
- Sélectionnez le calque que vous souhaitez annoter.
- 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.
Astuce : avec le plugin API, les équipes peuvent concevoir des plugins Dev Mode personnalisés pour créer et gérer les annotations de manière groupée.
Cacher les annotations
Par défaut, toutes les annotations sur un fichier Figma Design sont visibles dans Dev Mode. Pour masquer les annotations :
- Cliquez sur Menu principal dans la barrre d'outils.
- Passez le curseur de la souris sur View dans le menu déroulant.
- Désélectionnez Annotations.
Astuce : pour supprimer une annotation, cliquez dessus et appuyez sur la touche Supprimer ou Retour arrière.
Avant de commencer
Qui peut utiliser cette fonctionnalité
Disponible avec tous les forfaits payants
Toute personne disposant d'une licence Design complète peut éditer des annotations dans Dev Mode
Toute personne disposant d'une licence Dev Mode peut voir les annotations dans 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 dans Dev Mode, ce qui leur permet de ne pas manquer d'informations cruciales pendant le transfert.
Astuce ! En Design Mode, vous serez notifié lorsque de nouvelles annotations auront été ajoutées à un fichier. Cliquez sur le point situé à côté du design et sélectionnez Afficher les annotations en Dev Mode pour voir les annotations mises à jour en Dev Mode.
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 :
- Cliquez sur le bouton d'activation du Dev Mode en haut à droite de la barre d'outils ou utilisez le raccourci clavier Maj D.
- Cliquez sur Measure dans la barre d'outils ou utilisez le raccourci clavier Maj M.
- Survolez un calque pour voir les options permettant de commencer une mesure.
- Cliquez et faites glisser à partir de votre point de départ jusqu'au calque où vous souhaitez que la mesure se termine.
- Cliquez et faites glisser la mesure de manière à ce qu'elle ne recouvre pas le design.
Astuce ! Pour supprimer une mesure, cliquez dessus et appuyez sur la touche Supprimer ou Retour arrière.
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 :
- Cliquez sur le bouton d'activation du Dev Mode en haut à droite de la barre d'outils ou utilisez le raccourci clavier Maj D.
- Cliquez sur Annotate dans la barre d'outils ou utilisez le raccourci clavier Maj T.
- Sélectionnez le calque que vous souhaitez annoter.
- 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.
Astuce : avec le plugin API, les équipes peuvent concevoir des plugins Dev Mode personnalisés pour créer et gérer les annotations de manière groupée.
Cacher les annotations
Par défaut, toutes les annotations sur un fichier Figma Design sont visibles dans Dev Mode. Pour masquer les annotations :
- Cliquez sur Menu principal dans la barrre d'outils.
- Passez le curseur de la souris sur View dans le menu déroulant.
- Désélectionnez Annotations.
Astuce ! Pour supprimer une annotation, cliquez dessus et appuyez sur la touche Supprimer ou Retour arrière.