Intro page

Displays an Intro screen of your choice.

👉 The Tag

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

📍 Where to add the tag: A top-level app page

[intro:always] or [intro:once]

//Add this tag in a visual element (NOT a top-level app page) to close the intro screen.

[action:closeintro]

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

🏷️ How to add the tag

1. Create an intro screen design.

Pro tip: use the Lottie component to easily add a Lottie animation in your intro.

2. Add a container around the design.

3. Paste the tag [intro:always] or [intro:once] into the layer name of the top-level app page.

4. Paste the tag [action:closeintro] into the layer name of a visual element to close the intro screen.

5. Make sure the Starting Frame is on your "home" app page, not the intro screen. Also make sure there is a Starting Frame.

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.

You can create an intro flow with several screens. If you do this, do not link the last page of the intro with the first page of the app, but add an [action:closeintro] element. Check how it's done in the example design files.

6. Import to Bravo & preview on Bravo Vision 🚀

💾 Example files

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

https://www.figma.com/community/file/981964292540895745www.figma.com

230KB

Bravo Sample - Intro Pages.xd.zip

archive

Open

Bravo Sample: Intro Pages.xd