En tant qu'outil de design, Figma n'a cessé d'évoluer et de s'adapter aux besoins croissants de sa communauté d'utilisateurs. La Config 2023 a mis en lumière de nouvelle perspectives pour l'outil, notamment en revoyant la place des développeur avec une innovation majeure : le Mode Développeur (ou Dev Mode). Conçu pour optimiser l'efficacité des développeurs, le Dev Mode simplifie l'accès aux outils et fonctionnalités nécessaires à chaque étape du process de développement.

1. Figma : Une évolution axée sur l'interconnectivité et la collaboration

Initialement conçue comme un outil pour les designers, Figma a su dépasser les limites traditionnelles grâce à une infrastructure basée sur le web. Cette plateforme de conception collaborative est facilement accessible à quiconque, partout, à tout moment, ce qui la rend parfaitement adaptée au modèle de travail à distance, "full remote", très prisé dans le monde du web design.

En adoptant un modèle centré sur le partage et la collaboration, Figma a réussi à attirer un public bien plus large que le seul cercle des designers. Figma est ainsi devenu l'outil privilégié de nombreux développeurs, qui aujourd'hui surpassent même les designers en termes de fréquentation de la plateforme. Oui, vous avez bien lu, selon les stats de Figma il y a aujourd'hui plus de développeurs que de designer sur l'outil!

2. Dev Mode : Un pas de géant pour Figma

Dans le souci de répondre aux attentes de cette communauté croissante de développeurs, Figma a repoussé les frontières de l'innovation avec la mise en place du Dev Mode. Ce nouveau mode de fonctionnement promet d'améliorer considérablement l'expérience utilisateur des développeurs, en leur offrant des outils adaptés à leurs besoins spécifiques et en optimisant leurs flux de travail. Le Dev Mode, rempli cet engagement en offrant un environnement de travail conçu pour maximiser l'efficacité des développeurs, quel que soit leur domaine d'intervention.

3. Personnalisation et flexibilité du Dev Mode

Imaginez un inspecteur de maquette adapté à votre fichier de design, facilitant la navigation entre les éléments de design tels que les maquettes, les frames, les groupes, et les concepts de développement tels que le code HTML, CSS, etc. C'est précisément ce que Dev Mode offre, en fournissant toutes les informations nécessaires pour une implémentation optimale.

Contrairement à avant, le nouveau Dev Mode permet notamment personnaliser l'environnement en fonction du langage de programmation utilisé. Conscient que le code brut n'est qu'un point de départ, le Dev Mode facilite cette transition, en proposant une représentation du modèle de boîte CSS, une syntaxe moderne avec une vue en arborescence, ainsi que la possibilité de changer les unités de mesure pour correspondre à votre codebase.

4. Fusionner les flux de travail avec Dev Mode

Le processus de développement de produits dépend étroitement de l'intégration de divers outils et ressources. Le Dev Mode s'attaque précisément à ce défi en établissant un lien plus fluide entre les composants de votre code et les fichiers de design.

4.1. Connectivité avec d'autres plateformes de gestion de projets

Le Dev Mode, avec sa panoplie de plugins, offre la possibilité d'étendre les fonctionnalités de Figma en fonction du flux de travail utilisé. Vous pouvez désormais gérer votre projet directement depuis Jira, Linear, et GitHub, vous assurant ainsi une synchronisation parfaite entre vous et votre équipe de design.

4.2. Optimisation de l'interaction avec votre codebas

Grâce à Storybook, un autre plugin utile, vous pouvez référencer ce qui se passe dans votre codebase tout en restant dans le contexte de votre design. Cela facilite la gestion de votre code et son interaction avec les fichiers de design.

4.3. Customisation de la sortie du code

En plus de l'interfaçage avec ces outils de gestion de projet, le Dev Mode propose également des plugins de génération de code provenant d'AWS Amplify Studio, Google Relay et Anima. Ces plugins vous permettent de personnaliser la sortie de votre code, vous offrant ainsi un contrôle total sur votre flux de travail.

5. Intégration des design tokens et optimisation du suivi de production

5.1. Design tokens à votre portée

Les design tokens, ces particules d'informations liées à l'interface utilisateur, sont désormais intégrés dans le Dev Mode. Cela signifie que les informations clés pour commencer à construire, comme les couleurs, les typographies et les espaces, sont immédiatement accessibles, facilitant ainsi le passage du design au développement.

5.2. Suivi simplifié de la production

Dev Mode a également simplifié le suivi de ce qui doit être envoyé en production. Les designers peuvent désormais marquer une section comme "prête pour le développement" et vous l'envoyer directement, éliminant ainsi le besoin de créer une page ou un fichier séparé. De plus, la prise en charge des différences permet de comparer les modifications entre différentes versions d'un Frame, vous aidant à rester au fait des mises à jour.

6. Extension du workflow avec VS Code

Grâce à l'intégration de l'extension VS Code, le Dev Mode élève la cohésion entre design et développement à un tout autre niveau. En intégrant la puissance du Dev Mode directement dans votre éditeur de code, il devient extrêmement facile et efficace de consulter les designs, de recevoir des notifications et des commentaires, et de suivre les modifications en temps réel.

6.1 Analyse des designs sans quitter votre éditeur

L'extension VS Code pour le Dev Mode permet de revoir les designs directement dans votre environnement de codage. Cela élimine le besoin de basculer entre plusieurs outils, augmentant ainsi votre efficacité et réduisant le temps perdu à naviguer entre différentes plateformes.

6.2 Notifications et commentaires en temps réel

Restez toujours informés des derniers changements et commentaires sans quitter votre environnement de codage. Les notifications intégrées garantissent que vous êtes toujours à jour, améliorant ainsi la collaboration et la communication entre les équipes de conception et de développement.

6.3 Autocomplétion de code pour un travail plus rapide

L'extension VS Code ne se contente pas de vous permettre de consulter les designs et de suivre les modifications : elle dispose également d'une fonction d'autocomplétion de code basée sur le design que vous inspectez. Cette fonction vous aide à travailler beaucoup plus rapidement en proposant automatiquement du code adapté, ce qui vous évite d'avoir à tout écrire manuellement. C'est un gain de temps significatif qui peut accélérer considérablement le processus de développement.

7. Accès et tarification du Dev Mode

Le Dev Mode et Figma pour VS Code sont actuellement en version bêta et gratuits pour tous les utilisateurs jusqu'à la fin de 2023. À partir de 2024, un plan payant de $25 par utilisateur sera nécessaire pour accéder à Dev Mode.

Conclusion

Le Dev Mode est une avancée majeure dans l'évolution de Figma, offrant une synergie inédite entre le design et le développement. Nous sommes impatients de voir les retours de la communauté sur cette nouvelle fonctionnalité et comment elle contribuera à la création de produits encore plus innovants.