Figma Prototype Challenge Day 13: Overlay

Overlay Cards on a map

Overview of the “Overlay” Prototype. | Image Credits: Building 1 from Pixabay, Building 2 , Building 3 and Building 4 from Unsplash

Here we come with our prototype 13 as a part of the Figma Prototype Challenge! As usual, check here about our reasons to participate, our process and find the links to other prototypes!

Following the concept of an app focused on elevator maintenance, the map is showing a different interaction displaying a card next to the “map pins”. This time the main transition is “Overlay”. If you want to know more about the design details you can have a look on our previous articles Figma Prototype Challenge Day 11: Scroll to and Figma Prototype Challenge Day 12: Zoom in.

1. Click on each dot in the map to see its pin | 2. Once you see the pin, one card overlays the map.

The most important thing for creating this interaction is to make sure that all the layers are in the same order in all the frames, also take care with the positions since this property can alter the effects.

About the transitions applied on the prototype:

👉 Overlay on pins

• The pin component of the map is constructed with two states, the dot and the pin.
• To achieve the smooth transition effect between the two states, the same frame size has been given. In the dot frame, the pin is collapsed, with opacity 0 and placed at the top.
• No interactive components have been applied in this case as each pin displays and overlays a different card.
• The transition between the screens is with Smart animate, in and out.

👉 Overlay on cards

• After clicking on one of the dots, a card will be displayed next to the pin.
• To add more dynamism, the transition overlay is created with a short delay.

As usual, if you would like to know how to create interactions like this, let us know in the comments!