Nouveautés Dev Mode
Depuis l'annonce de Dev Mode à la Config 2023, nous avons travaillé aux côtés de nos clients pour créer un outil facilitant le transfert. Dev Mode ouvre un nouveau chapitre et nécessite désormais une place payante pour y accéder. Ce changement s'accompagne de nouvelles fonctions et améliorations qui vous permettront de travailler plus rapidement, d'améliorer la collaboration et de personnaliser les workflows.
Ajout de nouvelles fonctions à Dev Mode
Dev Mode dans Figma offre aux développeurs tout ce dont ils ont besoin pour naviguer dans les fichiers de design et transformer les designs en code. Grâce à Dev Mode, les concepteurs et les développeurs peuvent rester sur la même longueur d'onde et s'assurer que les détails importants ne sont pas perdus au cours du processus de transfert.
Nous proposons également de nouvelles fonctions et améliorations Dev Mode :
- Préparation plus rapide du transfert avec des annotations dans Dev Mode qui restent toujours actualisées avec les designs
- Navigation améliorée et possibilité d'exécuter des plugins dans Figma pour VS Code
- Nouvelle fenêtre modale permettant de comparer les modifications afin que vous puissiez voir les différences dans le code et entre deux frames
- Exécution automatique des plugins pour vous-même… ou pour l'ensemble de votre organisation (forfait Entreprise uniquement)
En savoir plus sur les fonctions de Dev Mode →
Découvrez comment obtenir Dev Mode
La version bêta gratuite de Dev Mode a pris fin le 31 janvier et nécessite maintenant une place payante au sein d'une équipe ou d'une organisation. Votre accès à Dev Mode dépend de votre forfait Équipe ou Organisation, si votre équipe ou votre organisation possède le fichier, et de la licence dont vous disposez. L'accès à Dev Mode, comme nos autres types de places, est octroyé à une équipe ou à une organisation plutôt qu'à un compte.
- Version gratuite : non disponible
- Forfait Professionnel : disponible uniquement avec une place Design complète
- Forfait Organisation : disponible avec une place Design complète ou en tant que place autonome pour 25 $/mois
- Forfait Entreprise : disponible avec une place Design complète ou en tant que place autonome pour 35 $/mois
Les utilisateurs de la version gratuite et les spectateurs de fichiers peuvent continuer à afficher les propriétés et les mesures, à copier le code et à exporter les ressources depuis le Design Mode.
Remarque : si vous êtes freelance ou une agence et que vous travaillez sur un fichier au sein de l'équipe ou de l'organisation de votre client, vous devrez demander une licence Design complète ou Dev Mode dans leur équipe ou organisation. En savoir plus sur nos conseils pour la collaboration avec les clients dans Figma →
Mettre à niveau vers une place payante
Pour mettre à niveau vers une place payante et continuer à utiliser Dev Mode, cliquez sur Get Dev Mode dans la bannière en haut de votre fichier dans Dev Mode. Puis suivez les instructions pour mettre à niveau votre forfait ou demandez une licence
Remarque : toutes les mises à niveau vers Dev Mode sur les forfaits payants nécessitent une approbation de l'administrateur. Pour éviter toute interruption immédiate de votre workflow, vous pouvez continuer à utiliser Dev Mode en attendant l'approbation.
En savoir plus sur la gestion des licences Dev Mode en tant qu'administrateur →
Choisir la place adaptée à votre situation
Si vous ne voulez pas mettre à niveau vers Dev Mode, vous pouvez toujours inspecter les designs et y collaborer. En tant que spectateur en Design Mode, vous pouvez inspecter les valeurs des propriétés et les détails des frames, exporter des ressources, copier des extraits de code CSS, iOS et Android, mais aussi mesurer et annoter les designs à l'aide d'une touche de combinaison.
Dev Mode
-
A
Possibilités d'inspection avancées et plugins personnalisés
-
B
Comparer les modifications entre les versions et associer les ressources des développeurs pour un meilleur transfert
-
C
Autres langages de codegen
Afficher l'accès dans Design Mode
-
A
Inspecter les valeurs des propriétés et les détails des frames
-
B
Exportez les ressources
-
C
Copier le codegen CSS, iOS et Android en tant que code à partir du menu copier/coller lorsque vous faites un clic droit sur un calque
Voici quelques-unes des autres différences clés entre ce que vous pouvez obtenir en Dev Mode et en tant que spectateur dans un fichier de design :
|
Ce que vous pouvez faire |
Disponible en Dev Mode | Disponible pour les spectateurs en Design Mode |
|---|---|---|
|
Afficher l'espacement et les mesures |
Au survol |
Via la touche de modification |
|
Afficher les valeurs des propriétés et les détails des frames |
✓ |
✓ |
|
Exportez les ressources |
✓ |
✓ |
|
Afficher le codegen CSS, iOS et Android |
✓ |
✓ |
|
✓ |
|
|
|
Utiliser des annotations pour ajouter des informations et des mesures aux fichiers |
✓ |
|
|
✓ |
|
|
|
✓ |
|
|
|
Utiliser des intégrations axées sur les développeurs comme Jira, Storybook et GitHub |
✓ |
|
|
Explorer les composants du design system dans une initiation |
✓ |
|
|
✓ |
|
|
|
✓ |
|