Designer and developer workflows unlocked using Dev Mode - Jake A, Avantika G, Lauren A, Jenny L

Summary

Le script présente la nouvelle fonctionnalité Dev Mode de Figma, un outil de conception de produits qui permet aux développeurs et concepteurs de travailler ensemble de manière plus efficace. Grâce à des outils comme les sections, les ressources de développement et les plugins pour la génération de code, Dev Mode offre une vision organisée des fichiers de conception, facilite la compréhension des modifications récentes et offre des moyens de personnaliser l'expérience en fonction des besoins spécifiques des développeurs.

Takeaways

• 🌟 Dev mode est une nouvelle fonctionnalité de Figma conçue pour combler l'écart entre la conception et le développement.
• 🔗 Il permet aux développeurs d'accéder à leurs outils habituels directement depuis Figma et d'utiliser des plugins pour personnaliser leur vue.
• 📦 Sections ont été introduits pour organiser les écrans de manière plus digeste sur l'Infinite Canvas de Figma.
• 🏷️ Les sections peuvent être marquées comme 'prêtes pour le développement' (ready for Dev) et affichées en premier dans le panneau de calques en mode Dev.
• 🔍 Le mode Dev offre une vue optimisée pour les développeurs, avec des informations de navigation et de statut plus claires.
• 📈 La fonctionnalité 'Compare changes' permet de voir non seulement quand une modification a été apportée, mais aussi ce qui a changé précisément.
• 🎨 Plugins pour code generation sont disponibles, offrant des snippets de code plus pertinents et personnalisables selon les besoins spécifiques du développement.
• 🔗 Dev resources permettent de lier des ressources externes, telles que du code source ou de la documentation, à des couches spécifiques dans Figma.
• 👥 Multiplayer et cursor chat sont également disponibles en mode Dev, permettant une collaboration en temps réel entre les membres de l'équipe.
• 🔗 Des plugins spécifiques à Dev mode, comme le plugin Jira, permettent de créer des tickets directement à partir de conceptions marquées comme prêtes pour le développement.
• 💻 Figma est intégré à Visual Studio Code, permettant aux développeurs d'utiliser les fichiers Figma directement dans leur environnement de développement.
• 🚀 Dev mode sera en bêta publique pendant plusieurs mois, et l'équipe de Figma encourage les retours d'expérience pour améliorer la fonctionnalité.

Q & A

Qu'est-ce que le mode Dev et comment il aide les développeurs à travailler avec Figma?

Le mode Dev est une nouvelle fonctionnalité de Figma conçue pour combler le fossé entre la conception et le développement. Il offre de nouvelles façons de connecter les outils de développement préférés des développeurs tout en personnalisant leur vue pour mieux répondre à leurs besoins. Cela comprend des mises à jour de l'inspecteur de code, des plugins pour la génération de code, des ressources de développement et des améliorations apportées aux sections et au panneau de calques.

Comment les sections améliorent-elles l'organisation des fichiers dans Figma?

Les sections aident à organiser les écrans de manière logique et cohérente dans le canevas infini de Figma. Elles permettent de regrouper les écrans connexes ensemble, facilitant ainsi la navigation et la compréhension de l'ensemble du projet. De plus, les sections peuvent être marquées comme prêtes pour le développement (ready for Dev), ce qui les place en haut du panneau de calques et offre des aperçus en miniature pour une visualisation plus facile des frames qu'elles contiennent.

Quels sont les défis courants auxquels les développeurs sont confrontés lors de l'utilisation de Figma et comment le mode Dev les résout-il?

Les développeurs ont souvent du mal à comprendre ce qu'ils voient dans Figma, étant donné que c'est principalement conçu pour les concepteurs. Le mode Dev résout cela en offrant une vue curée spécifiquement pour les développeurs, en réduisant l'incertitude et en fournissant une meilleure compréhension des modifications apportées, en améliorant la sélection d'éléments et la détection d'icônes, et en rapprochant la conception et le code grâce à des plugins pour la génération de code.

Comment le mode Dev aide-t-il à réduire le temps passé à effectuer des tâches manuelles pour les développeurs?

Le mode Dev offre des outils pour automatiser certaines tâches manuelles, tels que la sélection d'éléments, la détection d'icônes et la conversion de conceptions en code. Il permet également d'utiliser des plugins pour générer du code directement dans Figma, ce qui réduit considérablement le temps et les efforts nécessaires pour transférer des designs en code fonctionnel.

Quelle est la fonctionnalité 'Compare Changes' et comment elle est-elle utile pour les développeurs?

La fonctionnalité 'Compare Changes' permet aux développeurs de voir non seulement quand une modification a eu lieu, mais aussi ce qui a changé précisément. Elle offre une comparaison side-by-side ou superposée des modifications, montrant les ajouts, les suppressions et les modifications de propriétés détaillées, ce qui est extrêmement utile pour comprendre exactement ce qui a été modifié dans le design et éviter les erreurs de développement.

Comment les plugins pour la génération de code fonctionnent-ils dans le mode Dev?

Les plugins pour la génération de code sont des extensions qui s'intègrent dans le mode Dev et permettent aux développeurs de générer du code directement à partir des designs de Figma. Ils peuvent être utilisés pour produire des snippets de code plus pertinents pour un certain langage de programmation, adapter les conventions de codage spécifiques à une équipe et offrir une personnalisation avancée pour répondre aux besoins des développeurs.

Quels sont les avantages de l'utilisation de 'Dev Resources' dans Figma?

Les 'Dev Resources' sont des liens vers d'autres ressources pertinentes qui peuvent être attachés à des couches spécifiques dans un fichier Figma. Ils permettent aux développeurs d'accéder directement à du code source, de la documentation en ligne ou d'autres fichiers Figma pertinents sans quitter Figma, ce qui minimise les changements de contexte et améliore l'efficacité du processus de développement.

Comment l'intégration de Figma dans VS Code peut-elle améliorer le workflow de développement?

L'intégration de Figma dans VS Code permet aux développeurs d'avoir accès à leurs fichiers Figma directement dans leur environnement de développement préféré. Cela leur évite de passer continuellement d'une fenêtre à l'autre et leur offre des fonctionnalités telles que la visualisation des commentaires, la gestion des tâches via des plugins et l'auto-completion du code CSS généré par Figma, ce qui accélère considérablement le processus de développement.

Quelle est la nouvelle fonctionnalité qui permet de relier les designs à leur implémentation en code?

La nouvelle fonctionnalité qui permet de relier les designs à leur implémentation en code est l'utilisation de 'Dev Resources' pour créer des liens entre les parties du design et leur code correspondant. Cela permet aux développeurs de trouver rapidement et facilement le code associé à un design spécifique dans leur projet.

Comment les plugins peuvent-ils être utilisés pour améliorer la personnalisation de l'expérience de Dev Mode?

Les plugins peuvent être utilisés pour améliorer la personnalisation de l'expérience de Dev Mode en permettant aux développeurs de créer et d'utiliser des conventions de codage spécifiques à leur équipe, de générer du code qui correspond à leur base de code existante et d'utiliser des outils externes directement à partir de Figma. Cela leur donne plus de flexibilité et de contrôle sur la façon dont ils interagissent avec les designs et la manière dont ils effectuent leur travail de développement.

Quels sont les avantages de la mise à jour de l'inspecteur de code dans le mode Dev?

La mise à jour de l'inspecteur de code dans le mode Dev offre des améliorations significatives telles que la visualisation des variables de conception, l'affichage des guides visuels pour l'espacement et la taille, l'inférence de la disposition automatique pour les éléments sans layout appliqué et la présentation d'un aperçu du code généré dans différents langages de programmation, ce qui facilite grandement la transformation des designs en code fonctionnel.

Comment les sections et le panneau de calques ont-ils été améliorés pour les développeurs dans le mode Dev?

Les sections et le panneau de calques ont été améliorés pour les développeurs dans le mode Dev en permettant une meilleure organisation et une visualisation claire des éléments prêts à être développés. Les sections marquées comme prêtes pour le développement sont fáciles à identifier et les modifications apportées aux éléments sont clairement indiquées, ce qui aide les développeurs à savoir exactement ce qu'ils doivent construire.

Comment les développeurs peuvent-ils fournir des retours sur l'utilisation du mode Dev?

Les développeurs peuvent fournir des retours sur l'utilisation du mode Dev en utilisant le bouton de feedback bêta visible lorsqu'ils entrent en mode Dev. Leur feedback est précieux pour l'équipe de Figma afin d'améliorer continuellement la fonctionnalité en réponse aux besoins des utilisateurs.