🏷️

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.

image
💡

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.

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

    image
  11. Import to Bravo & preview on Bravo Vision 🚀

💾 Resources

👉 Sample Figma file

👉 Sample Adobe XD file