Création d'une icône de produit
La création d'icônes de produit chez Figma demande des dizaines, voire des centaines, d'itérations. Le product designer Tim Van Damme partage son approche réfléchie de la conception d'icônes et l'exploration créative qui façonne chaque résultat final.
Partager Création d'une icône de produit
Tim Van Damme a créé plus d'icônes pour Figma qu'il ne peut en compter. Cette année, alors que nous nous préparions à doubler notre suite de produits, il a conçu quatre nouvelles icônes de produit et a remanié les icônes existantes pour qu'elles forment un ensemble cohérent.
Pour Tim, cela signifiait sortir des sentiers battus. Entre des centaines de variations d'abeilles pour Figma Buzz et d'innombrables versions d'étoiles et de baguettes pour Figma Make, le processus de Tim montre que suivre une formule ne signifie pas obtenir des résultats uniformes. Ici, nous jetons un coup d'œil en coulisse sur la manière dont Tim transforme de grandes idées en symboles élégants grâce à un mélange de créativité et de curiosité.
Étape 1 : commencer par un ensemble de directives
Comment sublimer un produit entier dans un symbole unique ? Et d'ailleurs, quels sont les ingrédients d'une « bonne » icône ? Ce sont des questions que Tim se pose depuis son premier mois de travail. Après avoir découvert qu'il n'existait pas de système officiel pour créer des icônes Figma, Tim a élaboré son propre ensemble de directives, cimentant ainsi officieusement son rôle de designer d'icônes de facto.
Pour garantir cette cohésion et cette cohérence visuelle, Tim commence par ces directives, qui incluent notamment les principes suivants :
- Tous les tracés ont une largeur d'un pixel.
- Les découpes ont une épaisseur d'un pixel.
- Toutes les extrémités sont arrondies.
- Les icônes sont équilibrées et remplissent l'espace disponible au mieux.
- Les icônes sont créées en trois tailles pour fonctionner sur toutes les surfaces nécessaires.
Pendant la phase de conception, Tim tient compte de la façon dont les icônes s'adapteront à différents formats. En plus de figurer dans la barre d'outils, ces icônes apparaissent sur des supports marketing et des panneaux d'affichage de 12 mètres, constituant la base visuelle de l'écosystème en pleine expansion de Figma. C'est parfois un moyen facile d'éliminer le mock-up initial d'une icône : si les lignes individuelles commencent à devenir floues en zoom arrière et si les éléments sont difficiles à distinguer, il passe à la version suivante.
Étape 2 : aller à la racine du produit
En plus de respecter la charte de marque de Figma, chaque icône doit représenter l'identité visuelle d'un produit spécifique.
« Nous devons communiquer beaucoup de détails dans un petit espace », explique Tim. Pour s'accorder sur les détails qui comptent le plus, Tim et d'autres membres des équipes design et de produit brainstorment une liste de concepts clés qui correspondent à chaque produit, improvisant sur des mots et des thèmes associés pour susciter l'inspiration.
Par exemple, en créant une icône pour la communauté Figma, Tim a cherché un design qui reflète l'esprit d'apprentissage et de partage d'idées. Il a noté des phrases comme « connexion via la communauté », « échanges de connaissances entre homologues » et « apprendre ensemble » pour guider sa création. Cela l'a amené à expérimenter différents symboles de personnes, d'arbres et de livres.
De même, lors de la conception de l'icône pour Figma Buzz, Tim et l'équipe ont exploré des thèmes comme la magie, la création et la génération d'images par l'IA, ce qui a donné lieu à des itérations sur des orbes de verre, des étoiles et d'autres formes liées à la magie.
Étape 3 : itérer et faire évoluer l'idée
Tim gagne du temps sur des dizaines d'itérations d'icônes en utilisant un tracé à largeur variable et en modifiant plusieurs calques vectoriels à la fois.
Pourvu de paramètres de design et d'idées de base sur lesquelles s'appuyer, Tim commence sérieusement ses investigations. C'est à ce moment que son expertise prend vie, lorsqu'il crée des dizaines d'itérations d'une famille d'icônes, ajustant et peaufinant chaque symbole lentement mais sûrement. Les arbres deviennent des visages, les visages deviennent des mandalas, les formes abstraites tournent et s'entrelacent. Ce genre d'expérimentation itérative et pratique s'enracine dans des années d'expérience, mais son amour du jeu créatif entre également en ligne de compte. « Je suis généralement un long cheminement créatif, juste pour entretenir cette partie du cerveau », déclare-t-il.
Pour Figma Make, il a passé des heures à jouer avec des concepts de mouvement et de transformation, à dessiner des roues, des papillons abstraits, des boussoles et des hand spinners. Et, pour Figma Buzz, il a passé une journée à créer des centaines de versions de symboles d'abeilles, avec des formes d'ailes, des lignes et des antennes variées.
Enfin, Tim vérifie la cohérence de chaque nouvelle icône avec l'ensemble de la collection. Est-ce que l'une d'elles se démarque trop par rapport aux autres ? Forment-elles un ensemble harmonieux ? Leur fonctionnalité est-elle suffisamment marquée ? « Chaque icône est unique, mais à la fin, si vous en mettez 20 ensemble, vous devez pouvoir dire, « Ce sont des icônes Figma », explique Tim.
Chaque icône est unique, mais si vous en mettez 20 ensemble, vous devez pouvoir dire, « Ce sont des icônes Figma ».
Étape 4 : favoriser la collaboration tout au long du processus
Tim sollicite fréquemment le feedback des product designers et product managers, en orientant la conversation à l'aide d'une évaluation d'une à cinq étoiles pour illustrer le niveau de confiance qu'il place dans un design. Les commentaires qu'il reçoit peuvent être directs (« trop chargé, trop complexe ») ou vagues (« ça ne semble pas juste »). Parfois, une journée entière de création est réduite à néant avec un simple feedback du type « nous devrions abandonner l'idée des abeilles », ce qui l'a conduit, dans ce cas, à se tourner vers des icônes de mégaphones pour Figma Buzz. Pour Tim, cela fait simplement partie du processus. « C'est une expérience de vie », dit-il. « Même si nous avons finalement pris une autre direction, je peux dire que personne n'a jamais consacré autant de temps et d'énergie à essayer de créer l'icône d'abeille parfaite. »
L'une des fonctionnalités préférées de Tim est le panneau des tracés dans Figma Draw, qui lui a permis d'économiser de nombreuses heures et clics en lui fournissant tous les contrôles nécessaires pour concevoir dans un seul endroit.
Parfois, Tim recueille le feedback d'un plus large public. Pour recréer l'icône FigJam, il a interrogé toute l'entreprise pour savoir quels termes et idées les gens associaient le plus souvent au produit. Le terme qui est revenu le plus souvent étant « notes », la nouvelle icône a naturellement pris la forme d'une note. Il a procédé de même pour le lancement de Figma Make, Figma Buzz, Figma Sites et Figma Draw, en recueillant le feedback dans un canal Slack public. « Tous les designers n'aiment pas cette manière de travailler parce qu'on collecte beaucoup d'avis », explique-t-il. « Mais j'adore interagir avec des personnes qui ne sont pas designers et entendre ce qu'elles pensent. J'aime dire, « Regardez cette icône. Que voyez-vous ? Que ressentez-vous ? »
« J'adore interagir avec des personnes qui ne sont pas designers et entendre ce qu'elles pensent.
Étape 5 : finaliser le produit
Dans la dernière ligne droite, l'intuition a son rôle à jouer. Pour concevoir la nouvelle icône Communauté par exemple, Tim a abandonné les premières études d'un symbole de livre parce qu'il craignait que cela ne ressemble trop à un symbole déjà existant dans la bibliothèque Figma. Mais, après avoir combiné les contours de la toute première icône Communauté de Figma avec le livre, ça a fait tilt. « C'était vraiment puissant. J'ai encore du mal à expliquer pourquoi. Mais quand je regarde l'icône, je ressens réellement quelque chose », précise Tim.
Tim rassemble six icônes à présenter à l'équipe de direction. Avec tant d'ajustements, d'itérations et d'échanges de feedback intégrés dans le processus, la décision finale devient plus simple. Le groupe considère chaque possibilité en tenant compte du design system de Figma, de la charte de Tim en matière de création d'icônes, de la façon dont elles s'intègrent avec la famille d'icônes dans son ensemble et d'un facteur plus difficile à mesurer : l'intuition.
