1. Marvel Help Center
  2. Prototyping
  3. Advanced prototyping

Layers - Add modals and sidebar menus

Layers allow you to add elements over the top of your screens as hotspot destinations. It's perfect for adding realistic overlays such as:

  • Action sheets
  • Sidebar menus
  • Modals
  • Popovers

All you need to do is upload the layer(s) directly to Marvel, as you would any other screen. 

How to add a Layer:

  1. Select any image in your project and click view
  2. Once the Editor opens, click and drag anywhere on the image to draw a hotspot
  3. In the image selector pop up, select the destination for your hotspot
  4. The layer an image option on the left will become available, click the button
  5. Position your layer by dragging the image in the editor,  you can also change the opacity and background colour
  6. Click save layer

You can see an example of layers in action in this prototype:

Layer to Layer

Now you've got the basics, lets take it a step further by using our layer to layer feature:

To add the layer-to-layer feature to your own prototype:

  1. Open any screen in the Editor
  2. Click and drag to draw a hotspot 
  3. Select the layer image from the menu at the bottom > click on the 'layer' button towards the left of the menu
  4. Open the layer image itself within the editor > click and drag to draw a hotspot on the image
  5. Select another layer image from the menu at the bottom > click on the 'layer' button again

You can see an example of the layer-to-layer feature in action below. Please note that the layer to layer feature only allows one layer to be open at any time.

 

Introducing Scrollable Layers 🎉

We have recently released the latest update to layers; scrollable layers! You can add another dimension of sophistication to your prototype by using long menu panels or modals which you can scroll to see the full content.

To create the effect of a scrolling element within your design:

  1. Select any image in your project and click view
  2. Once the Editor opens, click and drag anywhere on the image to draw a hotspot
  3. In the image selector pop up, select the destination for your hotspot
  4. The 'layer an image' option on the left will become available, click the button
  5. Position your layer by dragging the image in the editor,  you can also change the opacity and background colour
  6. Click allow layer to scroll
  7. Click save layer
Was this article helpful?
261 out of 488 found this helpful

In this section

See more