לאחרונה הגיעה משימה מעניינת, שינוי SVG מותאם אישית, לפרויקט Webflow עבור האנימציה. חשבתי שזה לא נורא, פתחתי Figma, לקחתי את קוד המקור של ה-SVG, זרקתי אותו ו.... 😔 לא עבד בחקר הבעיה, התברר שהספרייה שמניחה את SVG עובדת ישירות עם אלמנטים בתוך אותו SVG. טוב שוב אין בעיה חשבתי :), בואו פשוט נשנה את כל השכבות לרקט ונשמח. rect שם שונה, הסתכלתי על קוד המקור של SVG ואני לא רואה :( rect לאחר מכן, התיישבתי הרבה יותר בנוחות על הכיסא שלי והתחלתי לחקור בצורה יעילה יותר. התברר שכדי ש-SVG יבין את האלמנטים שאנחנו רוצים להנפיש בתור אנחנו צריכים לצייר אותם... גלגל תופים - דרך מסגרות. recr התחילו לבדוק, והכל עובד. אבל עכשיו יש בעיה נוספת: איך להפוך את התהליך הזה לאוטומטי? יש לנו כבר הרבה איורים מצוירים, ואנחנו לא רוצים לעשות אותם מחדש. ובכן, מכיוון שאנו עובדים במסגרות, מצאנו מוצא, צריך ליצור את שיעטוף את כל האלמנטים במסגרות. התוסף קוד המקור של הפלאגין: 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 דקות של קוד וכל האנימציות עובדות, העבודה לעתיד נעשית. מַסְקָנָה: אם אתה לא יכול למצוא משימות מעניינות, הם ימצאו אותך בעצמם. הפוך הכל לאוטומטי :)
