Tutorial: How to Turn Figma Files to SVG with Rect Elements

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 :)