No video

Prototyping auto panning map interaction of Google map/ AirBnb | Figma

Source Files: Dropping the source files of all the recent interaction in a day, so make sure to subscribe to my channel and hit the bell notification. Source file link will be posted in the community tab 😇
Learn details of the scroll to interaction here: • Prototyping Anchor Lin...
Learn about Google map interaction here: • Designing Google Maps ...
-------------------------------------------------------------------------------------------------------------
Join our mentorship program here 👉 www.upglance.com/
☕️ Buy me a coffee here: www.buymeacoffee.com/akashdesign
👩‍💻 Join our Discord Group for design discussions: / discord

Пікірлер: 33

  • @stationmontroyal
    @stationmontroyal2 жыл бұрын

    aaaayyooo😩🤞🏻🤞🏻🤞🏻 this vid was all i needed to create my own map/// you explain very well!!

  • @karenngo2687
    @karenngo26872 жыл бұрын

    Help please- In my design I have cards instead of buttons that link to targets on the map. I was wondering how to set up vertical scroll in my bottom sheet element so users can scroll down to read the various cards? I selected all the cards and made a frame selection and enabled vertical scroll in that frame selection but it seems like the pan of the map interferes. There are two frames but I guess because the map frame is behind the bottom sheet/pull up panel it affects it. I tried experimenting by reducing the size of the map frame to not overlap with the bottom sheet, but it still didn't scroll the cards in the bottom sheet.

  • @sauravsharma2617
    @sauravsharma26173 жыл бұрын

    Amazing tutorial sir something different to learn thank you

  • @AkashYadavUX

    @AkashYadavUX

    3 жыл бұрын

    Thanks a lot 🤠

  • @pranayagarwal954
    @pranayagarwal9543 жыл бұрын

    Learned so many things!

  • @AkashYadavUX

    @AkashYadavUX

    3 жыл бұрын

    😇😇

  • @vasumanchauhan
    @vasumanchauhan3 жыл бұрын

    Finally! The most awaited 🙏

  • @AkashYadavUX

    @AkashYadavUX

    3 жыл бұрын

    🤠🤠🤠 hope you like it 😇

  • @vasumanchauhan

    @vasumanchauhan

    3 жыл бұрын

    @@AkashYadavUX ofcourse 😄 Akash just a small request. Can you please make a separate video on using constraints for responsive design??

  • @AkashYadavUX

    @AkashYadavUX

    3 жыл бұрын

    Hey! So i will cover responsive design soon :)

  • @RobertoGonzalez-bz8si
    @RobertoGonzalez-bz8si7 ай бұрын

    How do I fix the UI interface in place? I am having issues with the interface moving with the map

  • @sterlingsimpson-johnson5096
    @sterlingsimpson-johnson50963 жыл бұрын

    Is there a way to make horizontal scrolling so that the end of the frames do not 'bounce' once they have been reached? If you scroll all the way to the left or to the right, the end icons bounce before returning to their stationary position.

  • @AkashYadavUX

    @AkashYadavUX

    3 жыл бұрын

    umm no Actually.. that's a standard default behaviour which figma has added to mimic the iOS behaviour. Slight bounce will be there always when you scroll to extreme.

  • @ALLNALLProductions
    @ALLNALLProductions3 жыл бұрын

    Perfect

  • @AkashYadavUX

    @AkashYadavUX

    3 жыл бұрын

    😇

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

    Can you talk about text box animation?

  • @shyam4479
    @shyam44793 жыл бұрын

    Hello sir! I'm Srirenganath, I have been following your works, your contents are very educative for beginners like me, a big thank you🙏 for that sir. I tried the map interaction you have taught in this video using Figma, it came out well🎉. But sir, I'm facing an issue creating it using adobe xd. After all the processes like placing the pins on the map and creating components, the issue is that the buttons in "nearby card(bottom card)" cannot break into the scroll group of the map while prototyping, since the "scroll to" dropdown shows only the "scroll group as a whole" and not the components in it. so when I click a button in the nearby card(bottom card with the neighbourhood buttons" the scroll to positions the map, based on scroll groups not based on pins. But when the map and pins are not in scroll groups they are shown in the drop-down of "scroll to" but if I put them in the scroll group after prototyping they again link back to the whole map and not to the pins in the map. I have searched many sources sir but didn't get the required information, please help with this sir🙏. A video on this if possible would be more useful sir.

  • @AkashYadavUX

    @AkashYadavUX

    3 жыл бұрын

    Hi Shyam, this is unfortunately a limitation with XD for thr scroll to interaction. I will see if there is a workaround for this. Will update 🤘

  • @shyam4479

    @shyam4479

    3 жыл бұрын

    @@AkashYadavUX Thank you sir👍.

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

    Hello Akash. Thank you for the tutorial. I just have a small issue with this prototype. I'm not able to scroll the location buttons but instead the map behind moves. Is there a way to solve this issue?

  • @AkashYadavUX

    @AkashYadavUX

    Жыл бұрын

    hey Club both map and location pins into one frame and then add horizontal & vertical scroll to this frame.

  • @borisdelgadomoran633
    @borisdelgadomoran6332 жыл бұрын

    Save my life bro, 😍

  • @rashankr9277
    @rashankr92773 жыл бұрын

    i have a doubt in protype sir. in this comment section unable to attach a exported jpg. issue is when i am turning a screen to protype mode and play.it looks like scattered can u please provide any socialmedia id

  • @AkashYadavUX

    @AkashYadavUX

    3 жыл бұрын

    Hey Rashank, my socials are on my channel, but currently not super active on them. However i am releasing all the source file tomorrow, so keep a watch 😇🤗

  • @romanmir8443
    @romanmir84433 жыл бұрын

    Can you make a video on layout grids on Android and iOS

  • @AkashYadavUX

    @AkashYadavUX

    3 жыл бұрын

    Will do in upcoming videos

  • @playpiano2264
    @playpiano22643 жыл бұрын

    Challenge accepted 💯

  • @AkashYadavUX

    @AkashYadavUX

    3 жыл бұрын

    🤓

  • @sunilkumar-uf1bi
    @sunilkumar-uf1bi3 жыл бұрын

    Sir make video how to used figma template or figma ui kit I can't find the tutorial of this Please make video as soon as

  • @AkashYadavUX

    @AkashYadavUX

    3 жыл бұрын

    hey Sunil, Didnt get you? Can you explain again?

  • @sunilkumar-uf1bi

    @sunilkumar-uf1bi

    3 жыл бұрын

    @@AkashYadavUX sir I don't know how to used ui template or ui kit( like about where we can find it or used) can you please make video on this topic! Also I an question that what is relation between the illustrator or Photoshop with figma ( how can we use all three)

  • @AkashYadavUX

    @AkashYadavUX

    3 жыл бұрын

    sure, will mske a short video 🤘

  • @sterlingsimpson-johnson5096

    @sterlingsimpson-johnson5096

    3 жыл бұрын

    @@sunilkumar-uf1bi you can go to figma community. After you search 'UI kit' and find what you want, click on the result, then click duplicate. This will open another figma window. From there you can just copy and paste the figma materials (UI kit) into your own figma projects: www.figma.com/community/explore