Di recente mi è capitato di dover affrontare un compito interessante: modificare un SVG personalizzato in un progetto Webflow per l'animazione. Pensavo che non fosse un gran problema, ho aperto un Figma, ho preso il codice sorgente dell'SVG, l'ho inserito e... 😔 non ha funzionato Facendo ricerche sul problema, si è scoperto che la libreria che anima SVG funziona direttamente con elementi all'interno dello stesso SVG. Bene, ancora una volta nessun problema, ho pensato :), rinominiamo tutti i livelli in Rect e saremo felici. rect Rinominato, ho guardato il codice sorgente SVG e non vedo :( rect Poi mi sono seduto molto più comodamente sulla mia sedia e ho iniziato a fare ricerche in modo più efficiente. Si è scoperto che affinché SVG comprenda gli elementi che vogliamo animare come dobbiamo disegnarli... rullo di tamburi - attraverso i Frames. recr Ho iniziato i test e tutto funziona. Ma ora c'è un altro problema: Come automatizzare questo processo? Abbiamo già molte illustrazioni disegnate e non vogliamo rifarle. Bene, poiché stiamo lavorando con i frame, abbiamo trovato una soluzione: dobbiamo creare il che racchiuderà tutti gli elementi nei frame. plugin Il codice sorgente del Plugin: const selectedNodes = figma.currentPage.selection; if (selectedNodes.length === 0) { figma.notify("Please select at least one layer."); } else { selectedNodes.forEach(node => { const frame = figma.createFrame(); frame.resize(node.width, node.height); frame.x = node.x; frame.y = node.y; frame.appendChild(node); node.x = 0; node.y = 0; }); figma.notify("All selected layers are wrapped in frames!"); } figma.closePlugin(); oppure scarica il progetto su :-) GitHub Risultato: 30 minuti di codice e tutte le animazioni funzionano, il lavoro per il futuro è fatto. Conclusione: se non riesci a trovare compiti interessanti, ti troveranno loro stessi. Automatizza tutto :)
