Nouveautés du Dev Mode
Depuis l'annonce du Dev Mode à la Config 2023, nous avons travaillé aux côtés de nos clients pour créer un outil facilitant le transfert. Le 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 au Dev Mode
Le 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 au 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 :
- Accélérez la préparation du transfert grâce aux 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 cadres
- 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 du Dev Mode →
Découvrez comment obtenir le Dev Mode
La version bêta gratuite du 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 au Dev Mode dépend de votre Forfait Équipe ou Organisation, si votre équipe ou votre organisation possède le fichier, et de la place dont vous disposez. L'accès au 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 place Design ou une place Dev Mode complète dans leur équipe ou organisation. Découvrez nos recommandations relatives à la collaboration avec les clients dans Figma →
Mettre à niveau vers une place payante
Pour mettre à niveau vers une place payante et continuer à utiliser le Dev Mode, cliquez sur Obtenir le Dev Mode dans la bannière en haut de votre fichier dans le Dev Mode. Puis suivez les instructions pour mettre à niveau votre forfait ou demandez une place.
Remarque : toutes les mises à niveau vers le Dev Mode sur les forfaits payants nécessiteront une approbation de l'administrateur. Pour éviter toute interruption immédiate de votre workflow, vous pouvez continuer à utiliser le Dev Mode pendant une période maximale de 14 jours en attendant l'approbation.
En savoir plus sur la gestion des places Dev Mode en tant qu'administrateur →
Choisir la place adaptée à votre situation
Si vous ne voulez pas mettre à niveau vers le Dev Mode, vous pouvez toujours inspecter et collaborer sur les designs. 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 modification.
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 cadres
-
B
Exporter 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 cadres |
✓ |
✓ |
Exporter 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 |
✓ |
|
✓ |
|
|
✓ |
|