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

[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]

Tag	Description	Possible 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!

Bravo Sample