SVG Motion is a Figma plugin I randomly discovered while looking for inspiration and tutorials for kinetic posters. I’m always impressed by how you can instantly achieve different animations on Figma, and this plugin hits on another level. It has become one of my favorite tools!
The plugin is extremely easy to access and lets you quickly create animated vector lines by just using the "stroke" property. It can be used to make diverse animated elements including logos, icons, backgrounds, text outlines, and loaders. It also supports various effects like blur, blending modes, and overlays. The exported animations are available in SVG, GIF, and Webm for streamlined development.
All it needs for the elements to animate is a stroke. Simply add the stroke and play with weight, colors, blend modes, and effects to create various animation styles. Open the plugin, adjust the animation setting, then export!
The plugin works best with icons that have start and end points. For connected icons, try to remove the “end points” of the advanced stroke setting to create a smoother transition without “idle dots.”
Pro version: Add more colors to the stroke property and randomize the line’s size, speed, and shift to create multi-color shifting. I also recommend playing with the templates from the plug-in’s library to learn how to achieve different interesting effects.
Add the gradient to the stroke, add the layer blur effects, then adjust stroke weight and blur value. Change the stroke's blend mode to create different visual stylings.
For the design team's creative monthly, designers tested out SVG animations in Figma! Check out the video here.
