Figma Prototype Challenge Day 11: Scroll to

Map experience

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

Here we come with our prototype 11 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, we have created a map where you can find the locations of the devices connected to our cloud. You will see the information about the status of the connected elevators within the markers of the map, and in the cards details.

The whole concept has been created using the dark mode, as the Design System has tokens to make the transfer from light to dark simpler and visually consistent.

1. Horizontal scroll on mini-cards. | 2. After click on one mini-card, there is a transition to the specific location on the map. | 3. You can also click on the map-markers for centre it on the screen.

We built this prototype using a big map containing all the locations marked. The transition of changing locations is imitating the way you interact with a map in a real app, also the movement within the map.

About the map design:

• Map is created with the plugin Figmap, generating different views of the map with the same zoom scale for more extensive view of it.
• The app is imitating the way a normal Map will work, you have access to the locations by clicking the cards or markers, and by dragging the map.
• We have used Smart Animate to have those smooth transition between the different locations.

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