Creating Interactive Map in Figma

hello it's Nick and today I want to show you how to create interactive maps like this one and figma to create an interactive map we need to have two things map image that we can scroll and a frame in which this image will be displayed I will use mobile frame and I will create the map using a plugin called feedmap so let's choose our location I will go for Miami and let's zoom into specific District let's choose this one and image size I will go for the maximum that this plugin allows which is this one ideally the size of the image should be much bigger than the size of the frame that we use and I will also change the style to Outdoors so let's draw the map okay let's remove unnecessary elements like this pin and let's ungroup the section to have only the image next thing is we need to create a frame and I will use mobile frame of iPhone so let's create the frame and give it the size of 393 to 852 and it's extremely important to leave clip content enabled because it allows us to scroll the image inside the frame so the last thing that we need to do is to select the base image and drag it to the frame that we created so once we do that we can drag the image and move position it in the center of the frame that we've created so as you can see the both lines are now in the center all right so we can now go to the Prototype mode and enable scrolling Behavior turn it to both directions this is it now we can play with our frame all right as you can see I can scroll it to the right and to the left or drag it to the top or to the bottom so this is it hope it was helpful thank you

Channel: Nick Babich

Views: 16,161

Keywords: figma map, creating map in figma, interactive map in figma, scrollable map figma, figma map design, figma map plugin, figma ui design, how to create map in figma, interactive figma map, prototyping in figma, how to design map in figma

Id: VW3IJBGap3k

Length: 2min 15sec (135 seconds)

Published: Wed Sep 13 2023