História — design systems
Auditando uma biblioteca de ícones à deriva, tela por tela
“Herdei um produto com ícones de quatro épocas diferentes empilhados uns sobre os outros. Antes de consolidar qualquer coisa, eu precisava saber exatamente o que estava na página — não o que o arquivo do Figma alegava estar na página.”
O cenário
Seiscentas telas, e um arquivo de design em que ninguém confiava
O que não estava funcionando
“A biblioteca do Figma tinha ficado à deriva anos atrás. Três engrenagens de ‘configurações’, duas cruzes de ‘fechar’ com espessuras de traço diferentes, uma seta de ‘exportar’ que tinha sido silenciosamente redesenhada em 2022 mas nunca atualizada no arquivo de design. Eu não podia auditar contra o Figma porque o Figma era parte do problema. A verdade estava no DOM.”
A primeira tentativa de Maya foi a manual que toda pessoa de front-end conhece: abrir o DevTools, achar o nó <svg>, copiar o HTML externo, colar num arquivo de rascunho, adicionar o xmlns na mão para ele realmente renderizar, repetir. “Lá pelo quadragésimo ícone, numa terça-feira, admiti que isso ia comer minha semana inteira e eu ainda cometeria erros de transcrição.”
A virada
Em vez de copiar nós um a um, Maya rodou o SVG Downloader em cada tela principal. O popup percorre o DOM e informa uma contagem — 0 → 24 SVGs encontrados — e então entrega cada um como arquivo de verdade, com namespace consertado para abrir direto no Figma e no VS Code.
“A contagem foi a primeira coisa que ajudou. Uma tela que eu achava ter oito ícones informou catorze — seis eram fundos decorativos definidos no CSS que nunca apareciam em inventário nenhum. Depois Baixar tudo em ZIP me deu o conjunto inteiro da tela, sem duplicatas e numerado, de uma vez.” Fazer diff de arquivos independentes é trivial; fazer diff de um app em execução não é.
“Transformou a auditoria de arqueologia em diff. Eu tinha o markup real de cada ícone do produto, lado a lado, numa tarde — e finalmente podia provar quais eram genuinamente iguais.”
— Maya Okafor, engenheira de design systemsO resultado
- ~40ícones quase duplicados encontrados e reduzidos a um conjunto canônico
- 1 tardeem vez da semana para a qual a passagem manual de copiar e colar estava caminhando
- 0consertos de
xmlnsdigitados à mão — todo arquivo abriu de primeira
- O que fez o trabalho
- A detecção de SVG inline para os componentes, a captura de fundos CSS para os decorativos, e Baixar tudo em ZIP por tela.
- Por que não DevTools
- Copiar nós à mão perde o
xmlns, perde por completo as origens CSS e de sprite, e não escala além de alguns ícones. Veja extrair ícones SVG. - Privacidade
- Painel proprietário, então importava: nada saiu da máquina. Sem upload, sem conta, sem analytics.
História composta — um fluxo ilustrativo, mas representativo. A pessoa e a empresa são fictícias; o comportamento da extensão descrito aqui é real. Mais histórias →
Audite o que está de verdade na página
Conte os vetores, tire o markup real, leve a tela inteira num ZIP. Grátis e no dispositivo.