Config 2023 : Réinventons un lieu où conjuguer design et développement
Nous lançons Dev Mode, les variables, le prototyping avancé, et des mises à jour qui vont vous simplifier la vie. Tout ça pour vous aider à passer du design au développement de vos produits.
Partager Config 2023 : Réinventons un lieu où conjuguer design et développement
Pour Config 2023, plus de 8000 membres de la communauté Figma se sont rassemblés à San Francisco. Des milliers d’autres ont suivi l’événement à travers le monde. La dernière fois que nous nous étions réunis en personne remonte à notre première Config, en février 2020. Depuis, le monde qui nous entoure a évolué et notre produit, notre société et la communauté Figma ont tous subi de profonds changements.
Notre vision : construire un outil de design d’un genre nouveau, conçu pour l’équipe produit au sens large. Les fonctionnalités que vous allez découvrir vont réinventer la façon dont le design et le développement se conjuguent dans Figma. Cette nouvelle impulsion, que je suis heureux de vous présenter, va se manifester via trois de nos nouveautés : accueillir les développeurs au sein de Figma avec Dev Mode, relier design et code avec les variables, et faire le pont entre design 2D et produit finalisé via le prototypage avancé. Nous lançons également une version améliorée de l’auto-layout, une mise à jour du sélecteur de police, et une recherche de fichiers perfectionnée. De quoi vous aider à mieux travailler avec Figma !
Faire de Figma l’allié des développeurs avec Dev Mode
Les design systems ont fait office de langue commune pour réduire le fossé entre design et développement, dû à des objectifs d’optimisation différents. Le processus de design vise à l’itération et l’idéation rapides : les idées doivent être couchées sur le plan de travail aussi vite que possible. Plus on se rapproche de la mise en production d’un élément, plus on prend en compte sa maintenance, sa réutilisation et sa composition, en plus des aspects visuels et fonctionnels. Jusqu’à aujourd’hui, notre plateforme était conçue pour le design, mais il était temps pour Figma de se concentrer aussi sur le développement.
Nous lançons Dev Mode pour faire le pont entre le design et le développement. L’objectif : faire en sorte que les développeurs se sentent comme chez eux dans Figma. Dev Mode est une interface qui donne aux développeurs la structure et les fonctionnalités dont ils ont besoin pour travailler dans Figma. Voici les possibilités que Dev Mode apporte aux développeurs :
- Comprendre les designs et les coder plus rapidement
- Se connecter à leurs outils et à leur code base avec des plugins Jira, GitHub et Storybook
- Suivre ce qui doit partir en production
- Inspecter les fichiers en parallèle de leur interface de code avec Figma dans VS Code
Dev Mode est disponible en mode bêta et gratuit pour tous jusqu’à fin 2023. Vous voulez en savoir plus ? Consultez cet article sur sa conception, et lisez cette page sur ses fonctionnalités et les prix post-bêta.
Avec les variables, les design systems sont en phase avec le code
La construction d’un design system aide à prendre en compte toutes les facettes de la conception d’un produit. Bien que la structuration soit source de cohérence, cela se fait souvent aux dépens d’une flexibilité nécessaire aux designers. Alors que les produits sont de plus en plus sophistiqués, la complexité des design system croît au même rythme que s’étendent les ramifications indispensables à leur compatibilité avec différents thèmes, plateformes, produits, marques, etc. Les personnes chargées de les gérer doivent réduire cette complexité en multipliant les bibliothèques, les composants, et les plugins sur mesure. Malgré cela, aucun de leurs designs n’est relié à son code.
Ce qui a l’air simple à première vue ne l’est pas forcément pour nous. Quand on modifie l’espacement d’un bouton ou l’iconographie, cela peut affecter des millions de lignes de code, sur une dizaine de produits.
Notre communauté réclame l’arrivée des tokens depuis longtemps. Aujourd’hui, nous lançons les variables, une solution plus complète pour optimiser le processus de design. Les variables s’adaptent à de nombreux cas d’usage :
- Les variables de couleur, de nombre, de texte et les variables booléennes stockent des valeurs réutilisables et permettent d’appliquer aux designs des thèmes et des tokens
- La prise en charge des alias et du scoping aident à contextualiser davantage les variables pour l'ensemble de l'équipe
- La création de modes avec différentes valeurs (par exemple, light ou dark) rend possible la permutation entre plusieurs thèmes, directement dans les fichiers
- La prise en charge de plugins et de l’API REST pour les variables facilite l’automatisation de leur création et de leur gestion
Donnez vie à vos prototypes avec les variables
Alors que la pression pour livrer des produits de grande qualité avec moins de ressources augmente, le prototypage et les tests sont devenus encore plus importants pour les équipes produit. Jusqu’à présent, créer des prototypes dans Figma était une tâche longue et complexe. Certains utilisateurs construisaient des prototypes impossibles à modifier, ou devaient se servir d’autres outils. Parfois, ils en venaient à sauter l’étape du prototypage et attendaient que le design soit codé pour voir le rendu.
Le design d'une fonctionnalité requiert beaucoup d'efforts. Une image statique a ses limites, alors quand vous construisez quelque chose et que c’est vous qui déclenchez l’interaction, c'est un peu révolutionnaire.
Avec les variables, les designers peuvent facilement créer et mettre à jour des prototypes plus dynamiques. Il devient ainsi possible de tester toute l’expérience très tôt dans le processus, et aussi souvent que nécessaire. Ainsi, les équipes peuvent comprendre le fonctionnement en conditions réelles d’un grand nombre de designs statiques et choisir les meilleurs. Tout comme une formule Excel, les interactions d’un prototype peuvent désormais mentionner et modifier des variables via des expressions mathématiques et de logique conditionnelle (par exemple, vous pouvez stipuler que « chaque clic modifie la variable numérique x en x+10 », ou « passer à la frame 1 si la variable est x, sinon passer à la frame 2 »). Le prototypage est à la fois plus simple et plus puissant que jamais. Par ailleurs, un nouveau mode de prévisualisation en ligne permet d’itérer plus rapidement et de voir immédiatement votre design.
Nous vous présentons :
- Des fonctionnalités de prototypage avancées, dont les variables, les conditions et les expressions
- Des mises à jour ergonomiques, comme la modification en contexte et la prévisualisation en ligne, pour apporter des changements à vos designs et voir les prototypes au même endroit
Des mises à jour pour un travail plus fluide et efficace
Nous sommes toujours à votre écoute lorsque nous itérons, et nous avons conscience que de nouvelles fonctionnalités et des améliorations peuvent faire toute la différence dans vos workflows quotidiens. Voici les dernières mises à jour qui vont simplifier la manière dont vous travaillez dans Figma :
- Amélioration de l’auto-layout : possibilité d’ajuster et de définir une hauteur et une largeur minimum/maximum
- Mise à jour du sélecteur de police : vous pouvez désormais rechercher et filtrer les polices et les prévisualiser à partir de leur nom
- Mise à jour de la recherche de fichiers pour les retrouver plus facilement, ainsi que les projets que vous avez partagés avec des équipes externes
Miser sur le futur
La prochaine étape pour le design : l’IA
En tant qu’expert de la technologie en 2023, je ne peux pas évoquer le futur sans parler d’IA. Voici comment j’envisage son impact sur le design : l’IA va aider les gens à s’exprimer visuellement. Les workflows vont s’accélérer. Et n’importe qui sera en mesure de créer un premier jet de qualité. Mais pour passer à l’excellence, l’intervention humaine (la vôtre !) reste nécessaire.
Nous avons constitué une équipe dédiée au machine learning et nous investissons dans les premiers stades du développement depuis un certain temps. La bonne nouvelle, c’est que nous avons fait l’acquisition de Diagram afin de renforcer cet engagement. Diagram a été fondé par Jordan Singer, un membre de longue date de la communauté Figma qui construit des outils tiers assistés par l’IA sur notre plateforme depuis des années. Les outils de Diagram ont la particularité de rendre le design presque magique. Nous allons travailler avec Diagram pour proposer des capacités augmentées par l'IA sur l'ensemble de la plateforme Figma.
Bâtir un avenir à la pointe du numérique pour chaque élève
À l’avenir, nous aurons besoin de personnes qui savent réfléchir et produire, et l’IA permettra à plus de monde de répondre présent à cet appel. C’est pourquoi nous accordons une telle importance à notre programme Figma pour l’Éducation, dans lequel nous nous sommes investis depuis nos débuts. Nous nous sommes toujours engagés à offrir Figma gratuitement à tous les élèves et à tous les éducateurs, et nous avons bien l’intention de continuer.
L’année dernière, nous avons annoncé un partenariat bêta avec Google Chromebooks pour permettre aux élèves à partir de 13 ans d'utiliser Figma et FigJam en classe. Nous avons travaillé avec 50 écoles et 10 000 étudiants à travers les États-Unis pour comprendre leurs besoins. Aujourd'hui, ce partenariat devient accessible au grand public, afin que toutes les classes d'un secteur scolaire américain puissent utiliser Figma gratuitement. Et pour la première fois, nous allons étendre notre programme aux élèves de tous les âges aux États-Unis et au Japon, où nous avons inauguré la première interface utilisateur localisée de Figma.
J’ai hâte de voir ce que les prochaines générations de designers – et tous les membres de la communauté Figma – vont imaginer et bâtir pour le monde de demain.