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

Поділитися
Вставка
  • Опубліковано 3 гру 2024

КОМЕНТАРІ • 33

  • @stationmontroyal
    @stationmontroyal 3 роки тому

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

  • @vasumanchauhan
    @vasumanchauhan 3 роки тому

    Finally! The most awaited 🙏

    • @AkashYadavUX
      @AkashYadavUX  3 роки тому +1

      🤠🤠🤠 hope you like it 😇

    • @vasumanchauhan
      @vasumanchauhan 3 роки тому +1

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

    • @AkashYadavUX
      @AkashYadavUX  3 роки тому +1

      Hey!
      So i will cover responsive design soon :)

  • @sauravsharma2617
    @sauravsharma2617 3 роки тому

    Amazing tutorial sir something different to learn thank you

  • @karenngo2687
    @karenngo2687 2 роки тому +2

    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.

  • @RobertoGonzalez-bz8si
    @RobertoGonzalez-bz8si 11 місяців тому +1

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

  • @pranayagarwal954
    @pranayagarwal954 3 роки тому

    Learned so many things!

  • @TemitopeFanawopo-q6w
    @TemitopeFanawopo-q6w Рік тому

    Can you talk about text box animation?

  • @sterlingsimpson-johnson5096
    @sterlingsimpson-johnson5096 3 роки тому +1

    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.

  • @shyam4479
    @shyam4479 3 роки тому +1

    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 2 роки тому

    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  2 роки тому

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

  • @borisdelgadomoran633
    @borisdelgadomoran633 3 роки тому

    Save my life bro, 😍

  • @romanmir8443
    @romanmir8443 3 роки тому

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

  • @ALLNALLProductions
    @ALLNALLProductions 3 роки тому

    Perfect

  • @playpiano2264
    @playpiano2264 3 роки тому

    Challenge accepted 💯

  • @rashankr9277
    @rashankr9277 3 роки тому

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

  • @sunilkumar-uf1bi
    @sunilkumar-uf1bi 3 роки тому

    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