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

  • @anumehajain2780
    @anumehajain27803 жыл бұрын

    This video is really helpful🤩

  • @AkashYadavUX

    @AkashYadavUX

    3 жыл бұрын

    thanks a lot, i am sure you would love other videos on my channel too😇

  • @Kaihenrybjork
    @Kaihenrybjork3 жыл бұрын

    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

    @AkashYadavUX

    3 жыл бұрын

    thank you Kai🤩🤩🤩🤩

  • @gargichaudhury7048
    @gargichaudhury7048 Жыл бұрын

    clean and clear representation, really helped a lot

  • @AkashYadavUX
    @AkashYadavUX3 жыл бұрын

    Let me know what you want to see next on Figma prototyping and I will prepare it in the next video ✌🏻

  • @pavlozhydkykh9335

    @pavlozhydkykh9335

    3 жыл бұрын

    Thank you for your tutorials, they are great. Could you please show some interesting figma prototyping with micro interaction?

  • @AkashYadavUX

    @AkashYadavUX

    3 жыл бұрын

    @@pavlozhydkykh9335 Surely, working on a few things. Will update in a few days with a new tutorial 🤘

  • @pavlozhydkykh9335

    @pavlozhydkykh9335

    3 жыл бұрын

    @@AkashYadavUX Great! Thank you!

  • @arushiarora5393

    @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

    @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 🤗✌️✌️

  • @oluwaseuncrown7280
    @oluwaseuncrown72802 жыл бұрын

    It is so explanatory. Great job👍🏻

  • @ricksegalCanada
    @ricksegalCanada2 жыл бұрын

    Akash, Thanks for doing these short tactical, how-to videos. They are exceptionally useful and stand the test of time! Well done.

  • @AkashYadavUX

    @AkashYadavUX

    2 жыл бұрын

    Thanks a lot Rick😇

  • @AnjaliSingh-lz6ju

    @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.

  • @gloriadedo1960
    @gloriadedo196011 ай бұрын

    Thank you. This video is really helpful and beginner friendly.

  • @geethar2855
    @geethar28553 жыл бұрын

    Great video. Got all my doubts solved in a single video:) Thanks

  • @AkashYadavUX

    @AkashYadavUX

    3 жыл бұрын

    Glad it helped!

  • @davidrodriguez2098
    @davidrodriguez20982 жыл бұрын

    Akash, thanks this was great! Can't wait to see more videos!

  • @AkashYadavUX

    @AkashYadavUX

    2 жыл бұрын

    Glad you liked it David. Tonnes of other tutorial on my channel and i will be bringing more soon✌️

  • @mochalfii
    @mochalfii3 жыл бұрын

    that's what I need, thank you sir. Your video is so underrated!

  • @AkashYadavUX

    @AkashYadavUX

    3 жыл бұрын

    thanks a lot. Do share the video across 😇

  • @rinayeong7740
    @rinayeong77403 жыл бұрын

    Super helpful video!! thanks so much, you explain it very clearly so that a beginner can follow your instructions.

  • @AkashYadavUX

    @AkashYadavUX

    3 жыл бұрын

    Thanks a lot Rina😇 do check out the other tutorials on my channel too 😬

  • @nicolasklug2356
    @nicolasklug23563 жыл бұрын

    thanks from argentina man! im doing a Ux/Ui study!! you help me a lot :)

  • @AkashYadavUX

    @AkashYadavUX

    3 жыл бұрын

    Glad it helped Nicolas 😇

  • @usmanullahkhan4829
    @usmanullahkhan48292 жыл бұрын

    Akash, your style of teaching is really amazing!

  • @AkashYadavUX

    @AkashYadavUX

    2 жыл бұрын

    So nice of you, 🙏

  • @seribu16
    @seribu166 ай бұрын

    OMG This is help me a lot. Thank you very much,, you are such a big helper for a beginner like me 😭😭😭😭

  • @violetegbe7972
    @violetegbe79728 ай бұрын

    This was awesome and easy ...thank you .

  • @IbrahimovichZlatan
    @IbrahimovichZlatan3 жыл бұрын

    Thank you so much it saved me for a class project! Cheers

  • @AkashYadavUX

    @AkashYadavUX

    3 жыл бұрын

    glad the videos helped 😇😇

  • @Alex-qv6gy
    @Alex-qv6gy Жыл бұрын

    very helpful tutorial, thks so much :)

  • @veronica.eterna
    @veronica.eterna Жыл бұрын

    Just what I was looking for. Thanks!

  • @AkashYadavUX

    @AkashYadavUX

    Жыл бұрын

    Glad it helped

  • @PoojaSharma-hw7vm
    @PoojaSharma-hw7vm8 ай бұрын

    Sir. In my figma plugins mapsicle in not showing.why?

  • @Liquorrrchick
    @Liquorrrchick Жыл бұрын

    Thank you so much!!! You saved me ❤️😵‍💫

  • @iamavaaaa
    @iamavaaaa Жыл бұрын

    謝謝拍這部影片~~學到很多!🥹🥹🥹🥹🥹

  • @iamavaaaa

    @iamavaaaa

    Жыл бұрын

    Thank you for your tutorials🥹

  • @theveronicarae
    @theveronicarae3 жыл бұрын

    that was very helpul...thank you so much!

  • @AkashYadavUX

    @AkashYadavUX

    3 жыл бұрын

    😇😇😇😇

  • @karolinak3345
    @karolinak33453 жыл бұрын

    Great job! Thanks! It helps)

  • @AkashYadavUX

    @AkashYadavUX

    3 жыл бұрын

    Glad you liked it Karolina

  • @aishatolokoba7430
    @aishatolokoba743010 ай бұрын

    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

  • @linesthatmove
    @linesthatmove3 жыл бұрын

    thank you this was very helpful!

  • @AkashYadavUX

    @AkashYadavUX

    3 жыл бұрын

    Thank you Imani 😇

  • @rakibuix
    @rakibuix3 жыл бұрын

    Thanks a lot... Really it’s a great job..

  • @AkashYadavUX

    @AkashYadavUX

    3 жыл бұрын

    thank you so much :)

  • @andreastheodosakis3337
    @andreastheodosakis33373 жыл бұрын

    THANK YOU ! GREAT VIDEO !

  • @AkashYadavUX

    @AkashYadavUX

    3 жыл бұрын

    Thank you😇

  • @yipman214
    @yipman2149 ай бұрын

    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

    @sharonosorno5804

    8 ай бұрын

    And how can one do that in figma? 😮

  • @ayushichoudhary8123
    @ayushichoudhary81232 жыл бұрын

    Pretty helpful, thank you😍

  • @AkashYadavUX

    @AkashYadavUX

    2 жыл бұрын

    Glad it was helpful!

  • @helenchinweike8080
    @helenchinweike80803 жыл бұрын

    Thank you , this is so helpful 🤗

  • @AkashYadavUX

    @AkashYadavUX

    3 жыл бұрын

    you're welcome 😇

  • @babygirlfxrlife
    @babygirlfxrlife Жыл бұрын

    I love this ❤️❤️❤️👏👏👏

  • @zarrow
    @zarrow9 ай бұрын

    thanks you my frined

  • @amangadpale9284
    @amangadpale9284 Жыл бұрын

    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

  • @arsyadanihidayat3781
    @arsyadanihidayat37813 жыл бұрын

    Nice bro 😁

  • @thankgodlove
    @thankgodlove Жыл бұрын

    thank you!!!

  • @patrikdavidek6473
    @patrikdavidek64739 ай бұрын

    How do you make the pin move to the center of the screen with the map after you click it?

  • @axneeey2250
    @axneeey22503 жыл бұрын

    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

    @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

    @axneeey2250

    3 жыл бұрын

    @@AkashYadavUX Thank you so much!!

  • @sachiupasani4768
    @sachiupasani4768 Жыл бұрын

    Helpful..pls show us how to design chatbot

  • @mariahecht7121
    @mariahecht7121 Жыл бұрын

    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.

  • @privateName419
    @privateName4196 ай бұрын

    Mapsicle is down, what other free maps look clean pls

  • @skeenotihkTV
    @skeenotihkTV2 жыл бұрын

    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

    @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

    @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 :)

  • @syukronofficial8023
    @syukronofficial80233 жыл бұрын

    man u are awasome.

  • @AkashYadavUX

    @AkashYadavUX

    3 жыл бұрын

    Thanks a lot🤠 Do check out my recent vidoes. It has links for all the source files 😇

  • @syukronofficial8023

    @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

    @AkashYadavUX

    3 жыл бұрын

    discord.gg/57XRdbKd92 this my discord server, you can join this 😇🤠

  • @isipinmo6203
    @isipinmo62033 жыл бұрын

    How do you set/find your user location so as integrating it into the app?

  • @AkashYadavUX

    @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.

  • @alexandertan7713
    @alexandertan7713 Жыл бұрын

    How to make that backgorund shape?

  • @abhishikhakitchen3186
    @abhishikhakitchen31863 жыл бұрын

    Sir can you please help me to set location window in where all cities and looks?

  • @abhishikhakitchen3186

    @abhishikhakitchen3186

    3 жыл бұрын

    Thanku sir for such a nice explanation

  • @redirsalih
    @redirsalih Жыл бұрын

    can this also be viewed on a laptop or only phone?

  • @muhammedcalskan9036
    @muhammedcalskan9036 Жыл бұрын

    How did you stabilized the search rectangle? I've tried many times and still it moves while scrolling in the map

  • @AkashYadavUX

    @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 🙂

  • @epriscus
    @epriscus3 жыл бұрын

    Please how did you get the search bar , my iPhone 11 Pro Max frame doesn’t have a search bar

  • @AkashYadavUX

    @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".🤗

  • @a____d
    @a____d Жыл бұрын

    really helpful😃

  • @lalilionela5471
    @lalilionela54713 жыл бұрын

    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

    @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

  • @harshshokeen7076
    @harshshokeen70763 жыл бұрын

    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

    @AkashYadavUX

    3 жыл бұрын

    Hey Harsh! Will try to do that in coming videos.

  • @harshshokeen7076

    @harshshokeen7076

    3 жыл бұрын

    @@AkashYadavUX thank you so much sir it would be really great help 🙏❤️❤️

  • @kartikeyshandilya7253
    @kartikeyshandilya72532 жыл бұрын

    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

    @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.

  • @JAMUNAR-xn2ub
    @JAMUNAR-xn2ub2 ай бұрын

    mapsicle is not there in a plugin.what can i do

  • @star-devil9157
    @star-devil91573 жыл бұрын

    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

    @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

    @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

    @AkashYadavUX

    3 жыл бұрын

    no problem 😊😊

  • @star-devil9157

    @star-devil9157

    3 жыл бұрын

    @@AkashYadavUX ❣️❤😍❣️❤

  • @khushixd4441
    @khushixd44412 жыл бұрын

    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

    @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

  • @anujgupta6347
    @anujgupta63473 жыл бұрын

    Unable to prototype the free objects (which are not on a frame) unless it's a component

  • @AkashYadavUX

    @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

  • @godwinidongesit8871
    @godwinidongesit88712 жыл бұрын

    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

    @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

    @godwinidongesit8871

    2 жыл бұрын

    Thank you so much … it worked perfectly .

  • @olawandearibisala2631

    @olawandearibisala2631

    2 жыл бұрын

    @@AkashYadavUX This worked for me too, thank you

  • @berdkrillin6933
    @berdkrillin69333 жыл бұрын

    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

    @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

    @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

    @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 :)

  • @beeseebigdul
    @beeseebigdul3 жыл бұрын

    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

    @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

    @beeseebigdul

    3 жыл бұрын

    @@AkashYadavUX thank you sir, i was the one that also texted on instagram lol

  • @akcoder974
    @akcoder9743 жыл бұрын

    So can we do the same map interactions for uber app??

  • @AkashYadavUX

    @AkashYadavUX

    3 жыл бұрын

    Yes you can! Someone actually did try and tagged me . So it is doable ✌️

  • @user-bk7zi1ns8h
    @user-bk7zi1ns8h5 ай бұрын

    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

    @AkashYadavUX

    5 ай бұрын

    Select the option on the right panel ( prototype settings) as fixed. It will stay at one place.

  • @user-bk7zi1ns8h

    @user-bk7zi1ns8h

    5 ай бұрын

    ok will try, thanks@@AkashYadavUX

  • @diensilmimaulidyah7161
    @diensilmimaulidyah7161 Жыл бұрын

    hey.. can i get link figma?^^

  • @gokulrajs9515
    @gokulrajs95152 жыл бұрын

    Can you share the figma link bro.

  • @AkashYadavUX

    @AkashYadavUX

    2 жыл бұрын

    all Figma files are available on my Figma Community page: Figma.com/@yakash

  • @irfan4u521
    @irfan4u5213 жыл бұрын

    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

    @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 😇

  • @nihadabdulnazar4478
    @nihadabdulnazar447810 ай бұрын

    I can’t find this plugin in figma?

  • @dimasadi9852

    @dimasadi9852

    9 ай бұрын

    sadly the developer delete the plugin, and i still find the alternativ one. have you find one ?

  • @nihadabdulnazar4478

    @nihadabdulnazar4478

    9 ай бұрын

    @@dimasadi9852 I haven’t

  • @tochidioka6019
    @tochidioka60192 жыл бұрын

    Please I want to create map on a rectangle shape and not the whole frame… 😢

  • @AkashYadavUX

    @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.

  • @axelhunger
    @axelhungerАй бұрын

    no zoom, no interactions.

  • @user-vy4tf6og6s
    @user-vy4tf6og6s3 жыл бұрын

    ون

  • @user-fq6gl4pe7d
    @user-fq6gl4pe7d Жыл бұрын

    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