Historia — sistemas de diseño
Auditar una biblioteca de iconos a la deriva, pantalla a pantalla
«Heredé un producto con iconos de cuatro épocas distintas apilados unos sobre otros. Antes de poder consolidar nada, necesitaba saber exactamente qué había en la página, no lo que el archivo de Figma decía que había en la página.»
El punto de partida
Seiscientas pantallas y un archivo de diseño en el que nadie confiaba
Lo que no funcionaba
«La biblioteca de Figma llevaba años a la deriva. Tres engranajes de “ajustes”, dos cruces de “cerrar” con grosores de trazo distintos, una flecha de “exportar” que se había redibujado discretamente en 2022 pero nunca se actualizó en el archivo de diseño. No podía auditar contra Figma porque Figma era parte del problema. La verdad estaba en el DOM.»
El primer intento de Maya fue el manual que conoce cualquier persona de front-end: abrir DevTools, encontrar el nodo <svg>, copiar el HTML externo, pegarlo en un archivo de borrador, añadir el xmlns a mano para que se dibujara de verdad, repetir. «Como a los cuarenta iconos, un martes, admití que esto se iba a comer mi semana entera y aun así cometería errores de transcripción.»
El cambio
En vez de copiar nodos de uno en uno, Maya ejecutó SVG Downloader en cada pantalla importante. El popup recorre el DOM e informa de un recuento —0 → 24 SVG encontrados— y luego entrega cada uno como archivo real, con el espacio de nombres reparado para que abra directamente en Figma y VS Code.
«El recuento fue lo primero que ayudó. Una pantalla que yo creía que tenía ocho iconos informó de catorce: seis eran fondos decorativos puestos en CSS que nunca aparecían en ningún inventario. Luego Descargar todo en ZIP me dio el conjunto de la pantalla entera, sin duplicados y numerado, de una vez.» Hacer diff de archivos independientes es trivial; hacer diff de una app en ejecución no.
«Convirtió la auditoría de arqueología en un diff. Tenía el marcado real de cada icono del producto, uno al lado del otro, en una tarde, y por fin podía demostrar cuáles eran genuinamente iguales.»
— Maya Okafor, ingeniera de sistemas de diseñoEl resultado
- ~40iconos casi duplicados encontrados y reducidos a un set canónico
- 1 tardeen vez de la semana a la que iba camino la pasada manual de copiar y pegar
- 0arreglos de
xmlnsescritos a mano: todos los archivos abrieron al primer intento
- Qué hizo el trabajo
- La detección de SVG en línea para los componentes, la captura de fondos CSS para los decorativos y Descargar todo en ZIP por pantalla.
- Por qué no DevTools
- Copiar nodos a mano pierde el
xmlns, se pierde por completo las fuentes CSS y de sprite, y no escala más allá de unos pocos iconos. Ver extraer iconos SVG. - Privacidad
- Un panel propietario, así que importaba: nada salió del equipo. Sin subidas, sin cuenta, sin analítica.
Historia compuesta: un flujo ilustrativo pero representativo. La persona y la empresa son ficticias; el comportamiento de la extensión aquí descrito es real. Más historias →
Audita lo que hay de verdad en la página
Cuenta los vectores, saca el marcado real, llévate la pantalla entera en un ZIP. Gratis y en tu dispositivo.