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
- 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
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
- Create an intro screen design.
- Add a container around the design.
- Paste the tag
[intro:once]into the layer name of the top-level app page.
- Paste the tag
[action:closeintro]into the layer name of a visual element to close the intro screen.
- Make sure the Starting Frame is on your "home" app page, not the intro screen. Also make sure there is a Starting Frame.
- Import to Bravo & preview on Bravo Vision 🚀
Pro tip: use the LottieFiles plugin for Figma to easily add a Lottie in your intro.
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.
👉 Sample Figma file
Figma - Bravo Sample: Intro Pages | Made for Bravo Studio. Add intro pages in your Bravo app with this sample Figma file. The file in...
Figma Community file - Made for Bravo Studio. Add intro pages in your Bravo app with this sample Figma file. The file includes layers named with Bravo Tags, containers, and other essential setup. To see the final result, create a project in Bravo Studio with this Figma file and preview with Bravo Vision.
👉 Sample Adobe XD file