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 🤗✌️✌️
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.
@@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 🤗🤗
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 :)
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.
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
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
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✌️✌️
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✌️
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.
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 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! 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".🤗
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 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
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 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 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😇
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 🤗✌️✌️
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? 😮
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🤩🤩🤩🤩
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
clean and clear representation, really helped a lot
Sir. In my figma plugins mapsicle in not showing.why?
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 😬
It is so explanatory. Great job👍🏻
Great video. Got all my doubts solved in a single video:) Thanks
Glad it helped!
that's what I need, thank you sir. Your video is so underrated!
thanks a lot. Do share the video across 😇
Thanks G you helped my friend out
Akash, your style of teaching is really amazing!
So nice of you, 🙏
Thank you. This video is really helpful and beginner friendly.
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✌️
Thank you so much it saved me for a class project! Cheers
glad the videos helped 😇😇
This was awesome and easy ...thank you .
Just what I was looking for.
Thanks!
Glad it helped
thanks from argentina man! im doing a Ux/Ui study!! you help me a lot :)
Glad it helped Nicolas 😇
that was very helpul...thank you so much!
😇😇😇😇
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!!
thanks you my frined
Helpful..pls show us how to design chatbot
very helpful tutorial, thks so much :)
Mapsicle is down, what other free maps look clean pls
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 so much!!! You saved me ❤️😵💫
謝謝拍這部影片～～學到很多！🥹🥹🥹🥹🥹
Thank you for your tutorials🥹
Sir can you please help me to set location window in where all cities and looks?
Thanku sir for such a nice explanation
How do you make the pin move to the center of the screen with the map after you click it?
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.
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
Thanks a lot... Really it’s a great job..
thank you so much :)
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!!!
Pretty helpful, thank you😍
Glad it was helpful!
I love this ❤️❤️❤️👏👏👏
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 ❣️❤😍❣️❤
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
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.
THANK YOU ! GREAT VIDEO !
Thank you😇
mapsicle is not there in a plugin.what can i do
Great job! Thanks! It helps)
Glad you liked it Karolina
Nice bro 😁
How to make that backgorund shape?
thank you this was very helpful!
Thank you Imani 😇
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.
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
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 😇🤠
Thank you , this is so helpful 🤗
you're welcome 😇
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".🤗
can this also be viewed on a laptop or only phone?
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
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 🙂
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
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 🙏❤️❤️
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 😇
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
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 ✌️
hey.. can i get link figma?^^
Can you share the figma link bro.
all Figma files are available on my Figma Community page: Figma.com/@yakash
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
no zoom, no interactions.
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.
ون
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
really helpful😃