Tutorial: Si t'i ktheni skedarët Figma në SVG me Elemente Rect

Kohët e fundit erdhi një detyrë interesante, ndryshimi i SVG-së me porosi, në një projekt Webflow për animacionin.

Mendova se nuk ishte gjë e madhe, hapa një Figma, mora kodin burim të SVG, e hodha dhe .... nuk funksionoi 😔

Duke hulumtuar problemin, rezultoi se biblioteka që animon SVG punon drejtpërdrejt me elementë rect brenda të njëjtës SVG. Epo përsëri pa problem mendova :), le t'i riemërtojmë të gjitha shtresat në Rect dhe do të jemi të lumtur.

I riemërtuar, shikova kodin burimor SVG dhe nuk e shoh rect :(

Pastaj, u ula shumë më rehat në karrigen time dhe fillova të hulumtoj në mënyrë më efikase.

Doli që që SVG të kuptojë elementët që duam t'i animojmë si recr duhet t'i vizatojmë ato... rrotullimi i daulleve - përmes Frames.

Filloi testimi, dhe gjithçka funksionon.

Por tani ka një problem tjetër:

Si të automatizoni këtë proces?

Tashmë kemi shumë ilustrime të vizatuara dhe nuk duam t'i ribëjmë.

Epo, meqenëse po punojmë në Frames, kemi gjetur një rrugëdalje, duhet të krijojmë shtojcën që do t'i mbështjellë të gjithë elementët në korniza.

Kodi burimor i Plugin-it:

 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();

ose shkarkoni projektin në GitHub :-)

Rezultati:

30 minuta kod dhe të gjitha animacionet funksionojnë, puna për të ardhmen është bërë.

konkluzioni:

nëse nuk mund të gjeni detyra interesante, ata do t'ju gjejnë vetë. Automatizoni gjithçka :)