Упатство: Како да ги претворите Figma-датотеките во SVG со Rect Elements

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

Мислев дека не е ништо страшно, отворив Figma, го зедов изворниот код на SVG, го фрлив и .... не функционираше 😔

Истражувајќи го проблемот, се покажа дека библиотеката што го анимира SVG работи директно со rect елементи во истиот 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 минути код и сите анимации работат, работата за иднината е завршена.

Заклучок:

ако не можете да најдете интересни задачи, тие самите ќе ве најдат. Автоматизирајте сè :)