What if you had the power to animate any logo? Imagine being able to animate your company logo – without a motion designer, without complex software, and within the span of a toilet break.

Well, you can with LottieFiles. Here’s how to animate any logo without Adobe After Effects, just by using the SVG to Lottie tool.

Watch the video: Animate any logo without Adobe After Effects

Watch the video tutorial below, or scroll downwards for a written version. To follow along, you can download the exercise files here.

1. Optional: creating a logo from scratch in Figma

Example of a logo in Figma
Example of a logo in Figma

If you don’t already have a logo, you can create one to experiment with in Figma. Here’s how to create a quick one from scratch in Figma:

  • Press ‘P’ to switch to the pen tool.
  • Use the pen tool to draw a squiggly line (as you’ll see later, the animation will follow the stroke path of this line).
  • Change the stroke thickness from one to 36.
  • Change the stroke color to #3C48F6.
  • Add a company name next to it.
  • Select your logo layers and group them.
  • Export it as an SVG file and save it.

2. Drag and drop into LottieFiles' SVG to Lottie Tool

Head to the LottieFiles’ SVG to Lottie tool. Drag the SVG file and drop it into the tool.

Choose an animation style
Choose an animation style

Next, you’ll see a variety of animation options. In this example, we’ll select this option – but feel free to experiment to see which suits your logo the best.

And there it is! Your own animated logo, without Adobe After Effects, in a minute of work.

3. Save your animation

Save your animation
Saving your animation

To save your animation, click “Download Lottie” or click “Upload to Preview” to save this to your private animation dashboard.

Have an existing SVG logo you’d like to animate? Drag it directly into the SVG to Lottie tool and try out different animations.

Edit SVG logos in Figma
You can edit SVG logos in Figma

To have more control over the animation, you can also edit in Figma. For example, let’s take the LottieFiles logo and drop it into Figma.

Editing your logo in Figma
Editing your logo in Figma

We’ll make these edits:

  • Select the LottieFiles icon and add a stroke with the color #24E2E5.
  • Delete the color fill.
  • Export the logo as an SVG.

Drag it into the SVG to Lottie tool, and boom – here’s our animated logo.

Some minor details may not animate properly
Some minor details may not animate properly

You may see some minor details that don’t animate properly. In this example, the ‘e’ is filled in. To fix these small details, you may be able to edit the SVG file in Figma and use Boolean operations to remove areas you don’t want in your logo.

For complex and customized animations, you may need to fire up software like Adobe After Effects. But if you aren’t a motion designer – or you just have a minute to spare – then using the SVG to Lottie tool is a great way to animate your logo.

Want to learn more about adding motion magic to your designs? Check out other tutorials on our blog, learn from Lottie experts through free courses, or head to our YouTube channel!