Lors de sa conférence Config annuelle organisée les 22 et 23 juin à San Francisco, Figma a annoncé une série de fonctionnalités pour sa plateforme de prototypage, en grande partie pour combler l’écart entre le travail de design et de développement. C’est le cas notamment avec l’espace Dev Mode qui doit faciliter le travail des développeurs sur la plateforme, mais aussi des variables et du prototypage avancé afin de rationaliser le processus créatif et le rendre plus fluide.

D'autres améliorations apportées à la plateforme visent aussi à simplifier le processus de conception. « Même si Figma se définit comme un outil de design, plus d'un tiers des utilisateurs actifs hebdomadaires de la plateforme sont des développeurs », a expliqué Avantika Gomes, cheffe de produit chez Figma. « J'ai toujours trouvé cette statistique étonnante, car Figma est un outil de prototypage de produits conçu pour les designer. Cependant, le fait d'être basé sur le web a attiré vers nous plus de personnes, dont un grand nombre de développeurs », a-t-elle déclaré.

Le Dev Mode à destination des programmeurs

Le Dev Mode permet aux concepteurs et aux développeurs de travailler sur les mêmes designs dans le même fichier, mais dans des modes différents. Il peut fournir aux développeurs une interface de travail distincte, et faciliter l’accès aux informations importantes sans avoir  à effectuer des mises à jour de versions ou faire des va-et-vient avec leurs homologues designers. Le Dev Mode propose également aux développeurs de générer des extraits de code CSS, iOS et Android prêts pour la production et de se connecter à des outils comme Jira, GitHub et Storybook pour automatiser les workflows. Les utilisateurs pourront par ailleurs relier les systèmes de prototypage au code et à la documentation des composants, inspecter les fichiers Figma, collaborer avec les designers et recevoir des notifications sans quitter l'éditeur de code.

Enfin, ils pourront utiliser des tags pour suivre l'état du design, organiser les fichiers de design en fonction de leur stade de développement et comparer rapidement les modifications. « Par le passé, Figma a fait en sorte d'améliorer la plateforme pour les concepteurs sans s’aliéner les développeurs qui n’ont cessé de grossir la base utilisateurs de la plateforme », a déclaré Sho Kuwamoto, vice-président des produits chez Figma. Selon lui, l'un des avantages du Dev Mode, c’est que les développeurs peuvent désormais obtenir ce dont ils ont besoin dans un espace séparé et optimisé qui leur est propre.

Des variables et un prototypage avancé

En plus du Dev Mode, l’éditeur a ajouté des variables et du prototypage avancé à la plateforme. À l'instar des variables qui existent dans le codage - des valeurs qui peuvent changer en fonction des conditions ou des informations entrées par un développeur - Figma a introduit des variables de conception pour rationaliser le processus de création et d’assurer la maintenance de marques, d’appareils et de thèmes multiples. Elles prennent aussi en charge les jetons de design - des sources uniques de vérité auxquelles les concepteurs et les développeurs peuvent se référer pour appliquer de manière cohérente des éléments d'interface utilisateur, comme la couleur ou la taille. Sho Kuwamoto explique par exemple que s'il existe des versions en mode clair et en mode foncé d'une interface utilisateur, au lieu de cliquer manuellement sur chaque élément de conception pour le faire basculer d’un mode à l’autre, les variables regrouperont ces éléments dans des régions qu’il est possible de basculer collectivement dans le mode désiré.

Quant au prototypage avancé, les utilisateurs pourront créer des prototypes plus réalistes dans Figma, en limitant les allers-retours entre les outils ou les fenêtres séparées, puisqu'ils peuvent désormais les concevoir et tester dans le même canevas Figma. « Grâce à cette fonctionnalité, les utilisateurs peuvent créer le prototype le plus réaliste possible, et plus il est réaliste, meilleurs sont les résultats », a déclaré le vice-président des produits de Figma. L’éditeur a par ailleurs livré des mises à jour de son outil de mise en page automatique. Dorénavant, les utilisateurs peuvent créer des designs entièrement réactifs, et son sélecteur de polices amélioré filtre et localise les polices plus rapidement grâce à de nouvelles fonctionnalités de menu, de recherche et d'index visuel. En outre, l’interface utilisateur du navigateur de fichiers de Figma a été redessinée pour aider les utilisateurs à trouver rapidement les fichiers partagés, les projets et les notifications.

Disponible en bêta ouverte, le Dev Mode peut être testé gratuitement jusqu'en 2023. À partir de 2024, il sera possible d'acheter uniquement l'accès au Dev Mode pour 25 dollars HT par siège/mois avec le forfait Organisation et pour 35 dollars HT par siège/mois avec le forfait Entreprise. Les variables sont disponibles en bêta ouverte, même s’il existe des variantes dans les fonctionnalités entre deux forfaits. Le prototypage avancé est disponible pour les abonnés Professionnel, Organisation et Entreprise.