LottieFile

A Lottie will replace the content of the rectangle.

Using this tag, you can insert a Lottie animation that will replace the content of the rectangle shape where you add the tag. Supports URLs ending in .json.

๐Ÿ“ Where to add the tag: A rectangle layer

//The tag:

[component:lottie:<lottie_url>]

//Example:

[component:lottie:https://assets8.lottiefiles.com/packages/lf20_9JaVsy.json]

Additional parameters

Optionally, you can set how the animation is run with the following parameters:

//The tag with optional parameters

[component:lottie:<lottie_url>:<repeat>:<startFrame>:<endFrame>]

//Examples:

//Loop until frame 80
[component:lottie:https://assets3.lottiefiles.com/packages/lf20_h2s9rDrzUP.json:loop:0:80]

//Run only once
loop[component:lottie:https://assets2.lottiefiles.com/packages/lf20_ryWdG6ISch.json:once]

TagDescriptionPossible values

<repeat>

How the Lottie animation is run.

"loop" -> Runs the Lottie animation in loop (default). "once" -> To run the Lottie animation only once.

<startFrame>

Frame to start the Lottie animation from (default is 0)

(any number)

<endFrame>

Frame when the Lottie animation will stop (default is the end frame)

(any number)

๐Ÿท๏ธ How to add the tag

Option 1 (Figma only)

1. Open the LottieFiles plugin in Figma and Search for a Lottie.

2. Click Convert to GIF > Add to Figma

3. Replace the placeholder URL with your own (or try our sample tag).

Option 2

1. Copy the tag.

2. Paste the tag into the layer name of a rectangle shape.

3. Replace the placeholder URL with your own (or try our sample tag).

4. Import to Bravo & preview on Bravo Vision ๐Ÿš€ (If you imported the app before, you just need to press the button Update in Bravo Studio to see the changes)

๐Ÿ’พ Example files

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

Last updated