# LottieFile

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

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXpqEanvOhm8vMtIH8i%2F-MhmaT-nkn0NzUjn3CQL%2F-Mhmb6mq0oNQ8zgrFCJf%2Flottie%20gif.gif?alt=media\&token=f32db7a4-4661-4221-880a-0919f755876c)

### Additional parameters <a href="#adittional-parameters" id="adittional-parameters"></a>

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.                                     | <p>"loop" -> Runs the Lottie animation in loop (default).<br><br>"once" -> To run the Lottie animation only once.</p> |
| \<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** <a href="#how-to-add-the-tag" id="how-to-add-the-tag"></a>

### **Option 1 (Figma only)**

&#x20;   **1. Open** the [LottieFiles plugin](https://www.figma.com/community/plugin/809860933081065308) in Figma and **Search** for a Lottie.

&#x20;   2\. Click `Convert to GIF` > `Add to Figma`&#x20;

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXpqEanvOhm8vMtIH8i%2F-MhmaT-nkn0NzUjn3CQL%2F-MhmhKPwB8uOxp3YrLF5%2Flotties2.gif?alt=media\&token=31a05862-1346-4d45-855e-8d8fedd8f3d1)

&#x20;   3\. **Replace the placeholder URL** with your own (or try our sample tag).

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXpqEanvOhm8vMtIH8i%2F-MhmaT-nkn0NzUjn3CQL%2F-MhmhQLKno2q2BL4kjtw%2Flotties3.gif?alt=media\&token=1ecdef14-7f77-43f1-a7fb-8c19fa88aaa0)

### **Option 2**

&#x20;   **1. Copy** the tag.

&#x20;   2\. **Paste** the tag into the layer name of a **rectangle shape**.

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXpqEanvOhm8vMtIH8i%2F-MhmaT-nkn0NzUjn3CQL%2F-MhnHGMgqcv939q-3baX%2Flotties22.webp?alt=media\&token=7187b850-8c63-4201-b4c8-6ce1c64615e7)

&#x20;   **3. Replace the placeholder URL** with your own (or try our sample tag).

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXpqEanvOhm8vMtIH8i%2F-MhmaT-nkn0NzUjn3CQL%2F-MhnHKf5PT-2pf0h9Q0J%2Fimagen.png?alt=media\&token=1d55a3c5-d617-462f-8ada-5d60a661923e)

&#x20;   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 <a href="#example-files" id="example-files"></a>

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

{% embed url="<https://www.figma.com/design/dedkxpF23DnniDkjZnqehd/Bravo-Sample%3A-Bravo-Tags?node-id=37-1&t=e5oqQzUJj5caCzjE-0>" %}
Bravo Sample
{% endembed %}