Avec l’interface repensée de Figma, votre travail passe au premier plan
L’interface UI3 libère de l’espace sur le plan de travail pour vous aider à donner vie à votre vision créative. Nous sommes heureux de vous montrer les coulisses de création de cette interface plus rationnelle et plus adaptable.
Partager Avec l’interface repensée de Figma, votre travail passe au premier plan
Inscrivez-vous pour la version bêta
Figma AI et UI3 sont actuellement en version bêta limitée et seront déployés progressivement. Vous pouvez obtenir la version bêta directement depuis Figma : en bas de l'écran, cliquez sur « ? » et sélectionnez Rejoindre la liste d'attente UI3+AI. Pour en savoir plus, consultez notre Centre d'aide.
Nous avons apporté de nombreux changements à Figma depuis son lancement il y a près de dix ans, mais malgré ses nouvelles fonctionnalités, ses nouvelles caractéristiques et ses nouveaux produits, la mise en page de Figma est resté remarquablement cohérente au fil des ans. Ce n’est pas un hasard. Vous êtes nombreux à passer plusieurs heures par jour sur Figma, et nous savons à quel point il est important de développer ses fonctionnalités tout en préservant et en respectant les workflows que vous avez perfectionnés jusqu’à présent. Mais au fur et à mesure que ces mises à jour se multiplient, ce qui paraissait simple peut devenir inutilement complexe. Pour remédier à cette complexité et poser les jalons de la prochaine décennie pour Figma, nous lançons UI3, la troisième refonte importante de l'outil depuis son lancement en bêta fermée.
Bien entendu, UI3 ne se limite pas à l’interface et au design visuel, mais comprend aussi des workflows et des comportements plus fondamentaux. Ces changements ont été apportés pour résoudre quatre problèmes fondamentaux :
- Concentrez-vous sur vos idées, pas sur l'UI de Figma : au fil des ans, Figma s’est enrichi de nouvelles fonctionnalités puissantes, des composants interactifs au design assisté par l’IA, mais elles risquent de se superposer et de détourner l’attention de l’essentiel. Nous avons voulu que le plan de travail soit moins axé sur notre interface et davantage sur vos travaux.
- Équilibrer les besoins des nouveaux utilisateurs et des designers professionnels : lorsque nous avons regardé l’interface Figma d’un œil neuf, nous avons réalisé qu’elle devenait inaccessible aux nouveaux venus. Nous avons entrepris de la rendre plus intuitive et plus conviviale tout en préservant l’ergonomie familière aux utilisateurs chevronnés de Figma. L'idée est de simplifier Figma, sans simplifier ce que vous pouvez faire avec.
- S’adapter à la nature changeante du design : il existe aujourd’hui de toutes nouvelles façons d’interagir avec le design, qui n’existaient pas il y a dix ans. Par exemple, de plus en plus de personnes utilisent des composants et explorent l’IA générative. Nous savons que Figma doit s’adapter à cela et offrir des niveaux d’abstraction plus élevés pour que les designers puissent manipuler des blocs de construction, et pas seulement des pixels.
- Poser les jalons de Figma : alors que nous resserrons les liens entre design et code avec Dev Mode et que nous augmentons votre efficacité avec Figma AI, nous lançons également de nouveaux produits tels que Figma Slides. L'idée est de préparer le terrain pour une suite d’outils cohérente au sein de Figma.
Stack the deck with Figma Slides
Say goodbye to lackluster presentations. Today, we’re announcing the open beta of Figma Slides, here to set a new standard for telling visual stories.
Au cœur de l’interface repensée de Figma
En gardant ces éléments à l'esprit, voici un aperçu des questions auxquelles nous nous sommes confrontés, des décisions que nous avons prises et de ce qui vous attend à l'avenir.
Préparer le terrain pour votre travail
Tout d’abord, nous avons commencé par réinventer le plan de travail Figma pour maximiser l’espace. Cela permet de mettre en avant votre travail, d’éliminer les distractions lorsque vous souhaitez vous concentrer, tout en gardant vos outils à portée de main. Nous avons commencé par faire des changements extrêmes, c'est-à-dire supprimer des fonctions jusqu’à sentir qu'elles manquaient. Notre objectif était d’obtenir autant de signaux que possible, puis de les réduire si nécessaire.
Nous avons d'abord testé des nouveautés assez radicales, comme une UI ultra-minimaliste qui n'apparaissait qu'au survol. Pas de panneaux, pas de propriétés, juste votre travail et vous. Dans d'autres variantes, les barres latérales pouvaient être masquées automatiquement. Ces itérations rendaient l'environnement de travail trop instable, mais elles nous ont permis de nous rapprocher de la solution ultime : des panneaux redimensionnables et une barre d'outils minimaliste située en bas du plan de travail, afin de libérer de l'espace en haut de l'écran et de donner une impression d'espace. Cela permet également de créer une structure Figma standard pour basculer facilement d'un produit à l'autre. L'interface peut être entièrement masquée, les panneaux n'apparaissant qu'en cas de nécessité.
Priorité aux fonctionnalités les plus importantes
Un autre choix clé consistait à repenser le panneau de propriétés afin de prioriser les commandes les plus importantes. Prenons l’exemple des composants. Lorsque les design systems ont décollé et que les composants sont devenus des éléments essentiels, nous avons réalisé que les commandes de composants, comme les variantes et les instances, méritaient d’être mises en avant, plus que les attributs tels que la couleur ou la taille. Il s’agit d’une modification qui permet de dédié du temps et de l’énergie pour les tâches qui occupent une part plus importante du travail des designers.
Autre changement important : toutes les options de mise en page, notamment la largeur, la hauteur et la disposition automatique, sont maintenant réunies dans un seul et même panneau. Cela diffère du panneau x, y, w, h présent dans la plupart des outils, mais est plus cohérent avec la façon dont les produits sont codés. Nous pensions que la largeur et la hauteur devaient primer sur les positions x et y, mais les premiers tests ont montré que cette inversion perturbait trop la mémoire musculaire. Nous nous sommes donc adaptés, en regroupant la disposition automatique, la largeur et la hauteur, mais en conservant la position x et y pour ne pas perturber les utilisateurs de longue date.
Nous avons également introduit Figma AI We’re introducing a suite of AI-powered features to help you push past creative blocks and bring your best ideas to life.
Meet Figma AI: Empowering designers with intelligent tools
Une interface centrée sur la convivialité, pas sur la décoration
À ses débuts, Figma s'est démarqué par son interface minimaliste : des angles vifs, des icônes abstraites, des affordances subtiles. Cela a fonctionné un temps, mais lorsque nous avons commencé à ajouter des commandes plus complexes, le langage visuel est devenu plus difficile à décrypter.
« Maintenir un vaste système d’icônes nécessite de trouver l’équilibre entre la cohérence visuelle et la transmission d’idées extrêmement complexes d'une manière souvent abstraite », explique Tim Van Damme, designer chez Figma.
UI3 présente des arrière-plans, des bordures autour des menus déroulants, des angles arrondis et 200 icônes expressives dessinées à la main par le designer Tim Van Damme. Ces éléments expliquent visuellement comment interagir avec la plateforme et s'adaptent à vos besoins. Activez les labels pour comprendre rapidement le rôle de chaque commande, ou désactivez-les pour vous concentrer sur votre travail.
Bien entendu, ce qui rend une interface conviviale diffère d’une personne à l’autre, d’autant plus au sein de notre propre équipe design. Les designers ont des avis très tranchés, et ceux de Figma ne font pas exception.
Dans une version de l’interface, nous avons intégré la grille d’alignement dans la disposition automatique afin de simplifier l’apparence générale du panneau et de le rendre plus accessible. Mais cela n’a pas vraiment fonctionné. La grille bougeait trop ; nous sommes donc revenus au design original afin de ménager la mémoire musculaire des utilisateurs, mais nous avons changé le style visuel pour le rendre plus abordable.
L'équilibre entre accessibilité et efficacité est devenu un sujet récurrent. Comment faire pour rendre l'interface Figma plus conviviale pour les nouveaux utilisateurs, sans être trop simpliste pour les designers expérimentés ? À force de persévérance, nous y sommes parvenus. Nous avons introduit des labels en option et des rubriques d'aide pour guider les nouveaux utilisateurs, tout en préservant la vitesse et les commandes chères aux experts.
Prise en charge d’une suite d’outils Figma
Nous en avons également profité pour créer davantage de cohésion dans cet écosystème en pleine expansion. Que ce soit pour du brainstorming dans FigJam, des retouches dans Figma Design ou des présentations dans Figma Slides, nous souhaitions fournir une expérience fluide et conviviale. Des modèles cohérents tels qu’une barre d’outils minimaliste et des panneaux rabattables flottants permettent de créer une ligne directrice, tout en mettant chaque outil en valeur. Il en résulte un écosystème qui s’adapte à vos besoins sans rien perdre de sa personnalité.
S'adapter à la nature changeante du design
La refonte de l'interface a été une étape cruciale. Mais, par bien des aspects, il s'agit plus d'un début que d'une fin. Nous avons posé de nouvelles fondations, et la magie n'opère que lorsque vous la mettez au service de votre processus créatif. Nous savons que l'adaptation à cette nouvelle interface prendra du temps, mais nous nous réjouissons à l'idée de vous accompagner dans ce parcours.
Les outils que nous utilisons évoluent constamment, tout comme le design. Après avoir aligné des pixels, nous nous dirigeons maintenant vers d’autres niveaux d'abstraction. La refonte de notre interface reflète ce changement, en rationalisant les workflows et en réduisant l’écart entre imagination et réalité. Alors qu’émergent l’IA et d’autres technologies, le potentiel de transformation des workflows est immense. Et à mesure que le design continue d’évoluer, du solo à la collaboration, du statique à l’interactif, des pixels aux modèles, nous serons à vos côtés, prêts à faire évoluer nos produits pour les mettre au service de vos idées. Cette refonte est une promesse : rester fidèles à nos racines, tout en se tournant vers l’avenir.
Aujourd'hui, l'interface Figma réinventée est progressivement déployée auprès des utilisateurs. Nous avons hâte de voir ce qu'elle vous permettra de créer.
