Урок: Как да превърнете Figma файлове в SVG с Rect елементи

Наскоро се появи интересна задача, промяна на персонализиран SVG в проект на Webflow за анимацията.

Мислех, че не е голяма работа, отворих Figma, взех изходния код на SVG, хвърлих го и .... не проработи 😔

Проучвайки проблема, се оказа, че библиотеката, която анимира SVG, работи директно с rect елементи в същия SVG. Ами пак няма проблем, помислих :), нека просто преименуваме всички слоеве на Rect и ще бъдем доволни.

Преименувано, погледнах изходния код на SVG и не виждам rect :(

След това седнах много по-удобно на стола си и започнах да проучвам по-ефективно.

Оказа се, че за да разбере SVG елементите, които искаме да анимираме като recr трябва да ги начертаем... drum roll - чрез Frames.

Започна тестване и всичко работи.

Но сега има друг проблем:

Как да автоматизираме този процес?

Вече имаме много нарисувани илюстрации и не искаме да ги преправяме.

Е, тъй като работим в 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 минути код и всички анимации работят, работата за бъдещето е свършена.

Заключение:

ако не можете да намерите интересни задачи, те сами ще ви намерят. Автоматизирайте всичко :)