🏷️

Component: Lottie

What does it do?

A Lottie will replace the content of a rectangle shape.

image

The Tag

[component:lottie:URL]

Supports URL ending in .json

Sample Tag to try

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

Which layer can I put it on?

A rectangle shape

How do I set it up in the design tool?

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. image

  4. Place the Lottie in your design, it already contains the Bravo Tag in the layer name.
  5. image

  6. 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)

Option #2

  1. Copy the tag.
  2. Paste the tag into the layer name of a rectangle shape.
  3. image

  4. Replace the placeholder URL with your own (or try our sample tag).
  5. image

  6. 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)

Figma Example

Open & duplicate the Figma file below to see how it's set up.