מדריך: כיצד להפוך קבצי Figma ל-SVG עם רכיבי Rect

לאחרונה הגיעה משימה מעניינת, שינוי SVG מותאם אישית, לפרויקט Webflow עבור האנימציה.

חשבתי שזה לא נורא, פתחתי Figma, לקחתי את קוד המקור של ה-SVG, זרקתי אותו ו.... לא עבד 😔

בחקר הבעיה, התברר שהספרייה שמניחה את SVG עובדת ישירות עם אלמנטים rect בתוך אותו SVG. טוב שוב אין בעיה חשבתי :), בואו פשוט נשנה את כל השכבות לרקט ונשמח.

שם שונה, הסתכלתי על קוד המקור של 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 דקות של קוד וכל האנימציות עובדות, העבודה לעתיד נעשית.

מַסְקָנָה:

אם אתה לא יכול למצוא משימות מעניינות, הם ימצאו אותך בעצמם. הפוך הכל לאוטומטי :)