What if yous had the power to animate whatever logo? Imagine being able to animate your company logo – without a motility designer, without circuitous software, and inside the span of a toilet break.

Well, you tin with LottieFiles. Here's how to animate whatever logo without Adobe After Effects, but by using the SVG to Lottie tool.

Watch the video: Animate any logo without Adobe Afterward Effects

Watch the video tutorial beneath, or scroll downwards for a written version. To follow along, you tin can download the practise files hither.

1. Optional: creating a logo from scratch in Figma

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

If yous don't already have a logo, you tin create one to experiment with in Figma. Hither's how to create a quick one from scratch in Figma:

  • Press 'P' to switch to the pen tool.
  • Use the pen tool to depict a squiggly line (as you'll see afterwards, the blitheness volition follow the stroke path of this line).
  • Alter the stroke thickness from one to 36.
  • Change the stroke colour to #3C48F6.
  • Add together a company proper name next to it.
  • Select your logo layers and group them.
  • Export it as an SVG file and save it.

Head to the LottieFiles' SVG to Lottie tool. Drag the SVG file and drop information technology into the tool.

Choose an animation style
Choose an blitheness style

Side by side, you'll encounter a diversity of animation options. In this instance, we'll select this pick – but feel free to experiment to see which suits your logo the best.

And in that location information technology is! Your own animated logo, without Adobe Later on Furnishings, in a minute of piece of work.

3. Save your blitheness

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 lot tin also edit in Figma. For example, let'southward 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 colour #24E2E5.
  • Delete the color fill.
  • Consign 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 breathing properly

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

For complex and customized animations, you lot may demand to fire up software like Adobe After Effects. Merely if you aren't a motion designer – or you lot just have a minute to spare – then using the SVG to Lottie tool is a nifty way to breathing your logo.

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