This content originally appeared on HackerNoon and was authored by Aleksandr Krivov
\ Recently came an interesting task, changing custom SVG, to a Webflow project for the animation.
\ I thought it was no big deal, opened a Figma, took the source code of the SVG, threw it in and …. ==didn't work== 😔
\
Researching the problem, it turned out that the library that animates SVG works directly with rect elements inside the same SVG. Well again no problem I thought :), let's just rename all layers to Rect and we'll be happy.
\
Renamed, I looked at the SVG source code and I don't see rect :(
\
\ Then, I sat down much more comfortably in my chair and started researching more efficiently.
\
It turned out that for SVG to understand the elements we want to animate as recr we need to draw them…. drum roll - through Frames.
Started testing, and everything works.
\
\ But now there is another problem:
==How to automate this process?==
We already have a lot of drawn illustrations, and we don't want to redo them.
Well, since we are working in Frames, we have found a way out, need to create the plugin that will wrap all elements in frames.
\ The source code of the Plugin:
\
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();
\ or download the project on GitHub :-)
Result:
30 minutes of code and all animations work, work for the future is done.
Conclusion:
if you can't find interesting tasks, they will find you themselves. Automate everything :)
This content originally appeared on HackerNoon and was authored by Aleksandr Krivov
Aleksandr Krivov | Sciencx (2024-10-18T15:07:58+00:00) Tutorial: How to Turn Figma Files to SVG with Rect Elements. Retrieved from https://www.scien.cx/2024/10/18/tutorial-how-to-turn-figma-files-to-svg-with-rect-elements/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.