Histoire — design systems
Auditer une bibliothèque d'icônes à la dérive, écran par écran
« J'ai hérité d'un produit avec des icônes de quatre époques empilées les unes sur les autres. Avant de consolider quoi que ce soit, il me fallait savoir exactement ce qu'il y avait sur la page — pas ce que le fichier Figma prétendait qu'il y avait. »
Le contexte
Six cents écrans, et un fichier de design auquel personne ne se fiait
Ce qui ne marchait pas
« La bibliothèque Figma avait dérivé depuis des années. Trois engrenages “réglages”, deux croix “fermer” à des épaisseurs de trait différentes, une flèche “exporter” discrètement redessinée en 2022 mais jamais mise à jour dans le fichier de design. Je ne pouvais pas auditer contre Figma parce que Figma faisait partie du problème. La vérité était dans le DOM. »
Le premier essai de Maya fut le manuel que tout front-end connaît : ouvrir DevTools, trouver le nœud <svg>, copier le HTML externe, le coller dans un fichier de brouillon, ajouter le xmlns à la main pour qu'il s'affiche vraiment, recommencer. « Vers la quarantième icône, un mardi, j'ai admis que ça allait me manger la semaine entière et que je ferais quand même des erreurs de recopie. »
Le changement
Au lieu de copier les nœuds un par un, Maya a lancé SVG Downloader sur chaque écran principal. Le popup parcourt le DOM et annonce un compte — 0 → 24 SVG trouvés — puis remet chacun d'eux en vrai fichier, espace de noms réparé pour qu'il s'ouvre directement dans Figma et VS Code.
« Le compte a été la première chose utile. Un écran que je croyais à huit icônes en annonçait quatorze — six étaient des fonds décoratifs posés en CSS qui n'apparaissaient dans aucun inventaire. Puis Tout télécharger en ZIP m'a donné le jeu complet de l'écran, dédoublonné et numéroté, d'un coup. » Faire un diff de fichiers autonomes est trivial ; faire un diff d'une app en fonctionnement ne l'est pas.
« Cela a transformé l'audit d'une fouille archéologique en un diff. J'avais le balisage réel de chaque icône du produit, côte à côte, en un après-midi — et je pouvais enfin prouver lesquelles étaient vraiment identiques. »
— Maya Okafor, ingénieure design systemsLe résultat
- ~40icônes quasi identiques trouvées et ramenées à un jeu canonique
- 1 après-midiau lieu de la semaine vers laquelle filait la passe manuelle de copier-coller
- 0corrections de
xmlnstapées à la main — chaque fichier s'est ouvert du premier coup
- Ce qui a fait le travail
- La détection du SVG en ligne pour les composants, la prise des fonds CSS pour les décoratifs, et Tout télécharger en ZIP par écran.
- Pourquoi pas DevTools
- Copier des nœuds à la main perd le
xmlns, rate entièrement les sources CSS et sprite, et ne tient pas au-delà de quelques icônes. Voir extraire des icônes SVG. - Confidentialité
- Tableau de bord propriétaire, donc cela comptait : rien n'a quitté la machine. Pas d'envoi, pas de compte, pas d'analytique.
Histoire composite — un déroulé illustratif mais représentatif. La personne et l'entreprise sont fictives ; le comportement de l'extension décrit ici est réel. Plus d'histoires →
Auditez ce qui est vraiment sur la page
Comptez les vecteurs, sortez le vrai balisage, prenez tout l'écran en ZIP. Gratuit et sur l'appareil.