How to edit text in Lottie images

How to edit text in Lottie images


In the following tutorial, I’ll show you how to edit text in Lottie images. We have a tutorial on how to create a Lottie text animation, and here we’ll cover the alternative that you have, how to access and modify the text, and how to export your updated animations.

1. How to edit text in Lottie images using an After Effects source file

Changing text in a Lottie animation isn’t as straightforward as editing a regular image. To edit text in a Lottie animation, you will need access to the source file.

Step 1

If you have access to the original After Effects file, open it and locate the text in your timeline. Double-click it, and as long as the text is not turned into vector shapes, you should be able to edit it.

Of course, once you make the changes, you’ll need to save a new version of your Lottie animation with the updated text.

edit text in lottie images using the After Effects source fileedit text in lottie images using the After Effects source fileedit text in lottie images using the After Effects source file

Step 2

If the original text was converted to vector shapes, you won’t be able to edit it as text, only the shapes that make up the text.

text converted into vector shapes can't be edited at text in a lottie animationtext converted into vector shapes can't be edited at text in a lottie animationtext converted into vector shapes can't be edited at text in a lottie animation

2. How to edit text in Lottie images using a Figma source file

If you have access to the original Figma file, open it and select the text.

Just like in After Effects, you can double-click to edit the text, as long as it hasn’t been turned into vector shapes. Again, be sure to save a new version of your Lottie animation with the updated text after making the changes.

edit text in lottie images using the Figma source fileedit text in lottie images using the Figma source fileedit text in lottie images using the Figma source file

3. How to edit text in Lottie images using the Lottie Editor

In theory, you should be able to edit text in a Lottie animation using the Lottie Editor, but from my experience I wouldn’t rely on this option as it comes with various limitations and bugs.

Things might improve in the future, but for now, it’s not a dependable solution.

edit text in lottie images using the Lottie Editoredit text in lottie images using the Lottie Editoredit text in lottie images using the Lottie Editor

tip

Always keep the source files, and avoid converting text to vector shapes if you think you’ll need to edit it later.

Congrats! You’re done

I hope you’ve enjoyed this tutorial and can apply these techniques in your future Lottie animations. You can find some great sources of inspiration at Envato, with interesting solutions to improve your Lottie animations.

Want to Learn More?

At Envato Tuts+, we have loads of tutorials on everything you need to know about Lottie animations. Take a look!



Source link