SVGator vs Figma Motion: Motion Paths

See how building custom curved motion paths in SVGator compares to the same process in Figma Motion.

Step 1 - Copy The Design Into SVGator

Before animating in Figma, bring the design into SVGator so both tools can be compared. Select the frame, right-click, and copy it to the clipboard as SVG. Switch to SVGator and paste it with Ctrl or Cmd + V.

Step 2 - Add A Position Keyframe In Figma Motion

Back in Figma, enable the timeline, then open the properties panel and click the keyframe next to the position field to set the first keyframe. Drag the playhead forward to define the duration and move the object to its new position over the icon. Bending the path for a more natural arc isn't possible here, since Figma Motion has no bezier handles, so only a straight line is available.

Step 3 - Animate The Cursor Position In SVGator

Switch to SVGator to try the same movement. With the arrow selected, open the animators list and choose position, jump a couple of seconds ahead on the timeline, and move the arrow over the icon. Unlike in Figma, the path can be bent and freely adjusted for a smoother, more natural motion. Hit play to preview the result.

Step 4 - Apply And Customize Easing

Easing is one of the most important aspects of motion design. SVGator provides a range of easing presets that can be applied right away, and each can be refined further in the graph editor. Figma Motion also includes easing presets to use as-is or customize.

Step 5 - Enable Auto Rotate

Next to the rotate options in SVGator, turn on auto-rotate. Rotate the arrow once so it points along the path, then play it back. The arrow keeps pointing the right way even as the path is edited, so reshaping the curve never breaks the rotation. 

SVGator uses only two keyframes for this curve, which keeps the path light, easy to edit, and smaller on export. A path built another way, such as through an AI agent, often ends up as many straight segments with a node for every keyframe, making it heavier and harder to adjust.

Step 6 - Draw A Custom Path With The Pen Tool

For a faster approach to complex motion, grab the pen tool and draw the path directly, including a loop and a final point above the icon.

Step 7 - Turn The Shape Into A Motion Path

Select the arrow, then open the properties panel and click the set motion path button, or right-click on the canvas and choose it from the menu. Pick the object to convert and set the duration before clicking done. 

Make sure auto-rotate is enabled and adjust the arrow to point in the right direction, then play it. Each node of the path appears as a keyframe in the timeline, so even complex shapes can become a motion path for any object quickly.