آموزش: نحوه تبدیل فایل های Figma به SVG با عناصر Rect

اخیراً یک کار جالب آمد، تغییر SVG سفارشی، به پروژه Webflow برای انیمیشن.

فکر کردم چیز مهمی نیست، Figma را باز کردم، سورس کد SVG را گرفتم، آن را انداختم و .... درست نشد 😔

با تحقیق در مورد مشکل، مشخص شد که کتابخانه ای که SVG را متحرک می کند، مستقیماً با عناصر rect در همان SVG کار می کند. خوب دوباره مشکلی نیست من فکر کردم :)، بیایید فقط نام همه لایه ها را به Rect تغییر دهیم و خوشحال خواهیم شد.

با تغییر نام، من به کد منبع SVG نگاه کردم و rect نمی بینم :(

بعد، خیلی راحت‌تر روی صندلی‌ام نشستم و کارآمدتر شروع به تحقیق کردم.

معلوم شد که برای درک SVG عناصری را که می‌خواهیم به‌عنوان recr متحرک کنیم، باید آنها را ترسیم کنیم... درام رول - از طریق فریم‌ها.

شروع به آزمایش کرد و همه چیز کار می کند.

اما حالا یک مشکل دیگر وجود دارد:

چگونه این فرآیند را خودکار کنیم؟

ما در حال حاضر تصاویر کشیده زیادی داریم و نمی خواهیم آنها را دوباره انجام دهیم.

خوب، از آنجایی که ما در Frames کار می کنیم، راهی برای خروج پیدا کرده ایم، باید افزونه ای ایجاد کنیم که همه عناصر را در فریم ها بپیچد.

کد منبع افزونه:

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

یا پروژه را در GitHub دانلود کنید :-)

نتیجه:

30 دقیقه کد و تمام انیمیشن ها کار می کنند، کار برای آینده انجام شده است.

نتیجه گیری:

اگر نمی توانید کارهای جالبی پیدا کنید، آنها خودشان شما را پیدا خواهند کرد. همه چیز را خودکار کنید :)