Tutorial: Ki jan yo vire fichye Figma nan SVG ak eleman Rect

Dènyèman te vini yon travay enteresan, chanje SVG koutim, nan yon pwojè Webflow pou animasyon an.

Mwen te panse se pa yon gwo zafè, ouvri yon Figma, pran kòd sous SVG la, jete li epi .... pa travay 😔

Rechèch pwoblèm nan, li te tounen soti ke bibliyotèk la ki anime SVG travay dirèkteman ak eleman rect andedan menm SVG la. Oke ankò pa gen pwoblèm mwen te panse :), ann jis chanje non tout kouch yo Rect epi nou pral kontan.

Chanje non, mwen gade kòd sous SVG la epi mwen pa wè rect :(

Lè sa a, mwen te chita pi alèz nan chèz mwen an epi mwen te kòmanse fè rechèch pi efikas.

Li te tounen soti ke pou SVG konprann eleman yo nou vle anime kòm recr nou bezwen trase yo .... woulo liv tanbou - atravè ankadreman.

Te kòmanse tès, ak tout bagay ap mache.

Men koulye a, gen yon lòt pwoblèm:

Ki jan yo otomatize pwosesis sa a?

Nou deja gen anpil ilistrasyon trase, epi nou pa vle refè yo.

Oke, depi nou ap travay nan ankadreman, nou te jwenn yon fason soti, bezwen kreye Plugin a ki pral vlope tout eleman nan ankadreman.

Kòd sous Plugin la:

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

oswa telechaje pwojè a sou GitHub :-)

Rezilta:

30 minit nan kòd ak tout animasyon travay, travay pou lavni an fini.

Konklizyon:

si ou pa ka jwenn travay enteresan, yo pral jwenn ou tèt yo. Otomatik tout bagay :)