I don’t know if you noticed but every time you zoom in and out of Google maps; it’s actually scrolling between layers. These layers are connected to a zoom percentage range. Basically at every 10% or so; it changes the layer itself; giving you the illusion of zooming in or out.
Hi Akash, thanks this was helpful. Can you tell how to create a similar map interaction but in a shape inside the artboard leaving margins from all the sides.
@@arushiarora5393 hey ! That's easy too. you need to create a group the size of the rectangle you want.Add the big map image in the group too. Now change the group setting to "Frame". Change the bounds of the group (by clicking cmd) and change exactly to the rectangle. Enable clip content on the "frame". Allow horizontal and vertical scroll in prototyping to this group. Tadaa you are done! Connect with me on insta or linked, if it's still unclear. I will be happy to help 🤗✌️✌️
@@AkashYadavUX Sir can you please help me with fitting the image using plugin. I'm adding the image in rectangle 3 but it's not coming in frame. can you help me in pointing out my mistake.
hi Akash, thank you for the tutorial. it been 3years you made this masterpiece and its very useful. please i have a challenge here, I'm not seeing Mapsicle on my plugins, could it be that it has been updated to another name or what? please kindly help on how to get a Mapsicle or a new map plugins. Thanks
Hey! you can create those boxed by creating a square and an inverted triangle. Then combine the two shapes (you will find this option on the top center of Figma next to component option) and that's it. You can find the link to source file from this video ua-cam.com/video/TSXyYt4o0Zg/v-deo.html 🤗🤗
Love it sir , I learn alot from your channel, I just done my internship as UI/UX developer at a Korean company , I saw you did same field of job at Myntra , is there any chance sir I can talk with HR to get an internship as figma UI/UX developer to learn at your company while working
Hey Select the frame containing search icon and go to the right panel of FIgma. You will see a check mark that says" fix position while scrolling". Select that, it will make the search stay static even if you scroll✌️
if you navigate on the map with the pin of the place open, you go up to the upper bar that is fixed, the pin does not overlap? It happens to me and I don't know how to fix it.
Would you help me please? I appreciate it. When I have a Frame and open Mapsicle plugin, this doesn't work. Map never appearance. I put the token in token input and there isn't a map there.. Thank you!
Hey Lali You don't need to set a token, it's not mandatory. Just enter the coordinates of the location you want the map of in the plugin, select a frame/rectangle and create a map. This is should work. Meanwhile, you can check out my source file here to see if you are doing any mistake 🤗 ua-cam.com/video/TSXyYt4o0Zg/v-deo.html
Thank you very much for this tutorial. I'm still having a question : How do you do to make dynamic pins on the map (for example I want my users to be able to add a custom pin on my map) ? What kind of database should I use ? Thanks !
And also : How do you manage to get the map for the entire world ? And what kind of magic do you use to be able to zoom on the map ? Thanks a lot, I've learnt a lot.
Hey ! Unfortunately there is no way to create dynamic pin at the moments from the plugins. If you just wanna mock the pins, you can add your own pins as shapes on the map, but there are no automated plugins for that at the moment :)
Hey, I created a separate frame so that I can club the map & location pins together. So that when I pan the map pins move with them. For just simple maps you can do that without additional frames as artboard itself is a frame with all the scrolling options.
Nice very much thank you I get some tips ❤ And one help can I do this in figma if i click the object or image it goes to google maps Is that possible ❤
Hey Star-lord, you are in luck. This is possible in Figma. Select your image and go to protoyping mode, add an interaction: On click-> open link. Add your custom url in the box provided and it will open the map when you click your element✌️✌️
Sir please i added a search button to my map but it isn’t stable as yours and when i move my map it moves along or away from it, what can i do to make my search icon stay and fixed sir
Hey! Remove your search bar from the maps group. It shouldn't be any group. Additionally select, " Fix position while scrolling" in the right panel. This will make it fixed ✌️
hey! The search bar is not a part of the frame. I added the UI component my self. It's a rectangle with some shadows and text and property set to " Fixed position while scrolling".🤗
Select the rectangle and on the right panel you will see a small check box " fix position while scrolling". This will make elements fixed even of others are scrolling 🙂
Let's say theoretically you are developing a map, in that case pins only appear if you have added some sort of search or filter on the map. Like "coffee shops near me". So you don't show pins all the time , only when a search is done
@@AkashYadavUX yah yah i really love to learn to build my own case study, sorry if i can ask , do you have any group like telegram or somthing for learn togather sir ?
Hey Anuj Make sure that the elements are in the group even if they are out of artboard. What happens is that Figma de-groups element if you move them out of artboard, so make sure you move them out carefully. Check the layers panel to make sure elements are still in the same group even if they are out. This should do the trick. You can find the source file of this interaction here: ua-cam.com/video/TSXyYt4o0Zg/v-deo.html
why is search bar not moving while playing the prototype? When i tried, search bar and things that I put are also moving. I want to keep them fixed while moving the background map...the other problem I faced is that if i am changing the map size to phone size, then the clipped out content can't be scrolled while playing the prototype, so I had to keep the map size original
Hey if you could make a video about adding triggers in Google maps, as in while our location is moving(vehicle) and as soon as we come near to that specific location it will get triggered and give us an alert.
Hey Berd! You can't do Pan and Zoom like a google map on Figma, as its prototype capabilities are limited. What you can do is to have the world map in one artboard, and a zoomed part of the same map (country) on other artboard. Link them together with a tap trigger and smart-animate in Figma. This will mimic the desired effect of zooming as long as you create a specific country map on the other artboard. I will try to add such scenario in upcoming videos ✌🏻
@@AkashYadavUX Yeah I tried that already, it doesnt have the zoom effect I wanted. Would it possible for me to send you a clip of my artboard? I have small issue but i cant explain it in words
Hey You can always resize the frame to the shape of your liking. But if you insist on using a rectangle then select the rectangle and then use mapsicle plugin, it will automatically fill the shape with the map.
go slow and clear explanation , your going very fast most of the peoples not like you smart , try to explain be step by step with clear. keypad buttons. thank you
This video is really helpful🤩
thanks a lot, i am sure you would love other videos on my channel too😇
I don’t know if you noticed but every time you zoom in and out of Google maps; it’s actually scrolling between layers. These layers are connected to a zoom percentage range. Basically at every 10% or so; it changes the layer itself; giving you the illusion of zooming in or out.
And how can one do that in figma? 😮
Let me know what you want to see next on Figma prototyping and I will prepare it in the next video ✌🏻
Thank you for your tutorials, they are great. Could you please show some interesting figma prototyping with micro interaction?
@@pavlozhydkykh9335 Surely, working on a few things. Will update in a few days with a new tutorial 🤘
@@AkashYadavUX Great! Thank you!
Hi Akash, thanks this was helpful. Can you tell how to create a similar map interaction but in a shape inside the artboard leaving margins from all the sides.
@@arushiarora5393 hey ! That's easy too. you need to create a group the size of the rectangle you want.Add the big map image in the group too. Now change the group setting to "Frame". Change the bounds of the group (by clicking cmd) and change exactly to the rectangle. Enable clip content on the "frame". Allow horizontal and vertical scroll in prototyping to this group. Tadaa you are done!
Connect with me on insta or linked, if it's still unclear. I will be happy to help 🤗✌️✌️
Akash,
Thanks for doing these short tactical, how-to videos. They are exceptionally useful and stand the test of time! Well done.
Thanks a lot Rick😇
@@AkashYadavUX Sir can you please help me with fitting the image using plugin. I'm adding the image in rectangle 3 but it's not coming in frame.
can you help me in pointing out my mistake.
Dude you are my hero. Quality video, straight to the point, your good looks didn't hurt either ;). Thanks a lot for the help.
thank you Kai🤩🤩🤩🤩
clean and clear representation, really helped a lot
hi Akash, thank you for the tutorial. it been 3years you made this masterpiece and its very useful. please i have a challenge here, I'm not seeing Mapsicle on my plugins, could it be that it has been updated to another name or what? please kindly help on how to get a Mapsicle or a new map plugins. Thanks
Super helpful video!! thanks so much, you explain it very clearly so that a beginner can follow your instructions.
Thanks a lot Rina😇 do check out the other tutorials on my channel too 😬
Thank you so much it saved me for a class project! Cheers
glad the videos helped 😇😇
Sir. In my figma plugins mapsicle in not showing.why?
Thank you. This video is really helpful and beginner friendly.
Great video. Got all my doubts solved in a single video:) Thanks
Glad it helped!
It is so explanatory. Great job👍🏻
that's what I need, thank you sir. Your video is so underrated!
thanks a lot. Do share the video across 😇
Akash, thanks this was great! Can't wait to see more videos!
Glad you liked it David. Tonnes of other tutorial on my channel and i will be bringing more soon✌️
Akash, your style of teaching is really amazing!
So nice of you, 🙏
This was awesome and easy ...thank you .
thanks from argentina man! im doing a Ux/Ui study!! you help me a lot :)
Glad it helped Nicolas 😇
Hi Ash i really liked your tutorial, its very good. I need help please tell me how you made the image box. Specially the outer one.
Hey!
you can create those boxed by creating a square and an inverted triangle. Then combine the two shapes (you will find this option on the top center of Figma next to component option) and that's it.
You can find the link to source file from this video ua-cam.com/video/TSXyYt4o0Zg/v-deo.html
🤗🤗
@@AkashYadavUX Thank you so much!!
that was very helpul...thank you so much!
😇😇😇😇
8:09 to add photos to the map
Just what I was looking for.
Thanks!
Glad it helped
very helpful tutorial, thks so much :)
Thanks a lot... Really it’s a great job..
thank you so much :)
Thanks G you helped my friend out
Love it sir , I learn alot from your channel, I just done my internship as UI/UX developer at a Korean company , I saw you did same field of job at Myntra , is there any chance sir I can talk with HR to get an internship as figma UI/UX developer to learn at your company while working
Helpful..pls show us how to design chatbot
Mapsicle is down, what other free maps look clean pls
Pretty helpful, thank you😍
Glad it was helpful!
I tired to replicate this but the search button kept moving along with out the frame … please what can I do to change that. Thanks 🙏
Hey
Select the frame containing search icon and go to the right panel of FIgma. You will see a check mark that says" fix position while scrolling". Select that, it will make the search stay static even if you scroll✌️
Thank you so much … it worked perfectly .
@@AkashYadavUX This worked for me too, thank you
if you navigate on the map with the pin of the place open, you go up to the upper bar that is fixed, the pin does not overlap? It happens to me and I don't know how to fix it.
Thank you so much!!! You saved me ❤️😵💫
How do you make the pin move to the center of the screen with the map after you click it?
mapsicle is not there in a plugin.what can i do
How to make that backgorund shape?
can this also be viewed on a laptop or only phone?
Nice bro 😁
Would you help me please? I appreciate it. When I have a Frame and open Mapsicle plugin, this doesn't work. Map never appearance.
I put the token in token input and there isn't a map there.. Thank you!
Hey Lali
You don't need to set a token, it's not mandatory. Just enter the coordinates of the location you want the map of in the plugin, select a frame/rectangle and create a map. This is should work.
Meanwhile, you can check out my source file here to see if you are doing any mistake 🤗
ua-cam.com/video/TSXyYt4o0Zg/v-deo.html
Sir can you please help me to set location window in where all cities and looks?
Thanku sir for such a nice explanation
I love this ❤️❤️❤️👏👏👏
How do you set/find your user location so as integrating it into the app?
Hey Isipin,
ideally there should be a GPS icon too on the app, so that users can tap on it for their current location.
謝謝拍這部影片～～學到很多！🥹🥹🥹🥹🥹
Thank you for your tutorials🥹
Thank you very much for this tutorial. I'm still having a question : How do you do to make dynamic pins on the map (for example I want my users to be able to add a custom pin on my map) ?
What kind of database should I use ?
Thanks !
And also : How do you manage to get the map for the entire world ? And what kind of magic do you use to be able to zoom on the map ? Thanks a lot, I've learnt a lot.
Hey !
Unfortunately there is no way to create dynamic pin at the moments from the plugins. If you just wanna mock the pins, you can add your own pins as shapes on the map, but there are no automated plugins for that at the moment :)
Thank you , this is so helpful 🤗
you're welcome 😇
The horizontal & vertical scrolling even works when the map is not in a separate frame, so why did you do this? Any special reason...?
Hey, I created a separate frame so that I can club the map & location pins together. So that when I pan the map pins move with them.
For just simple maps you can do that without additional frames as artboard itself is a frame with all the scrolling options.
Nice very much thank you I get some tips ❤
And one help can I do this
in figma if i click the object or image it goes to google maps
Is that possible ❤
Hey Star-lord, you are in luck. This is possible in Figma.
Select your image and go to protoyping mode, add an interaction: On click-> open link. Add your custom url in the box provided and it will open the map when you click your element✌️✌️
@@AkashYadavUX really very Very very much thank you bro
I really don't have any idea but u helped me very much thank you ❤
no problem 😊😊
@@AkashYadavUX ❣️❤😍❣️❤
Great job! Thanks! It helps)
Glad you liked it Karolina
thank you this was very helpful!
Thank you Imani 😇
Sir please i added a search button to my map but it isn’t stable as yours and when i move my map it moves along or away from it, what can i do to make my search icon stay and fixed sir
Hey! Remove your search bar from the maps group. It shouldn't be any group. Additionally select, " Fix position while scrolling" in the right panel. This will make it fixed ✌️
@@AkashYadavUX thank you sir, i was the one that also texted on instagram lol
THANK YOU ! GREAT VIDEO !
Thank you😇
thank you!!!
Please how did you get the search bar , my iPhone 11 Pro Max frame doesn’t have a search bar
hey!
The search bar is not a part of the frame. I added the UI component my self. It's a rectangle with some shadows and text and property set to " Fixed position while scrolling".🤗
How did you stabilized the search rectangle? I've tried many times and still it moves while scrolling in the map
Select the rectangle and on the right panel you will see a small check box " fix position while scrolling". This will make elements fixed even of others are scrolling 🙂
really helpful😃
thanks you my frined
but what if i'm creating a map, would i need to make pins for all the locations in the whole world? how does that work
Let's say theoretically you are developing a map, in that case pins only appear if you have added some sort of search or filter on the map. Like "coffee shops near me". So you don't show pins all the time , only when a search is done
man u are awasome.
Thanks a lot🤠 Do check out my recent vidoes. It has links for all the source files 😇
@@AkashYadavUX yah yah i really love to learn to build my own case study, sorry if i can ask , do you have any group like telegram or somthing for learn togather sir ?
discord.gg/57XRdbKd92 this my discord server, you can join this 😇🤠
Unable to prototype the free objects (which are not on a frame) unless it's a component
Hey Anuj
Make sure that the elements are in the group even if they are out of artboard. What happens is that Figma de-groups element if you move them out of artboard, so make sure you move them out carefully. Check the layers panel to make sure elements are still in the same group even if they are out. This should do the trick.
You can find the source file of this interaction here: ua-cam.com/video/TSXyYt4o0Zg/v-deo.html
hey.. can i get link figma?^^
why is search bar not moving while playing the prototype? When i tried, search bar and things that I put are also moving. I want to keep them fixed while moving the background map...the other problem I faced is that if i am changing the map size to phone size, then the clipped out content can't be scrolled while playing the prototype, so I had to keep the map size original
Select the option on the right panel ( prototype settings) as fixed. It will stay at one place.
ok will try, thanks@@AkashYadavUX
Hey if you could make a video about adding triggers in Google maps, as in while our location is moving(vehicle) and as soon as we come near to that specific location it will get triggered and give us an alert.
Hey Harsh!
Will try to do that in coming videos.
@@AkashYadavUX thank you so much sir it would be really great help 🙏❤️❤️
Can you share the figma link bro.
all Figma files are available on my Figma Community page: Figma.com/@yakash
hi is it possible to make the zoom into the map? i.e I have a map of the world and when I click on a country, I would like it automatically zoom in
Hey Berd! You can't do Pan and Zoom like a google map on Figma, as its prototype capabilities are limited. What you can do is to have the world map in one artboard, and a zoomed part of the same map (country) on other artboard. Link them together with a tap trigger and smart-animate in Figma.
This will mimic the desired effect of zooming as long as you create a specific country map on the other artboard.
I will try to add such scenario in upcoming videos ✌🏻
@@AkashYadavUX Yeah I tried that already, it doesnt have the zoom effect I wanted. Would it possible for me to send you a clip of my artboard? I have small issue but i cant explain it in words
@@berdkrillin6933 hey! sure please send me the clip on my instagram DM, Insta ID is in the description. I will check it out :)
How did u exported ?
And at the end u r showing it in mobile,how ?
U could hv shown all the things in 1 video.😑🙄
Get the Figma mirror app on your phone and it will automatically show all the interaction done on your laptop to your phone 😇
So can we do the same map interactions for uber app??
Yes you can!
Someone actually did try and tagged me . So it is doable ✌️
I can’t find this plugin in figma?
sadly the developer delete the plugin, and i still find the alternativ one. have you find one ?
@@dimasadi9852 I haven’t
Please I want to create map on a rectangle shape and not the whole frame… 😢
Hey You can always resize the frame to the shape of your liking. But if you insist on using a rectangle then select the rectangle and then use mapsicle plugin, it will automatically fill the shape with the map.
no zoom, no interactions.
ون
go slow and clear explanation , your going very fast most of the peoples not like you smart , try to explain be step by step with clear. keypad buttons. thank you