Parcourir les designs dans le Dev Mode
🚧 Le Dev Mode est prêt pour le déploiement
Le Dev Mode dans Figma offre aux développeurs tout ce dont ils ont besoin pour transformer des designs en code. À compter du 31 janvier, il faudra une place payante pour accéder au Dev Mode.
Avant de commencer
Qui peut utiliser cette fonctionnalité
Inclus dans une place Design complète pour les forfaits Professionnel, Organisation et Entreprise.
Toute personne ayant un accès au Dev Mode peut utiliser les fonctions du Dev Mode.
L'activation du Dev Mode modifie l'interface d'un fichier de design Figma. Dans le Dev Mode, la barre latérale gauche permet de parcourir facilement les designs disponibles et d'identifier les sections prêtes pour le développement.
-
A
Rechercher
Utilisez le champ Rechercher pour trouver un composant spécifique. Figma recherche alors des objets dans le fichier actuel, ainsi que dans toutes les bibliothèques auxquelles vous avez accès.
- Cliquez dans la barre latérale gauche ou utilisez le raccourci clavier suivant pour ouvrir la barre de recherche :
- Mac :Commande f
- Windows :Ctrl f
- Saisissez le texte ou le nom de calque que vous souhaitez trouver. Les résultats de la recherche apparaissent automatiquement au fur et à mesure que vous tapez.
- Vous pouvez afficher les résultats pour la page actuelle ou pour toutes les pages.
- Cliquez sur Paramètres afin d'ajouter des filtres de recherche en fonction des types de calque (texte, cadre, forme, etc.).
- Utilisez et pour parcourir vos résultats.
- Dans le menu Paramètres, cliquez sur Autre pour rechercher un autre élément, tel que des noms de widget ou de tranche.
- Cliquez sur le résultat pour accéder au calque dans le canevas.
- Pour revenir au panneau de navigation, cliquez sur ou appuyez sur Échap.
- Cliquez dans la barre latérale gauche ou utilisez le raccourci clavier suivant pour ouvrir la barre de recherche :
-
B
Pages
L'icône du Dev Mode indique les pages qui contiennent des sections marquées comme étant prêtes pour le développement. Les sections marquées comme étant prêtes s'affichent sous Ready for development dans le panneau de navigation Dev Mode.
-
C
Sections comportant la mention Ready for development
L'icône du Dev Mode indique les pages qui contiennent des sections marquées comme étant prêtes pour le développement. Les sections marquées comme étant prêtes s'affichent sous Ready for development dans le panneau de navigation Dev Mode.
-
D
Calques
L'icône du Dev Mode indique les pages qui contiennent des sections marquées comme étant prêtes pour le développement. Les sections marquées comme étant prêtes s'affichent sous Ready for development dans le panneau de navigation Dev Mode.
En survolant les calques sur le canevas avec le curseur, vous pouvez obtenir plus d'informations sur leur mise en page, telles que la taille, le remplissage et l'espacement.
Lorsqu'un cadre de premier niveau est sélectionné, vous pouvez utiliser les touches fléchées droite et gauche ou cliquer sur les flèches à l'écran pour passer d'un cadre à l'autre sur la page.