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, yous tin can with LottieFiles. Here'due south how to animate any logo without Adobe Later Effects, just by using the SVG to Lottie tool.

Lookout man the video: Animate any logo without Adobe Afterwards Furnishings

Watch the video tutorial beneath, or ringlet downwardly for a written version. To follow along, you can download the practise files here.

1. Optional: creating a logo from scratch in Figma

Example of a logo in Figma
Case 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 (equally you'll see afterwards, the animation will follow the stroke path of this line).
  • Change the stroke thickness from one to 36.
  • Alter the stroke colour to #3C48F6.
  • Add together a company name next to it.
  • Select your logo layers and group them.
  • Consign it as an SVG file and save it.

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 come across a diverseness of animation options. In this example, we'll select this choice – but feel gratuitous to experiment to encounter which suits your logo the all-time.

And there it is! Your ain animated logo, without Adobe Afterwards Furnishings, in a minute of work.

3. Save your animation

Save your animation
Saving your animation

To salvage your animation, click "Download Lottie" or click "Upload to Preview" to save this to your private blitheness dashboard.

Have an existing SVG logo yous'd similar to animate? Drag it directly into the SVG to Lottie tool and effort out different animations.

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

To have more than control over the animation, yous tin can likewise edit in Figma. For example, let's take the LottieFiles logo and driblet 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 make full.
  • 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 small-scale details may not breathing 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, yous 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, yous may demand to fire upward software similar Adobe Subsequently Effects. Merely if you lot aren't a motion designer – or y'all just have a infinitesimal to spare – and then using the SVG to Lottie tool is a groovy style to animate your logo.

Desire to acquire more near adding movement magic to your designs? Check out other tutorials on our blog, larn from Lottie experts through free courses, or head to our YouTube channel!