Qo'llanma: Figma fayllarini to'g'ri elementlar bilan SVGga qanday aylantirish mumkin

Yaqinda maxsus SVG-ni animatsiya uchun Webflow loyihasiga o'zgartiruvchi qiziqarli vazifa keldi.

Men buni katta ish emas deb o'yladim, Figma ochdim, SVG ning manba kodini oldim, uni tashladim va .... ishlamadi 😔

Muammoni o'rganar ekanmiz, SVG-ni jonlantiruvchi kutubxona to'g'ridan-to'g'ri bir xil SVG ichidagi rect elementlar bilan ishlashi ma'lum bo'ldi. Yana muammo yo'q deb o'yladim :), keling, barcha qatlamlarning nomini Rect deb o'zgartiraylik va biz xursand bo'lamiz.

Nomi o'zgartirildi, men SVG manba kodiga qaradim va rect ko'rmadim :(

Keyin stulga ancha qulayroq o'tirdim va samaraliroq tadqiqot qila boshladim.

Ma'lum bo'lishicha, SVG uchun biz recr sifatida jonlantirmoqchi bo'lgan elementlarni tushunish uchun biz ularni chizishimiz kerak.... drum roll - Frames orqali.

Sinov boshlandi va hamma narsa ishlaydi.

Ammo endi yana bir muammo bor:

Ushbu jarayonni qanday avtomatlashtirish mumkin?

Bizda allaqachon ko'plab chizilgan rasmlar mavjud va biz ularni qayta tiklashni xohlamaymiz.

Xo'sh, biz Framelarda ishlayotganimiz sababli, biz chiqish yo'lini topdik, barcha elementlarni ramkalarga o'rab oladigan plaginni yaratishimiz kerak.

Plaginning manba kodi:

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

yoki GitHub -da loyihani yuklab oling :-)

Natija:

30 daqiqalik kod va barcha animatsiyalar ishlaydi, kelajak uchun ish bajariladi.

Xulosa:

agar siz qiziqarli vazifalarni topa olmasangiz, ular sizni o'zlari topadilar. Hamma narsani avtomatlashtiring :)