Layer (sticky element)

👉 The Tag
This tag creates an element that fixes its position on-screen and does not scroll with the rest of the screen.
📍 Where to add the tag: A second-level container
1
[layer]
Copied!
🏷️ How to add the tag
1.Create your layer element design.
2. Wrap it in a container. Unlike normal containers, layer elements don't need to be the full width of the screen.
Make sure it's not inside another container. It should be a 2nd-level layer.
3. Paste the tag into the layer name of this container.
4. Place it in the desired position where you want it to stay fixed in the "default screen area." The default screen area is one app page at 100%. If you have a splash screen in your design file, Bravo will use it as the default screen size. If you place the layer element outside of this area (for example on a long page), it will not appear.
For ex: I want the blue button to stick at the bottom of the screen, but instead of placing it at the bottom of my actual design, I place it near where the device screen would cut off.
5. Make sure the layer is not inside another container. It should be its own 2nd-level frame.
6. Import to Bravo & preview on Bravo Vision 🚀
💾 Example files
Duplicate the files below to see how to set it up!
Bravo Tags Cheat Sheet
Figma
Bravo Sample - Sticky layer.xd.zip
570KB
Binary
Bravo Sample - Sticky Layer.xd

Aspect ratio relative to screen

Next - Bravo Tags

Interactive component

Last modified 3mo ago

Copy link

Contents

👉 The Tag

🏷️ How to add the tag

💾 Example files