Figma Map - Figma Interactive Map

i made this using figma and i'm going to show you how to do it hi i am alex from essential web apps and don't worry it's very easy but before that we make videos on wordpress website and social media strategy web design and development to see our regularly uploaded videos please hit the subscribe buttons and click the bell icon for notification so we are here in figma as you can see i have two elements here one is this big map and this drop pin icon so first i am going to create a frame with this frame size just click on the frame tool and from this list select desktop as you see this is the same size as the previously made frame let's rename this to map now i'm gonna pull this map into this frame just like this i am also going to pull this drop pin icon here i put this pin on the right side because my contact info will be here and i want my drop pin to be visible right here now what i'm gonna do click on the map frame and uncheck this clip content option it will let you see the elements that are outside the frame border now let's make four rectangles select this tool and make it the same size as the frame give it a red thick border and delete the fill of the rectangle make a copy of this icon and place it here now very quickly make three more copies of it and place it randomly also rename the rectangle into whatever you like as you see these drop pin icons are outside of the frame but i want these inside the frame so let's pull these back into the map frame now this is very important you have to convert these rectangles into components like this perfect now the second important thing is we don't want these to be visible so i'm gonna set the opacity into zero okay now everything is into the frame so check this again to clip it to the frame border now pull this map frame into the desktop frame and align it properly if the size is right it will just fit in and i want this contact info over the map so pull it down now let's start the prototyping first select this map frame and under the prototype tab click here and select this now let's check nice it's working perfectly now these buttons should navigate to a certain point of the map so for that select the button then click on this plus icon under the prototype tab click on this select this and then select scroll to and here select any of the rectangles that you renamed previously set it to animation select ease in and out and this one to 800 now repeat this for the rest of the buttons now let's check it is working perfectly one extra tip if you want to make a real location map you can do it very easily go to the community tab and search map you will find this plugin here install it and by this plugin you can set a real map into your design so there you go if you like the video please give a thumbs up and for more please subscribe if you want to learn how i make this glass effect and this button component then i will put the link of these videos in the description and i will see you in the next video you

Channel: Essential Web Apps

Views: 45,487

Keywords: figma map, scrolling on map using figma, figma scrollable map, figma interactive map, figma prototyping map, google map in figma, google map, figma tutorial, figma mapsicle, figma prototyping, figma prototype map, scrollable map in figma, add map in contact page, interactive map in figma, create interactive map, figma map input, add map in ui design, ui/ux design, figma, tutorial, contact page, map, maps

Id: i3vVCavfCC0

Length: 4min 46sec (286 seconds)

Published: Mon Mar 15 2021