Le Dev mode dans Figma, ce qu'il faut savoir

Le Dev Mode est un espace dédié aux développeurs sur Figma.Les Designers et développeurs travaillent dans des espaces distincts, mais au sein du même fichier.Cela permet entre autre aux développeurs d’avoir les informations en direct, en supprimant des échanges ou mises à jours supplémentaires.

• Inspecter les composants et obtenir des guidelines précises : Permet d’obtenir en détail les caractéristiques des composants et des interfaces (dimensions, espacements, styles, ressources).L’intégration des tokens dans Figma, permet aussi de créer plus de fluidité dans la collaboration dev/ designers.
  ‍
• Optimiser les workflows : Le Dev Mode donne la possibilité de suivre en temps réel les écrans prêt à être développés, de ceux en cours de conception.
  ‍
• Comparer les modifications : Si des modifications ont été apportées, il est maintenant possible de comparer le nouveau design de l’ancien.
  ‍
• Exporter et personnaliser le code : Il est possible de copier du code depuis Figma (CSS, HTML, mais aussi du code IOS ou Android). Des plugins existent pour personnaliser l’aspect du code.
  ‍
• Ajouter des liens externes et des ressources pour les développeurs : Les concepteurs et les développeurs peuvent ajouter des liens vers des ressources externes susceptibles de faciliter la mise en œuvre d'un composant. Cela peut inclure des liens GitHub, Jira et Storybook. Les ressources de développement ajoutées aux composants se propagent à toutes les instances de ce composant.

Ce qui sera inclu dans la version gratuite :

• Mesurer les espacements et les propriétés des composants
• Copier le CSS, IOS ou Android Code
• Exporter les assets
• Commenter

‍

Ce que comprend la version payante (25€/mois)

• Faciliter la visualisation des espacements
• Être notifié et tracker les modifications Design
• Personnaliser la sortie du code
• Documenter le Figma avec des spécifications dev
• Synchroniser Figma avec la base de code
• Permet d'avoir l'ensembles des variants pensés en Design au sein du même espace "Playground"
• Visualiser les variables et tokens

‍

Pour qui la version payante est intéressante ?

• Si vos développeurs conçoivent en Design System. 
  Le Dev Mode permet de créer une réelle passerelle entre les composants Design et les composants développés et de relier les 2 outils de manières très étroite.
• Si vous avez un gros flux d'écran : pour pouvoir facilement savoir quels écrans sont prêts à être développés
• Si vous avez des composants complexes avec beaucoup de propriétés
• Si le Design pense avec des variables

Retrouvez l'article complet de Figma : https://www.figma.com/fr/dev-mode/