Lottie-animated component

Create stateful components with Lottie animations

This feature will give dynamism to your components and will enhance the quality of your app! Now you can easily set states by using dotLottie and Lottie animations instead of regular states.

👉 The tags

📍Where to add the tags: A rectangle layer

These are the tags you can use in the design file to implement the toggle component.

[component:stateful-lottie:<url>]

[component:input-stateful-lottie:<url>]

These tags support only URLs ending in .json

Available use cases:

Menu icons in tab menu

[component:stateful-lottie:<url>]

Example: [component:stateful-lottie:https://assets8.lottiefiles.com/packages/lf20_ei7frqcx.json]

Checkbox in forms

In contrast to the stateful components created with variants, remote actions can't be bound to each of the component states. Therefore, features like favorites/like buttons aren't supported with Lottie animations at the moment.

Optional tag

Add a custom frame

Add a custom frame to the tag that defines where the active animation is.

[component:stateful-lottie:<url>:<custom-frame>]

[component:input-stateful-lottie:<url>:<custom-frame>]

It's the frame where the animation changes. Setting a custom frame, sets the active animation from 0 to <custom-frame>, and the default animation from <custom-frame> to end. If no frame is specified, the animation will go from 0 to end.

In this example: The Lottie animation frame goes from 0 to 180. We will set a <custom-frame> of 90 as it's where we want the animation to stop.

[component:input-stateful-lottie:<url>:90]

The animation plays as follows: To enable, on tap, the animation plays from 0 to 90, To disable, on tap, the animation plays from 90 to end.

How to add the tag

Check our LottieFile guide to see how to add Lottie URLs.

LottieFile | Bravo Studio Help Centerdocs.bravostudio.app

💾 Example files

Duplicate the files below to see how to set it up!

https://www.figma.com/community/file/1217802397157289523www.figma.com