Le dessin est souvent prêt avant le code. Dans Figma, les icônes existent déjà, alignées sur une grille, nommées plus ou moins clairement. Le travail commence ensuite : les sortir, les ranger, les intégrer. Depuis 2024, le plugin Genicons sert précisément à ce passage. Voici comment nous allons d’un fichier Figma à une webfont utilisable, sans en faire un chantier.
Le problème n’est pas le dessin, c’est le trajet
Dans beaucoup d’équipes, le designer et le développeur ne se disputent pas sur le tracé d’une loupe. Ils se perdent dans le transport. On exporte un SVG. On le pose dans un dossier de discussion. On le télécharge. On le renomme pour le dépôt. On s’aperçoit qu’une autre icône a le même nom. On recommence.
Ce trajet prend peu de temps une fois. Il en prend beaucoup à la dixième modification. Une icône change d’épaisseur. Deux pictogrammes s’ajoutent au menu. Le jeu n’est plus celui de la semaine précédente, et personne ne sait plus quelle version est en ligne.
Genicons n’invente pas les icônes à votre place. Il les reçoit, les organise en collections, et génère une police prête à être intégrée dans un projet web ou mobile. Les SVG peuvent arriver depuis l’ordinateur, depuis une archive ZIP, ou directement depuis Figma. C’est cette dernière voie que nous détaillons ici, parce que c’est souvent là que le dessin vit déjà.
Préparer le fichier Figma avant d’envoyer quoi que ce soit
Un plugin ne rattrape pas un fichier confus. Avant d’exporter, nous rangeons. Chaque icône a un nom lisible, stable, sans « copie » ni « final2 ». Les calques inutiles sont retirés. La zone de l’icône est claire : un pictogramme centré sur une grille, pas un cadre décoratif oublié autour.
Nous vérifions aussi ce que l’on envoie. Une collection d’icônes de navigation n’a pas besoin d’embarquer les illustrations de la page d’accueil. Plus le jeu est lisible, plus les classes générées le seront. Genicons accepte le SVG, l’optimise, et le rend net à toute taille. Il ne décide pas quels dessins méritent d’entrer dans le produit.
Si plusieurs personnes touchent au même fichier, on s’accorde sur une page ou une section dédiée aux icônes. Ce n’est pas une règle d’agence universelle. C’est une habitude qui évite d’envoyer, par erreur, un composant de maquette à la place d’un pictogramme.
Enfin, on distingue les icônes monochromes, destinées à être colorées en CSS, des icônes qui portent déjà leurs couleurs. Genicons propose trois types d’affichage : plein, coloré et contour. Le choix se fait ensuite, dans l’outil, mais il est plus simple si le fichier source est déjà pensé pour l’usage.
De Figma à la collection, en quelques minutes
Le plugin Figma de Genicons permet de sélectionner les icônes dans le fichier et de les envoyer vers une collection, sans passer par un export manuel, un téléchargement, puis un ré-import. On relie le compte Figma, on choisit les éléments, on les transmet. Le trajet habituel — exporter, zipper, glisser-déposer — reste possible, notamment pour un livrable déjà sorti du fichier. Il n’est plus obligatoire.
Une fois les SVG dans Genicons, on les organise par projet, par thème ou par style, dans autant de collections que nécessaire. Sur les plans qui le permettent, ces collections ne sont pas plafonnées. On peut aussi importer un ZIP contenant plusieurs fichiers d’un coup. Les SVG sont optimisés automatiquement.
C’est à cette étape que l’on génère la webfont. Le résultat n’est pas une image. C’est une fonte que le site chargera, plus un mode d’emploi concret : une balise link par collection, et des classes du type gi gi-icon-name. La documentation du produit décrit aussi l’usage en CSS via un CDN, ainsi que l’intégration dans React, Vue et en Web Components. Nous renvoyons vers cette documentation plutôt que de recopier ici des extraits qui évoluent avec l’outil.
Le temps « quelques minutes » n’est pas un slogan de lancement. Il décrit le cas où le fichier Figma est déjà en ordre. Si les icônes sont éparpillées, mal nommées, ou mêlées à d’autres calques, le temps se passe avant le clic, pas dans l’outil.
Intégrer la fonte, puis la tenir à jour
Dans le projet, on charge la collection dont on a besoin. On n’empile pas toutes les fontes « pour plus tard ». Dans le HTML, une icône devient un élément portant sa classe. Dans le CSS, on règle la taille et la couleur. Si le pictogramme doit suivre le texte, on travaille en unités relatives.
Quand une icône change dans Figma, on recommence le même chemin, volontairement court : sélection, envoi, régénération, mise à jour de la fonte côté site. L’intérêt n’est pas d’éliminer toute revue. L’intérêt est que le geste soit le même à chaque fois, et qu’il ne dépende plus d’un fichier perdu dans une conversation.
Pour travailler à plusieurs, le plan Team permet d’inviter des collaborateurs par e-mail. Ils accèdent aux collections partagées et peuvent les utiliser dans leurs projets. Les accès restent contrôlés par celui qui invite. Une fonte n’est utile que si l’équipe sait où la trouver et qui a le droit de la modifier.
Les animations CSS restent optionnelles. Genicons permet d’ajouter une rotation, un rebond, un fondu, une pulsation, de prévisualiser le résultat et de copier le code. Nous les réservons aux états qui le méritent : un chargement, une confirmation. Une icône de menu n’a pas besoin de bouger pour être comprise.
Ce que nous ne déléguons pas à l’outil
Le plugin ne remplace pas une relecture. Après génération, nous vérifions quelques points simples. Les noms de classes correspondent-ils à ce que le développeur attend ? Les icônes s’alignent-elles correctement à côté d’un libellé ? Les couleurs tiennent-elles sur fond clair et sur fond sombre ? Une icône décorative est-elle bien masquée pour les lecteurs d’écran, et une icône porteuse de sens a-t-elle un nom accessible ?
Nous ne demandons pas non plus à l’outil de décider du jeu. Trop d’icônes, même parfaitement exportées, brouillent une interface. Une collection courte, stable, documentée, vaut mieux qu’une valise dans laquelle on a versé tout le fichier Figma.
Genicons est un produit que nous faisons vivre depuis 2024, avec un essai, un abonnement géré par Stripe, une API pour le plugin et pour les usages professionnels, et une documentation publique. Les formules et les prix sont sur le site. Ils peuvent évoluer : c’est là qu’il faut les lire, pas dans une note d’agence.
Un point de détail revient souvent après les premiers envois : le format d’arrivée. Genicons attend du SVG. Si le fichier Figma contient des images raster placées « comme des icônes », le plugin ne transformera pas magiquement un bitmap en glyphe propre. Il faut un vecteur. De même, un dessin dont les contours n’ont pas été unifiés, ou qui s’appuie sur des effets lourds, donnera un résultat décevant. On simplifie le tracé dans Figma, puis on envoie. Cette minute-là évite une régénération pour rien.
La documentation officielle du produit reste la référence pour le code d’intégration. Nous n’en faisons pas une copie ici, parce que les extraits vieillissent mal. En revanche, le principe ne change pas : une collection, un lien, des classes stables. Si une équipe rejoint le projet plus tard, elle doit pouvoir retrouver cette règle en une page, pas dans une conversation oubliée.
Une passe, puis la suivante
Le bon rythme, chez nous, tient en une phrase. On range le fichier Figma. On envoie les icônes utiles. On génère la fonte. On l’intègre. On relit. Quand le dessin change, on refait le même geste, sans inventer un nouveau protocole.
Si vous avez déjà un jeu d’icônes dans Figma et que le passage au site est devenu un rituel, nous pouvons regarder ça avec vous. Écrivez-nous via la page contact, ou prenez un premier rendez-vous. On part du fichier, pas d’une promesse d’outil.