Figma Prototype Challenge Day 12: Zoom in

Map zoom in and out

Overview of the “Zoom in” Prototype. | Image Credits: Building 1 from Pixabay and Building 2 from Unsplash.

Here we come with our prototype 12 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 decided to work other map interactions in this challenge. This time the transition is zoom in and out, we have reused the previous screen for doing it.

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. If you want to know more about the design details you can have a look on our previous article Figma Prototype Challenge Day 11: Scroll to.

1. Drag to right for zoom in. | 2. Drag to left for zoom out.

The map was created with the plugin Figmap. We built this prototype using a big map containing all the locations marked. The transition of zoom in is imitating the interaction and the movement on a real map app.

The Zoom Control is designed with the little circle indicator on a separate layer, to have more control over the movement.

About the zoom in transition:

• The transition is very simple, we’ve used only two screens to generate this effect.We need to prepare each screen with the end-zoom of the map we want to show, in this case:
  1. One screen with an overview map of Berlin.
  2. The other one with a zoomed-in view of a point on the map.
• The zoom indicator needs to be positioned close to the “+” in the second screen.
• Use on drag interaction between the frames and check it out on Prototype mode!

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