Designing Google Maps interaction in Figma
Join our mentorship program here 👉 www.upglance.com/
Follow me on:
/ kash__91
dribbble.com/akashy
Guys, 👋 I am also working on a full-fledged UX Design course on how design works in companies. Practical knowledge on design processes, hands-on design tools, product thinking, problem-solving, cracking design interviews and more.
You can now support me by buying me a coffee here: www.buymeacoffee.com/ZeWIlq6
Recommended books for UX:
1. Universal Principles of design (amzn.to/39XQ6s9)
2. Design of Everyday Things (amzn.to/31ifuoT)
3. Start with why (amzn.to/3i2QZCA)
4. Don’t Make Me Think (amzn.to/3ikiDeP)
5. Hooked: How to Build Habit-Forming Products (amzn.to/2PqUQxi)
6. The Lean Startup (amzn.to/31k0Nl1)
7. Made to Stick: Why Some Ideas Survive and Others Die (amzn.to/33rXzOY)
8. Creative Confidence: Unleashing the Creative Potential Within Us All (amzn.to/33rUFd6)
9. Thinking, Fast and Slow (amzn.to/2PocEcb)
Recommended UX Courses:
www.udacity.com/course/intro-...
www.udacity.com/course/intro-...
www.udacity.com/course/ux-des...
www.udacity.com/course/ux-des...
www.coursera.org/learn/user-e...
www.coursera.org/learn/introt...
My KZread setup gear:
Canon M50: amzn.to/2Xv6LP3
Tripod: amzn.to/30xluel
Boya shotgun mic: amzn.to/2XuZOxc
Пікірлер: 134
This video is really helpful🤩
@AkashYadavUX
3 жыл бұрын
thanks a lot, i am sure you would love other videos on my channel too😇
Dude you are my hero. Quality video, straight to the point, your good looks didn't hurt either ;). Thanks a lot for the help.
@AkashYadavUX
3 жыл бұрын
thank you Kai🤩🤩🤩🤩
clean and clear representation, really helped a lot
Let me know what you want to see next on Figma prototyping and I will prepare it in the next video ✌🏻
@pavlozhydkykh9335
3 жыл бұрын
Thank you for your tutorials, they are great. Could you please show some interesting figma prototyping with micro interaction?
@AkashYadavUX
3 жыл бұрын
@@pavlozhydkykh9335 Surely, working on a few things. Will update in a few days with a new tutorial 🤘
@pavlozhydkykh9335
3 жыл бұрын
@@AkashYadavUX Great! Thank you!
@arushiarora5393
3 жыл бұрын
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.
@AkashYadavUX
3 жыл бұрын
@@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 🤗✌️✌️
It is so explanatory. Great job👍🏻
Akash, Thanks for doing these short tactical, how-to videos. They are exceptionally useful and stand the test of time! Well done.
@AkashYadavUX
2 жыл бұрын
Thanks a lot Rick😇
@AnjaliSingh-lz6ju
Жыл бұрын
@@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.
Thank you. This video is really helpful and beginner friendly.
Great video. Got all my doubts solved in a single video:) Thanks
@AkashYadavUX
3 жыл бұрын
Glad it helped!
Akash, thanks this was great! Can't wait to see more videos!
@AkashYadavUX
2 жыл бұрын
Glad you liked it David. Tonnes of other tutorial on my channel and i will be bringing more soon✌️
that's what I need, thank you sir. Your video is so underrated!
@AkashYadavUX
3 жыл бұрын
thanks a lot. Do share the video across 😇
Super helpful video!! thanks so much, you explain it very clearly so that a beginner can follow your instructions.
@AkashYadavUX
3 жыл бұрын
Thanks a lot Rina😇 do check out the other tutorials on my channel too 😬
thanks from argentina man! im doing a Ux/Ui study!! you help me a lot :)
@AkashYadavUX
3 жыл бұрын
Glad it helped Nicolas 😇
Akash, your style of teaching is really amazing!
@AkashYadavUX
2 жыл бұрын
So nice of you, 🙏
OMG This is help me a lot. Thank you very much,, you are such a big helper for a beginner like me 😭😭😭😭
This was awesome and easy ...thank you .
Thank you so much it saved me for a class project! Cheers
@AkashYadavUX
3 жыл бұрын
glad the videos helped 😇😇
very helpful tutorial, thks so much :)
Just what I was looking for. Thanks!
@AkashYadavUX
Жыл бұрын
Glad it helped
Sir. In my figma plugins mapsicle in not showing.why?
Thank you so much!!! You saved me ❤️😵💫
謝謝拍這部影片~~學到很多!🥹🥹🥹🥹🥹
@iamavaaaa
Жыл бұрын
Thank you for your tutorials🥹
that was very helpul...thank you so much!
@AkashYadavUX
3 жыл бұрын
😇😇😇😇
Great job! Thanks! It helps)
@AkashYadavUX
3 жыл бұрын
Glad you liked it Karolina
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
thank you this was very helpful!
@AkashYadavUX
3 жыл бұрын
Thank you Imani 😇
Thanks a lot... Really it’s a great job..
@AkashYadavUX
3 жыл бұрын
thank you so much :)
THANK YOU ! GREAT VIDEO !
@AkashYadavUX
3 жыл бұрын
Thank you😇
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.
@sharonosorno5804
8 ай бұрын
And how can one do that in figma? 😮
Pretty helpful, thank you😍
@AkashYadavUX
2 жыл бұрын
Glad it was helpful!
Thank you , this is so helpful 🤗
@AkashYadavUX
3 жыл бұрын
you're welcome 😇
I love this ❤️❤️❤️👏👏👏
thanks you my frined
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
Nice bro 😁
thank you!!!
How do you make the pin move to the center of the screen with the map after you click it?
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.
@AkashYadavUX
3 жыл бұрын
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 kzread.info/dash/bejne/hoeM27utZNKWiso.html 🤗🤗
@axneeey2250
3 жыл бұрын
@@AkashYadavUX Thank you so much!!
Helpful..pls show us how to design chatbot
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.
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 !
@skeenotihkTV
2 жыл бұрын
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.
@AkashYadavUX
2 жыл бұрын
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 :)
man u are awasome.
@AkashYadavUX
3 жыл бұрын
Thanks a lot🤠 Do check out my recent vidoes. It has links for all the source files 😇
@syukronofficial8023
3 жыл бұрын
@@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 ?
@AkashYadavUX
3 жыл бұрын
discord.gg/57XRdbKd92 this my discord server, you can join this 😇🤠
How do you set/find your user location so as integrating it into the app?
@AkashYadavUX
3 жыл бұрын
Hey Isipin, ideally there should be a GPS icon too on the app, so that users can tap on it for their current location.
How to make that backgorund shape?
Sir can you please help me to set location window in where all cities and looks?
@abhishikhakitchen3186
3 жыл бұрын
Thanku sir for such a nice explanation
can this also be viewed on a laptop or only phone?
How did you stabilized the search rectangle? I've tried many times and still it moves while scrolling in the map
@AkashYadavUX
Жыл бұрын
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 🙂
Please how did you get the search bar , my iPhone 11 Pro Max frame doesn’t have a search bar
@AkashYadavUX
3 жыл бұрын
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".🤗
really helpful😃
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!
@AkashYadavUX
3 жыл бұрын
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 🤗 kzread.info/dash/bejne/hoeM27utZNKWiso.html
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.
@AkashYadavUX
3 жыл бұрын
Hey Harsh! Will try to do that in coming videos.
@harshshokeen7076
3 жыл бұрын
@@AkashYadavUX thank you so much sir it would be really great help 🙏❤️❤️
The horizontal & vertical scrolling even works when the map is not in a separate frame, so why did you do this? Any special reason...?
@AkashYadavUX
2 жыл бұрын
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.
mapsicle is not there in a plugin.what can i do
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 ❤
@AkashYadavUX
3 жыл бұрын
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✌️✌️
@star-devil9157
3 жыл бұрын
@@AkashYadavUX really very Very very much thank you bro I really don't have any idea but u helped me very much thank you ❤
@AkashYadavUX
3 жыл бұрын
no problem 😊😊
@star-devil9157
3 жыл бұрын
@@AkashYadavUX ❣️❤😍❣️❤
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
@AkashYadavUX
2 жыл бұрын
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
Unable to prototype the free objects (which are not on a frame) unless it's a component
@AkashYadavUX
3 жыл бұрын
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: kzread.info/dash/bejne/hoeM27utZNKWiso.html
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 🙏
@AkashYadavUX
2 жыл бұрын
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✌️
@godwinidongesit8871
2 жыл бұрын
Thank you so much … it worked perfectly .
@olawandearibisala2631
2 жыл бұрын
@@AkashYadavUX This worked for me too, thank you
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
@AkashYadavUX
3 жыл бұрын
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 ✌🏻
@berdkrillin6933
3 жыл бұрын
@@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
@AkashYadavUX
3 жыл бұрын
@@berdkrillin6933 hey! sure please send me the clip on my instagram DM, Insta ID is in the description. I will check it out :)
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
@AkashYadavUX
3 жыл бұрын
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 ✌️
@beeseebigdul
3 жыл бұрын
@@AkashYadavUX thank you sir, i was the one that also texted on instagram lol
So can we do the same map interactions for uber app??
@AkashYadavUX
3 жыл бұрын
Yes you can! Someone actually did try and tagged me . So it is doable ✌️
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
@AkashYadavUX
5 ай бұрын
Select the option on the right panel ( prototype settings) as fixed. It will stay at one place.
@user-bk7zi1ns8h
5 ай бұрын
ok will try, thanks@@AkashYadavUX
hey.. can i get link figma?^^
Can you share the figma link bro.
@AkashYadavUX
2 жыл бұрын
all Figma files are available on my Figma Community page: Figma.com/@yakash
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.😑🙄
@AkashYadavUX
3 жыл бұрын
Get the Figma mirror app on your phone and it will automatically show all the interaction done on your laptop to your phone 😇
I can’t find this plugin in figma?
@dimasadi9852
9 ай бұрын
sadly the developer delete the plugin, and i still find the alternativ one. have you find one ?
@nihadabdulnazar4478
9 ай бұрын
@@dimasadi9852 I haven’t
Please I want to create map on a rectangle shape and not the whole frame… 😢
@AkashYadavUX
2 жыл бұрын
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