Ce que le mode de développement de Figma signifie pour les développeurs

En tant que développeur collaborant avec des designers sur le développement de produits, vous serez confronté à divers défis qui peuvent entraver un travail d'équipe efficace. Bon nombre de ces problèmes découlent d'une implication limitée dans le processus de conception ou d'éléments de conception incomplets.

Figma a introduit Figma Dev Mode pour résoudre ces problèmes, dans le but de prendre en charge une collaboration transparente entre la conception et le développement.

Comment cela affectera-t-il votre flux de travail en tant que développeur? Plongez dans Figma Dev Mode, explorez ses fonctionnalités et découvrez les meilleures pratiques pour son utilisation.

Qu'est-ce que le mode de développement Figma?

Figma, l'outil de conception d'interface populaire, est populaire auprès des équipes qui créent des prototypes ou créent des maquettes de sites Web. Son mode de développement, que la société a annoncé lors de Config 2023, vise à servir d'espace de travail pour les développeurs après que les créateurs ont réalisé à quel point il était difficile pour eux d'interagir avec la toile Figma.

Le mode Dev est similaire à l'outil d'inspection de Chrome, mais il transmet l'intention d'un concepteur dans un langage plus familier.

Mode de développement de Figma offre une gamme de fonctionnalités, notamment l'inspection, des extraits de code, des plugins, des systèmes de conception, l'état de la section et la possibilité de comparer les modifications. Ces fonctionnalités devraient contribuer à améliorer la communication, à rationaliser les processus et à maintenir un flux de travail cohérent de la conception au développement.

Actuellement, le mode Dev est en version bêta, vous aurez donc besoin de l'application de bureau bêta Figma pour y accéder.

Communication transparente avec le mode de développement

Lorsque vous accédez à des fichiers de conception, le contenu peut ressembler à un multivers de panneaux, remplis de terminologies de conception qui peuvent être difficiles à comprendre, et vous ne savez peut-être même pas par où commencer. Avec juste la bascule d'un bouton, vous vous matérialisez dans un espace qui vous semble plus familier.

Le panneau de navigation est moins exigu avec des menus déroulants contenant plusieurs cadres et calques qui se développent pour présenter différentes sections. Cette nouvelle version est beaucoup plus organisée.

Une autre fonctionnalité intéressante que vous remarquerez peut-être est l'horodatage indiquant la dernière modification. Vous pouvez afficher les détails de la modification en cochant l'option de comparaison des modifications dans le panneau Inspecter. Cela signifie que vous pouvez voir et suivre les modifications apportées, comme l'historique des versions, un concept adapté à votre vocabulaire.

Le panneau d'inspection présente des informations pertinentes pour vous dans un langage que vous comprenez: le code. Vous pouvez inspecter des éléments et ajouter des plugins mieux adaptés à votre travail. Le mode Dev offre diverses fonctionnalités d'interaction, vous permettant de partager vos idées et suggestions à différents moments. Ces fonctionnalités incluent le chat du curseur, le bloc de commentaires, le chat audio et un bouton de partage.

Ces fonctionnalités permettent simultanément collaboration conception-développement, car la rétroaction se produit en temps réel dans le même environnement. En conséquence, il améliore la productivité et accélère votre flux de travail.

Extraction efficace des actifs

Il n'est pas rare que les concepteurs fournissent des éléments de conception incomplets, ce qui peut être frustrant. Les développeurs apprécient les ressources et la disponibilité des composants pour garantir l'efficacité de la construction. Avec le mode Dev, l'extraction d'actifs est aussi simple que quelques clics.

Chaque fois que vous sélectionnez un cadre, le panneau d'inspection affiche une liste des actifs utilisés. Il les rend également facilement disponibles au téléchargement dans quatre formats différents.

Cet outil vous permet d'accéder aux ressources sans avoir à faire des allers-retours avec l'équipe de conception. Cela permet d'éviter les erreurs ou la confusion, vous fait gagner du temps et vous permet de vous concentrer sur d'autres tâches.

Processus de transfert simplifiés

Le mode Dev est le meilleur package pour gérer les transferts. Il combine tout ce dont vous avez besoin dans un seul emplacement que vous pouvez adapter à votre flux de travail. Le mode Dev permet d'accélérer le processus de transfert en permettant :

• Conception et développement dans un seul environnement
• Collaboration en temps réel
• Inspection et extraits de code
• Intégration du système de conception
• Libellés d'état de section (par exemple, "Prêt pour le développement")

Meilleures pratiques et astuces pour utiliser le mode Dev

Vous pouvez utiliser le mode Dev de Figma dans le cadre de votre flux de travail, mais comment pouvez-vous en tirer le meilleur parti? Essayez ces suggestions.

• Utilisez les ressources de développement et les plugins pour personnaliser votre expérience; reliez les outils que vous utilisez déjà dans le mode Dev pour rationaliser votre flux de travail. De GitHub aux frameworks de votre pile, vous avez le choix entre plusieurs variétés.
• Utilisez les fonctionnalités d'inspection et d'extraits de code pour accéder aux mesures, aux spécifications, aux styles et aux actifs des éléments de conception. Vous pouvez également générer du code dans différentes bibliothèques en utilisant des plugins.
• Gardez une trace des modifications de conception pour vous assurer de ne rien manquer. Le Comparer les modifications La fonctionnalité sert d'outil d'historique des versions - assurez-vous de la vérifier régulièrement.
• Tirez parti de toutes les fonctionnalités de collaboration pour la communication et contactez les concepteurs à l'aide de commentaires, de discussions avec curseur, etc.
• Vous pouvez également inspecter des éléments dans VS Code avec la nouvelle extension Figma VS Code. Il vous permet également d'en faire plus, y compris la navigation dans les fichiers, le suivi des modifications, la collaboration des concepteurs et l'accélération de la mise en œuvre de la conception, sans quitter VS Code.
• Restez à jour sur les nouvelles fonctionnalités, voyez comment elles peuvent vous servir au mieux et améliorez vos compétences à chaque occasion.

Adoptez le mode Dev pour rationaliser votre flux de travail

Le mode de développement de Figma devrait rendre votre flux de travail plus efficace, permettant une meilleure collaboration concepteur-développeur avec les fonctionnalités nécessaires.

Il y a plus de parties dans l'écosystème Figma, et la popularité de l'application signifie que c'est un outil précieux que vous pouvez apporter d'un travail à l'autre.