Figma sur Figma : évolution de notre identité visuelle
L'identité visuelle de Figma a fait l'objet d'un rafraîchissement audacieux. Des primitives ludiques à une nouvelle palette colorée, nous dévoilons la dernière évolution de notre marque, qui s'adresse à tous les fabricants de produits.
Partager Figma sur Figma : évolution de notre identité visuelle
Au cours de la dernière décennie, Figma est passée d'un outil destiné principalement aux concepteurs à un écosystème soutenant les développeurs, les responsables produits et l'ensemble des équipes produit. À mesure que nous avons élargi notre champ d'action au-delà de notre unique domaine de design, nous avons reconnu la nécessité d'aller au-delà d'un langage visuel ancré dans le langage vectoriel vernaculaire : les curseurs statiques et les contours noirs épais qui ont défini notre marque au cours des cinq dernières années. Nous souhaitions que notre nouvelle identité reflète les nombreuses contributions impliquées dans la transformation du concept à la réalité.
Nous avons collaboré avec Grilli Type pour créer Figma Sans, une police de caractères grotesque. En plus de Figma Sans, notre marque inclut trois autres polices : Figma Condensed, Figma Mono et Figma Hand par OH no Type.
Nous avons axé notre nouvelle marque sur quatre fondements essentiels :
- Primitives polyvalentes représentant les divers individus impliqués dans la co-création
- Compositions dynamiques reflétant des modes variés de création et de construction
- Une palette de couleurs élargie, s'appuyant sur des variables pour faciliter l'adaptation à tous les contextes
- Principes de mouvement intégré animant les actions et les flux dans le processus créatif
Grâce à ces éléments, nous avons donné jour à un langage visuel qui reflète ce qu'est Figma aujourd'hui et indique la direction que nous prenons : un endroit où chacun peut donner vie à ses idées, quel que soit son rôle ou son parcours.
Démarrage dans le bac à sable
Pour démarrer la phase exploratoire, le Brand Studio de Figma a commencé par analyser toutes les manières dont les utilisateurs exploitent Figma, depuis le brainstorming et l'idéation initiale jusqu'à l'inspection des éléments et la phase de finalisation.
L'équipe a été attirée par le concept d'activités se déroulant dans un espace partagé, semblable au jeu parallèle. Jefferson Cheng, designer de la marque, se souvient avoir été très tôt inspiré par les aires de jeu d'Isamu Noguchi et de Mitsuru Senda : « Ils étaient une métaphore du plan de travail Figma, un espace où les gens se réunissent pour créer et expérimenter. »
Si l'équipe a fini par dépasser la métaphore associée à une aire de jeu, elle a continué à s'appuyer sur le concept d'activités simultanées se déroulant dans un espace partagé. Le plan de travail infini de Figma a également servi de bac à sable à l'équipe, qui a exploré des directions et testé des schémas de couleurs et des motifs à l'aide de variables. Damien Correll, directeur de Brand Studio, explique : « Le plan de travail permet aux gens d'interagir avec les objets de différentes manières. Un développeur peut envisager quelque chose d'aussi simple qu'un rectangle dans un sens, en mode inspection, tandis qu'un designer peut le voir sous un autre angle. »
Ces manières de voir et d'interagir sont devenues le cœur de ce nouveau langage visuel. L'équipe a défini autant d'activités qu'elle le pouvait, en assignant des règles et des comportements à chacune d'entre elles. Ces directives ont servi de support aux premières explorations et ont constitué la base d'un lexique visuel où un seul élément peut être manipulé de manière infinie pour raconter d'innombrables histoires.
Réimaginer l'iconographie et l'illustration
Notre ancien système d'illustration reposait fortement sur des formes géométriques dotées d'une énergie de personnage principal, des formes qui se poussent les unes les autres et jouent le rôle de protagonistes dans presque chaque vignette. Pour cette mise à jour, l’équipe a cherché à créer un langage plus flexible qui pourrait évoluer avec Figma dans les années à venir.
Damien souligne : « Les identités visuelles durables doivent être considérées comme des langages et non comme des systèmes. Les systèmes impliquent des règles strictes et une prévisibilité. »
Les identités visuelles durables doivent être considérées comme des langages et non comme des systèmes.
Pour y parvenir, le Brand Studio de Figma a développé une collection de primitives, des formes de base constituant les éléments constitutifs de nos illustrations. Elle contient aussi bien des taches ambiguës que des formes figuratives, illustrant diverses conceptions de la forme et de la fonction.
Les éléments de base ont été inspirés par des exemples quotidiens de création, à la fois numériques et physiques.
Leandro Castelao, designer de la marque, précise : « Les formes primitives sont intentionnellement variées, à l'image des mains qui les ont créées. » Leur caractère quelque peu incongru et leur ouverture signifient également qu'il est toujours possible de les faire évoluer.
Les primitifs sont volontairement variés, à l'image des mains qui les ont fabriqués.
Bien que chaque primitive soit distincte, elles ont toutes des caractéristiques clés en commun. Elles sont très graphiques et plus « géantes » que la génération précédente. Pensez-y : grandes formes, nœuds surdimensionnés et utilisation audacieuse de la couleur. Le terme géant ne concerne pas seulement la taille, mais aussi l'attention portée aux détails, le soin et la précision investis dans la création d'un produit.
« C'est presque comme si nous avions zoomé sur chaque élément, en supprimant les parties non essentielles et en nous concentrant sur la composition », ajoute Jefferson. Il est important de souligner que les primitives sont basées sur des vecteurs, ce qui garantit qu'elles peuvent être entièrement créées dans Figma.
Comme le dit Eamesisme : « Les détails ne sont pas des détails. Ce sont eux qui créent le design. »
Les nœuds géants, de grands carrés fixés au coin des cadres de délimitation, amplifient l'interface utilisateur de Figma, impliquant l'acte de « sélection » sur le plan de travail. Pour Maria Chimishkyan, designer de la marque, voir des nœuds géants sur le papillon a été un premier moment fort : « Les choses ont commencé à s'enchaîner. Cela ressemblait à une prise de vue poignante et abrégée des nœuds, sélective de manière significative. »
Les nœuds ont également ouvert de nouvelles manières de suggérer des mouvements et de l'interactivité. Les nœuds carrés deviennent des cercles lorsqu'un objet est « modifié ». Les objets sélectionnés peuvent être déplacés sur le plan de travail ou modifier l'ordre de l'axe z, comme dans Figma. Les primitives peuvent être « passives » (formes de couleur unie), « activées » (avec des motifs) ou « hyperactivées » (avec des spectres de couleurs plus larges). Les bordures peuvent également être activées par la couleur, le motif et l'échelle, conformément au principe du géant.
Les designers de mouvement ont collaboré étroitement avec les designers de la marque sur des études d'animation, générant encore plus d'idées sur la manière dont tous ces éléments interagissent, comme une bordure en pointillés symbolisant l'hyperactivité et la collaboration.
Alignement sur la composition
Tout comme dans Figma, les objets peuvent interagir avec d'autres objets sur le plan de travail, créant ainsi des compositions infinies. Pour normaliser ces dispositions, l'équipe a revisité sa liste de modalités et d'actions tirée de son audit du processus de développement de produits. L'« idéation » est représentée par un collage libre, comme des notes autocollantes sur un plan de travail FigJam, la « conception » repose fortement sur la manipulation et la transformation, et la « construction » est représentée par des abstractions visuelles de codage, d'inspection et d'annotation.
Pris dans leur ensemble, ces arrangements compositionnels se composent de quatre mouvements principaux :
- Chevauchement : Les formes se superposent en calques, acceptant le désordre (occasionnel) du plan de travail Figma.
- Révéler : une forme sélectionnée peut « inspecter » ou exposer la structure sous-jacente d'un autre élément.
- Regroupement : les formes et les motifs se regroupent pour former des compositions libres.
- Multi-mouvements : différents éléments de composition sont réunis.
Notre ancien style de contour noir
Une palette de couleurs élargie
Alors que les formes et la composition traduisent la nature polyvalente du travail, notre palette de couleurs élargie renforce le message. Tout en conservant notre violet emblématique, nous avons introduit une gamme de couleurs plus large comprenant des couleurs primaires audacieuses, des teintes vives fluorescentes et des tons neutres sobres qui reflètent la diversité de notre communauté et l'étendue de ce que vous pouvez faire avec nos produits.
Dans un secteur où posséder une couleur ou une association est considéré comme le summum du succès en matière de branding (pensez au rouge Coca-Cola ou au vert John Deere), Damien pense qu'une telle approche est irréaliste pour de nombreuses marques contemporaines : « [Les marques emblématiques] ont investi du temps pour construire cet actif et, franchement, elles ont été les premières à le faire. Nous disposons d'une équipe interne incroyable qui a poussé à l'élaboration d'une palette plus sophistiquée, reconnaissant que nous avons besoin d'un spectre avec un mode d'utilisation fondé sur des principes, plutôt que d'une approche limitée, couleur par couleur. »
Le Brand Studio a développé un système complexe, mais harmonieux de combinaisons de couleurs, utilisant des variables pour créer une gamme d'expressions. Ils ont commencé par associer deux couleurs apparemment tonales au même niveau de teinte, créant ainsi un effet de vibration lorsqu'elles sont vues côte à côte. Sans contours noirs, ces couleurs se superposent, créant des contrastes nets et une impression de mouvement, incarnant l'énergie et le parcours du travail d'équipe.
L'équipe a élaboré trois schémas de couleurs principaux, chacun composé d'une paire de couleurs primaires vives et de quatre couleurs secondaires. Ces schémas ont des modes clair et sombre, échangeant les couleurs secondaires selon le contexte.
Deux principes de couleur orientent à la fois les illustrations et les images de produits :
- L'éclat des tons : les couleurs créent des combinaisons électriques et inattendues qui transmettent l'activation tout en équilibrant le contraste et la distinction.
- Schémas adaptatifs : les schémas de couleurs offrent une utilisation flexible, permettant des variations du foncé au clair, du simple au complexe, pour répondre à différents besoins.
Les combinaisons de couleurs maximales sont utilisées pour mettre l'accent, comme l'échelle dans notre principe de grandeur.
Pour souligner, des jeux de couleurs maximalistes sont utilisés, avec des couleurs qui accentuent les motifs, les lignes ou les formes hyper-activées.
Mise en œuvre
Le mouvement n'est pas un simple ajout, il fait partie intégrante de la manière dont nous exprimons nos principes. Dès le départ, nous avons réfléchi à la manière dont les éléments visuels se déplaceraient et interagiraient. « Nous nous sommes concentrés sur les mouvements de base comme la sélection, l'activation et la transformation », explique Gilles Desmadrille, designer Brand Motion. « Il s'agit de donner vie au plan de travail sans dépendre des curseurs. »
Le chaos collaboratif de la conception pour tous
Le processus de renouvellement de notre marque n'était pas du tout linéaire et a impliqué des mois d'exploration collaborative. L'équipe a travaillé de manière fluide, en s'inspirant et en rebondissant sur le travail de chacun. Souvent, l'équipe perdait de vue l'auteur original d'une idée ou d'une itération, ce qui est un résultat idéal pour une équipe cherchant à créer un système évolutif. « Figma se prête à l'absence d'ego », déclare Jefferson. « Peu importe d'où quelque chose provient ; nous nous unissons pour créer quelque chose de formidable. »
Peu importe l'origine d'une chose, nous nous réunissons pour faire quelque chose de grand.
Cette approche collective a également aidé l'équipe à procéder à une itération rapide. Maria ajoute : « Ce n'est pas comme si on attendait le seul designer spécialisé dans les primitives. Nous les faisons toutes et les réutilisons. » L'équipe a tiré parti des fonctionnalités du système de design de Figma pour créer des bibliothèques de marques et des kits d'outils, rendant les ressources facilement accessibles à tous chez Figma.
Une marge de progression
« Ce n'est pas une fin en soi. C'est un nouveau point de départ », déclare Taryn Cowart, responsable du design du Brand Studio. « Nous avons créé un système suffisamment flexible pour nous adapter à mesure que nous continuons à croître et à évoluer. »
Ceci est la deuxième partie de notre série explorant la dernière évolution de la marque Figma, suite à notre analyse approfondie de notre nouvelle police personnalisée, Figma Sans.
Le Brand Studio de Figma :Andrea Helmbolt, stratège de marque ; Andy Luce, designer de marque ; Becca Ramos, designer de marque ; Catherine Bui, designer de marque ; Damien Correll, directeur artistique ; Gilles Desmadrille, designer Brand Motion ; Jefferson Cheng, designer de marque ; Kaley Aposporos, rédactrice de marque ; Leandro Castelao, designer de marque ; Maria Chimishkyan, designer de marque ; Sydney Halle, productrice de marque ; Taryn Cowart, responsable du design
Collaborateurs de l'agence : Buck, pour la campagne hors domicile ; Nimble, pour le travail narratif.
