Unusual animation in Figma with SVG Motion

In this article, we will show you some ways to create unique animations in Figma using the SVG motion plugin created by our team, DAVV.

SVG motion is an excellent tool for creating animated icons, loaders, and patterns. However, it can also be used for other purposes that you might not know about. Let’s take a look at some of them.

To create an animation from an image, you can add a mask made of lines to achieve this effect.

To animate text, you need to convert it into lines with the Stroke property. In Jackson’s example, several colors were added to each element in the Stroke property.

Color gradients can also be added to the Stroke. The glowing effect is achieved using the Drop shadow effect, which can also be animated.

An interesting animation is created with the Layer blur effect.

Here, the Difference overlay is used in the animation.

However, there are some limitations to the SVG motion plugin:

1. The plugin does not support Angular gradient and Background blur effects.
2. Exports are available in SVG, GIF, and WEBM formats. To get an mp4, please use converters.
3. The free version of the plugin supports the Direct animation type, Speed settings, and animation export. The pro account includes additional features such as Loader, Loader shift, Loader shift delay animation types, Rupture Ratio settings, Random line, and a library of templates.
4. Animations can be played in the Prototype if you add them to the frame in GIF or video format (for Figma pro accounts).

We hope these tips will help you create unique and dynamic designs in Figma. By experimenting with Effects, Layers and Stroke settings, you can create completely different animations using just one tool. Please share your experience using SVG motion if any in the comments below.

In our next articles, we will share how to create animations using other plugins such as Physics animation, Parallax, and Shape move.