Tutorial: come trasformare i file Figma in SVG con elementi Rect

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 rect all'interno dello stesso SVG. Bene, ancora una volta nessun problema, ho pensato :), rinominiamo tutti i livelli in Rect e saremo felici.

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 recr dobbiamo disegnarli... rullo di tamburi - attraverso i Frames.

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 plugin che racchiuderà tutti gli elementi nei frame.

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 :)