Figma a annoncé une multitude de nouvelles fonctionnalités pour sa plate-forme phare de conception de produits, visant à combler le fossé entre le design et le développement. Les annonces ont été faites lors de la conférence annuelle Config de la société à San Francisco et incluent un nouvel environnement de travail pour les développeurs, ainsi que des variables et un prototypage avancé pour aider à rationaliser le processus de création et à réduire les frictions. Un certain nombre d'autres améliorations ont également été apportées à la plate-forme pour aider à simplifier le processus de conception.Figma, la plate-forme collaborative de design sur le web, a présenté cette semaine le Dev Mode, décrit par le CTO Kris Rasmussen comme « Une vue des fichiers Figma optimisée pour les besoins du développement », ainsi qu'un plug-in pour Visual Studio Code et une nouvelle fonctionnalité de prototypage.
La fonctionnalité a été présentée lors de l'événement Config 2023 de Figma à San Francisco.
Fait intéressant, plus d'un tiers des utilisateurs hebdomadaires de Figma sont des développeurs, bien que la plate-forme soit principalement un outil orienté design. Avantika Gomes, chef de produit chez Figma, attribue cela à la nature Web de la plate-forme, qui invite davantage de collaborateurs comme les développeurs. « 30 % de nos utilisateurs actifs hebdomadaires chez Figma aujourd'hui sont déjà des développeurs », a déclaré Rasmussen. « C'est le même pourcentage que les designers ». Mais il a ajouté que « la réalité est que les développeurs ne se sentent pas chez eux à Figma ».
Le mode Dev est destiné à changer cela, et les fonctionnalités incluent un nouveau panneau d'inspection, la possibilité de marquer des sections d'un document de design comme « Prêt pour le développement », une option « Comparer les modifications » qui montre quelles propriétés ont changé entre deux révisions, la capacité pour lier des éléments Figma à des problèmes dans un référentiel tel que GitHub, et des plugins pour des outils tels que Jira, Linear, GitHub, AWS Amplify Studio, Google Relay (connectez Figma à Jetpack Compose) et Anima, un autre produit qui génère du code à partir de Figma.
Une interface distincte
Le Dev Mode fournit une interface distincte permettant aux designers et aux développeurs de travailler sur les mêmes designs dans le même fichier tout en fonctionnant dans des modes différents. Cette configuration élimine le besoin de mises à jour de version et d'échanges entre ces deux rôles. Les développeurs peuvent accéder à des informations cruciales tout en générant des extraits de code CSS, iOS et Android prêts pour la production. Le mode Dev se connecte également à des outils tels que Jira, GitHub et Storybook pour une automatisation transparente des flux de travail.
De plus, le mode Dev permet de lier les systèmes de design dans Figma au code et à la documentation des composants. Cette fonction permet l'inspection des fichiers Figma, la collaboration avec les designers et la réception facile des notifications Figma sans quitter l'éditeur de code. Les développeurs peuvent également utiliser des étiquettes pour suivre les statuts de design, organiser les fichiers de conception en fonction de leur stade de développement et comparer rapidement les modifications.
En somme, le mode Dev propose des fonctionnalités telles que :
- un nouveau panneau d’inspection, qui affiche les propriétés des éléments du design sous forme de code (CSS, HTML, Swift ou Android), ou qui permet d’utiliser un plugin pour personnaliser le code selon le framework utilisé ;
- la possibilité de marquer des sections d’un fichier de design comme “Prêtes pour le dev”, pour signaler aux développeurs quels sont les éléments à implémenter ;
- une option “Comparer les changements”, qui montre quelles sont les propriétés qui ont changé entre deux révisions d’un fichier de design, pour faciliter le suivi des modifications ;
- la possibilité de lier des éléments de Figma à des issues dans un dépôt comme GitHub, pour assurer la traçabilité du travail ;
- des plugins pour des outils comme Jira, Linear, GitHub, AWS Amplify Studio, Google Relay (pour connecter Figma à Jetpack Compose), ou Anima, un autre produit qui génère du code à partir de Figma.
Plug-in Visual Studio Code
Le plugin pour VS Code est un outil avancé qui affiche les fichiers de design en direct dans une barre latérale et permet une collaboration en temps réel. Les développeurs peuvent sélectionner une couche dans un design et faire apparaître ses propriétés sous forme de suggestions de code dans l'éditeur de code. Une autre fonctionnalité est le téléchargement immédiat des ressources Figma pour le développement local. Le plugin compte déjà plus de 40 000 téléchargements au moment de la rédaction et a été généralement bien accueilli. « Cette extension est très utile. Je n'ai plus besoin d'ouvrir Figma dans une fenêtre de navigateur séparée », a déclaré un utilisateur, bien que certains aient des problèmes de connexion, et un autre n'a pas tardé à demander une version pour les EDI IntelliJ.
Le CTO de Figma, Kris Rasmussen, présente le plugin VS Code à Config 2023
Parallèlement au mode Dev, Figma introduit des variables de conception pour rationaliser le processus de création et de maintenance de plusieurs marques, appareils et thèmes, un peu comme les variables de codage. Les variables Figma prennent également en charge les jetons de conception, qui établissent des éléments d'interface utilisateur cohérents tels que la couleur ou le dimensionnement. Par exemple, si une interface utilisateur a des modes clair et sombre, les variables permettent aux concepteurs de regrouper des éléments dans des régions qui peuvent basculer collectivement entre ces modes.
Outre les variables, Figma déploie un prototypage avancé, permettant aux utilisateurs de développer des prototypes plus réalistes directement dans le canevas Figma. Cette amélioration minimise le besoin de basculer entre différents outils ou fenêtres pour concevoir et tester des prototypes. Sho Kuwamoto, vice-président des produits chez Figma, estime que le prototypage avancé donne de meilleurs résultats en fournissant les prototypes les plus réalistes.
De plus, Figma met à jour son outil de mise en page automatique pour des designs entièrement réactifs et son sélecteur de polices avec un nouveau menu, des capacités de recherche et un index visuel pour un filtrage et un emplacement plus rapides des polices. Le navigateur de fichiers de Figma présente également une nouvelle interface utilisateur pour un accès rapide aux fichiers, projets et notifications partagés.
Gratuit jusqu'en 2024
Envoyé par Figma
Figma est né sur le Web - un début non conventionnel pour un outil de design, mais dont nous avions désespérément besoin pour le design de produits. Avec un lien unique, les designers pourraient collaborer sur des travaux en cours, partager les premières explorations, plutôt que de sauvegarder les designs jusqu'à ce qu'ils les sentent suffisamment « polis ». Alors que de plus en plus de designers adoptaient Figma et cette méthode de travail multijoueur, nous avons commencé à constater un élargissement naturel de l'utilisation entre les équipes et les disciplines, en particulier avec les développeurs.
Aujourd'hui, nous savons que sur nos plans payants, plus de développeurs visitent Figma que de designers. Nous savons également que comprendre les besoins des développeurs et leurs défis est essentiel pour faire de Figma un lieu où le développement de produits peut être plus efficace, collaboratif et expressif.
Les développeurs ont des flux de travail et des préférences uniques. Qu'il s'agisse de développeurs front-end travaillant avec des systèmes de conception matures, d'ingénieurs concepteurs de systèmes construisant des composants, ou de ceux qui créent des mises en page de contenu et exportent des actifs dans leur travail avec les designers de marque, chaque équipe souhaite travailler avec le moins de friction possible.
Avec le mode Dev, nous voyons une énorme opportunité d'offrir aux développeurs ce dont ils ont besoin rapidement et efficacement, tout comme nous l'avons fait avec les designers lorsque nous avons commencé à créer Figma. Plus il est facile pour les équipes de concevoir, documenter, trouver et mettre en œuvre des designs haute fidélité sans perdre de vue le travail et les autres en cours de route, meilleurs sont les résultats du produit. Nous sommes ravis de franchir cette première étape dans la création d'un pont entre le design et le développement dans Figma, et nous avons hâte de voir ce que les équipes feront ensuite.
Aujourd'hui, nous savons que sur nos plans payants, plus de développeurs visitent Figma que de designers. Nous savons également que comprendre les besoins des développeurs et leurs défis est essentiel pour faire de Figma un lieu où le développement de produits peut être plus efficace, collaboratif et expressif.
Les développeurs ont des flux de travail et des préférences uniques. Qu'il s'agisse de développeurs front-end travaillant avec des systèmes de conception matures, d'ingénieurs concepteurs de systèmes construisant des composants, ou de ceux qui créent des mises en page de contenu et exportent des actifs dans leur travail avec les designers de marque, chaque équipe souhaite travailler avec le moins de friction possible.
Avec le mode Dev, nous voyons une énorme opportunité d'offrir aux développeurs ce dont ils ont besoin rapidement et efficacement, tout comme nous l'avons fait avec les designers lorsque nous avons commencé à créer Figma. Plus il est facile pour les équipes de concevoir, documenter, trouver et mettre en œuvre des designs haute fidélité sans perdre de vue le travail et les autres en cours de route, meilleurs sont les résultats du produit. Nous sommes ravis de franchir cette première étape dans la création d'un pont entre le design et le développement dans Figma, et nous avons hâte de voir ce que les équipes feront ensuite.
Découvrez le Dev ModeSource : Figma
Et vous ?
Utilisez-vous Figma pour vos projets de développement web ou mobile ? Quelles sont les fonctionnalités de Figma que vous appréciez le plus ou le moins ? Avez-vous testé le mode Dev ou le plugin VS Code de Figma ? Si oui, qu’en avez-vous pensé ? Comment gérez-vous les variables dans vos prototypes de Figma ? Quels sont les défis ou les difficultés que vous rencontrez dans la collaboration entre designers et développeurs ?