Page: Intro

What does it do?

Displays a custom intro screen either 1) every time the app user opens the app or 2) only the first time.


To test it in Bravo Vision, tap Update with Bravo (long tap the screen) to refresh the app. If you used intro:once, the intro should not appear again.

The Tags needed

  1. [intro:always] or [intro:once]
    • Intro:always displays the intro every time the user opens the app. Intro:once displays the intro only the first time the user opens the app.
    • Which layer do I put it on? A top-level app page

2. [action:closeintro]

This action closes the intro screen with a slide-down animation to reveal the home screen.

Which layer can I put it on?

Any layer, except top-level app page


Intro page cannot be a modal page.

🏗 How to set it up

  1. Create an intro screen design.
  2. 💡

    Pro tip: use the LottieFiles plugin for Figma to easily add a Lottie in your intro.

  3. Add a container around the design.
  4. image
  5. Paste the tag [intro:always] or [intro:once] into the layer name of the top-level app page.
  6. image
  7. Paste the tag [action:closeintro] into the layer name of a visual element to close the intro screen.
  8. image
  9. Make sure the Starting Frame is on your "home" app page, not the intro screen. Also make sure there is a Starting Frame.
  10. 💡

    Don't link the intro page to any screen. It's a standalone screen. The close intro Tag will automatically reveal the Starting Frame screen.

  11. Import to Bravo & preview on Bravo Vision 🚀

💾 Resources

👉 Sample Figma file

👉 Sample Adobe XD file