Le futur des design systems sera automatisé

En 2017, Benjamin Wilkins a fait part de ses premières recherches au cours desquelles il a utilisé des design systems et le machine learning pour générer du code à partir de wireframes basse fidélité. Voici ce qu'a été l'avis général : 1 : Ouah, c'est incroyable, 2 : Que vont devenir nos emplois ? Nir Benita a tweeté « Je ne pensais vraiment pas être si vite remplacé par un robot. »

Ce post a de nouveau circulé sur Twitter lorsque Diagram* a lancé Genius, un outil alimenté par l'IA capable d'analyser les fichiers Figma et de faire des suggestions en utilisant les composants d'un design system, concrétisant ainsi les recherches de Wilkins. Jem Gold, un chercheur travaillant sur l'IA chez Airbnb à l'époque, a précisé sur Twitter que ces premières recherches n'avaient jamais complètement abouti et servaient plutôt de prototypes. Néanmoins, ces travaux montraient que le design assisté par l'IA avait de l’avenir, lequel prend désormais forme à mesure que la technologie rattrape son retard.

« Nous façonnons nos outils et ils nous façonnent à leur tour », écrivait le philosophe et théoricien Marshall McLuhan. Des plugins et des widgets jusqu'à la technologie assistée par l'IA, une nouvelle classe d'outils est en train de changer la donne et soulève des questions existentielles : quel est le rôle d'un designer dans un monde où le design peut être automatisé ? Qu'advient-il des développeurs face au code auto-généré ? Maintenant que les outils ne se limitent plus à augmenter nos compétences, mais qu’ils en arrivent même à terminer nos… phrases, que va-t-il se passer ? Quel va être l’impact sur notre profession et notre secteur d’activité dans leur ensemble ?

Introduction aux plugins et aux widgets

L'histoire des plugins et des widgets est étroitement liée au design. Les premiers plugins ont été élaborés dans les années 1970 pour des logiciels de traitement de texte et de PAO tels qu'Hypercard et QuarkXPress sur les ordinateurs Macintosh d'Apple. Les créateurs ont alors élaboré toute une microéconomie autour de la création de plugins, publiant des effets, des balayages et des styles afin que d'autres personnes puissent les utiliser dans leurs créations.

Depuis, de nombreux éditeurs de logiciels ont accueilli à bras ouverts les extensions créées par les utilisateurs, encourageant leur propagation au travers de forums communautaires et de marketplaces intégrées aux applications. (Après tout, qui ne souhaiterait pas agrandir ainsi ses équipes et étendre les fonctionnalités de ses applications ?) Les plugins pour les design systems sont généralement axés sur la fonctionnalité et s'organisent en deux catégories : ceux qui automatisent une série de tâches existantes et ceux qui étendent un ensemble de fonctionnalités, comme rassembler des analyses de données, tester des design ou améliorer l’accessibilité.

Des plugins pour automatiser des tâches répétitives

Chez Figma, ces plugins sont présents au sein des pages de notre communauté : ce sont des générateurs d'images et d'icônes qui permettent aux créateurs d'économiser le temps passé à créer des assets de toutes pièces ou à les compresser figurent parmi les plugins les plus populaires, occupant la moitié des places du top dix. D'autres aident à automatiser les flux, à convertir des designs au format HTML ou à transformer des designs en slides. Leur point commun ? Ils permettent de simplifier les processus et d'optimiser les workflows. Tout ce qui évite à un designer de jongler entre les outils ou de répéter d'interminables séries de clics interminables peut potentiellement faire l'objet d'un plugin.

Toute personne ayant déjà été confrontée au syndrome du canal carpien ou ayant déjà pensé à s’équiper d'un « clavier ergonomique » connaît la vive douleur physique que les tâches répétitives peuvent occasionner. Bien que les raisons qui poussent à commencer une carrière dans le design

soient nombreuses, cliquer sur des pixels n'en fait pas partie.

Matthew Ström, product design manager chez Stripe, explique que les design systems complexes offrent différentes manières de résoudre un même problème. Au fur et à mesure que le design system prend de l'ampleur, étudier toutes les façons de faire requiert davantage de temps et d'efforts, chaque itération étant de plus en plus longue à définir. « Les tests à faible code ou sans code et les outils d'automatisation peuvent grandement accélérer le processus et faire gagner beucoup de temps de travail manuel à l'équipe en charge des design systems », souligne-t-il. Dans un article sur le site UXdesign.cc, Teisanu Tudor détaille les étapes nécessaires à la vérification des 20 combinaisons possibles de caractères et de taille de police. Il en conclut que « la plupart des personnes n'examinent jamais les 20 combinaisons… Très peu vont s'interroger sur le nombre de combinaisons possibles, puis les créer une par une dans la foulée sans s'attarder sur une en particulier. Et cela ne concerne que les caractères.

« L'une de mes plus grandes passions consiste à échanger avec des designers sur leur façon de créer, puis d'imaginer comment leur permettre d'aller plus vite ou d'être plus créatif », explique Andrew Pouliot, machine learning engineer chez Diagram. « Passer moins de temps à exécuter des tâches de façon mécanique pour créer des designs de meilleure qualité : c’est ce qui à mon sens constituera l'avenir des design systems. » Diagram (l'équipe à l'origine de l'outil Genius alimenté par l'IA mentionné précédemment) est réputé dans la communauté des outils pour ses plugins de prototypage, d'automatisation et de débogage. Automator, l'un des plugins de Diagram les plus utilisés, permet de créer des automatisations de type glisser-déposer personnalisées, afin de générer des guides de style, de redimensionner des lots d'icônes ou d'extraire des données API. (Et jusqu'en octobre dernier, il offrait également une solution élégante à la fonction Rechercher remplacer tant attendue

de Figma.)

Des plugins pour étendre les fonctionnalités

Lorsque certains cas d'usage ne sont pas solutionnés par les outils existants, les plugins et les intégrations peuvent combler ces lacunes. Actuellement pris en charge par neuf plateformes différentes, dont les ordinateurs de bureau, les navigateurs et diverses applications, Stark permet d'identifier et de résoudre les problèmes en matière d'accessibilité. « Il s'agit d'une gamme d'outils. L'écosystème Stark consiste à intégrer les outils que votre équipe produit utilise déjà (que vous soyez designer, développeur, chef de projet ou expert en QA), afin de les mettre en lien pour créer un workflow dédié à l'accessibilité », explique Benedikt Lehnert, chief design officer chez Stark, à TechCrunch.

Des widgets pour visualiser et organiser

Si les plugins tendent à améliorer les aspects fonctionnels, les widgets se concentrent plutôt sur l'apparence. Les outils intégrés aux applications apportent une couche d'interactivité, en invitant les utilisateurs à visualiser du contenu et à interagir avec. La plupart des widgets populaires pour les design systems comportent des graphiques pour présenter des informations, des boutons de liens rapides, différents formats de frames pour afficher des styles, ainsi que de nombreux tableaux pour organiser les propriétés des composants.

Les widgets peuvent aider les utilisateurs en améliorant l'expérience de navigation au sein des fichiers Figma et FigJam. Un widget de déclinaisons de frames permet à un designer d'ébaucher rapidement une idée d'interface, sans avoir besoin de parcourir le web à la recherche d'un modèle de wireframe pour smartphone propre. Un widget de tableaux de propriétés des composants génère les propriétés des composants Figma, permettant ainsi aux designers de gagner du temps lors de la rédaction des spécifications et de la documentation pour la livraison aux développeurs.

Dans chacun de ces exemples, les plugins et les widgets répondent aux besoins des utilisateurs dans leur environnement et leur permettent d'atteindre plus rapidement et plus facilement leur objectif. Les avantages de ces nouveaux outils peuvent être considérables en cas de difficultés à faire adopter un design system ou pour une équipe dédiée cherchant à rationaliser la maintenance et la distribution. En réduisant les frictions ou en offrant des fonctionnalités supplémentaires à leurs utilisateurs, ces outils peuvent étendre les capacités d'un système, en facilitant la création et la gestion de bibliothèques et de composants. Ainsi, même si le design produit gagne en complexité, obligeant les équipes à s'orienter au milieu naviguer au milieu de nombreux points de contact, d'appareils et de plateformes, ces intégrations offrent de nouvelles possibilités de rationaliser et de faire passer ces workflows à l’échelle.

Toutefois, la puissance de ces outils se limite à celle des données qu'ils contiennent.

Des outils alimentés par l'IA

Alors que les plugins rendent les logiciels plus fonctionnels et que les widgets en améliorent la convivialité, l'intelligence artificielle leur offre à tous les deux une nouvelle base. Bien que nous ne puissions pas lire l'avenir dans une boule de cristal, un examen rapide des plugins et widgets populaires nous donne quelques indices sur les points faibles existants et sur la façon dont l'IA pourrait y remédier.

La génération rapide d'icônes, d'images, de texte et d'autres types de contenu est un besoin évident auquel quelques entreprises s'attellent à répondre. Shopify a récemment annoncé que les descriptions de produit pour ses boutiques en ligne allaient être générées par l'IA, alimentées par ce qu'ils appellent « Shopify Magic ». Dans le même temps, Magician, le dernier plugin de Diagram, utilise des modèles génératifs profonds pour insérer des icônes, du texte et des images dans les fichiers de design Figma à partir d'invites textuelles. (Vous pouvez retrouver notre conversation avec Jordan Singer à propos de la création de Magician grâce à l'API de plugin de Figma ici

.)

Andrew de chez Diagram affirme que GitHub Copilot a changé sa conception des interactions possibles entre l'homme et la machine. L'assistant machine learning est intégré dans l'éditeur de code et termine automatiquement des lignes de code ou suggère des solutions à partir d'invites textuelles. « C'est un peu comme une extension de votre cerveau », explique-t-il. « Je commence à écrire le nom d'une fonction, et avant même que je parvienne aux paramètres, l'assistant a déjà complété le reste de la ligne. » Il prend également en compte le contexte dans l'éditeur, pas uniquement le fichier actuel, mais aussi d'autres aspects d'un projet. Il fait également des suggestions éclairées pendant que l'on travaille.

Il n'est toutefois pas infaillible. Les utilisateurs devront peut-être encore ajuster la base du code et corriger des erreurs, le cas échéant. Néanmoins, GitHub Copilot crée une interaction entre l'homme et la machine. En plus d'accélérer les workflows des développeurs, cela souligne la présence déjà significative de l’IA dans le design et le développement. Andrew se réjouit de continuer à créer des outils intelligents comme Genius pour l'ensemble de la communauté des créateurs de design systems. « Les design systems vont faire l'objet d'une évolution majeure au cours des années à venir. Je pense que le meilleur moyen de prédire l'avenir est de le créer », ajoute-t-il.

Kaelig Deloumeau-Prigent, fondateur du Design Tokens W3C Community Group, voit en l'IA un grand potentiel pour améliorer les workflows des design systems. « Il y a tant d'explorations qui peuvent être guidées par l'IA. GitHub Copilot peut désormais nous aider à écrire du code. J'aimerais voir le même genre de collaboration avec la technologie pour les design systems », explique-t-il. Kaelig pense que les prochaines années donneront lieu à de meilleurs systèmes de gestion des tokens, qui contribueront à réduire les obstacles à l'entrée. Actuellement, il existe peu de solutions clé en main, et l'alternative nécessite des connaissances approfondies en matière de codage, ainsi qu'une compréhension de GitHub, des audits et des automatisations. « Certaines équipes pourraient échouer à surmonter cet obstacle », indique-t-il. Pour lui, le design assisté par l'IA constitue un domaine dans lequel les tokens seront les plus utiles à l'avenir.

Prendre le train de l'avenir en marche

À l'occasion d'un groupe de discussion animé par Figma en 2021

sur l'année à venir, Soleio a indiqué : « Nous devrions nous attendre à des progrès considérables dans l'automatisation de l'exploration et du traitement des retours. Comme nous collaborons aujourd'hui avec d'autres personnes, je prévois qu'à l'avenir, le travail intellectuel, les retours et les itérations se feront davantage avec des collaborateurs virtuels, des agents non humains adaptés aux tâches que nous effectuons manuellement à l'heure actuelle. »

Alors que l'IA devient plus accessible, nous pouvons nous attendre à de nouvelles fonctionnalités, telles que le développement de design systems capables de créer de nouvelles interfaces, ou l'identification en amont de potentiels problèmes ou conflits. La technologie a une autre opportunité en matière de documentation et d'orientation, notamment via l’aide qu'elle peut apporter en termes de conformité et de suggestions d'utilisation.

Les designers (humains) restent nécessaires

L'IA peut constituer une aide précieuse pour les designers, mais il est important de garder à l’esprit qu’elle reste un outil. Tout comme les widgets et les plugins, elle peut automatiser certaines tâches et offrir de nouvelles possibilités en matière de design, mais elle ne peut pas remplacer la créativité et la capacité humaine à résoudre des problèmes (et elle suscite également de nouvelles inquiétudes). Avec l'émergence de nouveaux environnements tels que Web3 et le Metaverse, il deviendra de plus en plus important de mettre en place des solutions de design adaptées, ainsi que des interactions plus variées et plus intéressantes.

Pour Sam Anderson, director for design systems & accessibility chez Intuit, le design demeurera, dans un avenir proche, une activité essentielle et pilotée par l'humain. « Il serait difficile de créer une IA capable de comprendre le problème d'un client, de trouver dans un catalogue le produit qui pourrait le résoudre et de le concrétiser correctement à l'écran. Les designers humains sont encore nécessaires dans ce cas », explique-t-il. Il espère toutefois que l'automatisation pourra accélérer le processus de design, ce qui permettrait de passer plus rapidement du concept au prototype, mais aussi d’accélérer les expérimentations, les tests et les boucles de feedback avec les utilisateurs.

Soyez rassuré, il y a toujours besoin de designers

. « Au fur et à mesure que le design se rapproche du codage et que les design systems deviennent plus faciles à utiliser et davantage acceptés, le nombre de personnes capable de créer des interfaces satisfaisantes augmente », explique Andrew Hogan, head of insights chez Figma. « Toutefois, le besoin d'interactions de qualité, nouvelles et intéressantes, va augmenter. Le désir des entreprises de se démarquer, de se doter d'une image forte et de se différencier laisse présager une augmentation de la demande en designers ». On attendra toujours d’eux qu'ils explorent davantage de voies, qu'ils prennent en compte plus de retours, qu’ils relèvent de nouveaux défis, et qu'ils apportent un regard neuf sur les problématiques

Les designers et les technologues possédant une compréhension approfondie de ces technologies, prêts à créer les solutions éthiques et responsables de demain, sont bien évidemment concernés par cette demande.