Horizontal and Vertical Scroll in Figma - Quick Prototyping Tutorial

แชร์
ฝัง
  • เผยแพร่เมื่อ 18 มิ.ย. 2023
  • Hello and welcome to our channel. In this quick step-by-step tutorial, we are going to show you how to prototype horizontal and vertical scrolls in Figma.
    Enjoyed this tutorial? Learn more about UX/UI Design through our comprehensive UX/UI Design Mastery Course. It's a one-course you'll need to kickstart your UX/UI design career, packed with in-depth lessons, practical hands-on exercises, and invaluable tips straight from industry professionals.
    Transform your passion into expertise and master UX/UI Design:
    www.uxpeak.com/
    Feel free to join our community
    Instagram - / uxpeak_
    Twitter - / uxpeak_
    Linkedin - / uxpeak
    #Figma #UXDesign #FigmaTutorial #uidesign #ui #prototyping #horizontalscroll

ความคิดเห็น • 77

  • @SimonaTselova
    @SimonaTselova หลายเดือนก่อน +2

    THANK YOU. I spent hours trying to do this and your tutorial saved me 😭

  • @macacones
    @macacones 8 หลายเดือนก่อน

    Great tutorial! Thank you very much!

  • @user-kq2is8tl5j
    @user-kq2is8tl5j ปีที่แล้ว +5

    Love the peace and tone of the voice, it just keeps me interested in the video. Thanks for the tutorial by the way

    • @uxpeak
      @uxpeak  ปีที่แล้ว

      Glad you enjoyed the tutorial! Thanks for your kind feedback. Stay tuned for more content like this.

  • @jojoleboss44
    @jojoleboss44 4 หลายเดือนก่อน +1

    You save me, thank you so much !

  • @mercyoladipupo573
    @mercyoladipupo573 3 หลายเดือนก่อน +4

    One of the best tutorials on TH-cam so far. The instructor is amazing and calm.

    • @GuptaSangam
      @GuptaSangam 5 วันที่ผ่านมา

      AI is always calm, haha!

  • @vincentdg3499
    @vincentdg3499 10 หลายเดือนก่อน

    So easy, Thank you!

  • @kazeemoluwatobilobasimeon5984
    @kazeemoluwatobilobasimeon5984 5 หลายเดือนก่อน

    Thank you for the video!

  • @niluseneviratne3709
    @niluseneviratne3709 2 หลายเดือนก่อน

    great video. quick and easy to understand and it actually works! thanks

  • @savedbygrace.slowedreverb
    @savedbygrace.slowedreverb 5 หลายเดือนก่อน

    Wow! Cool, thanks.

  • @cncmachinistaartist2160
    @cncmachinistaartist2160 9 หลายเดือนก่อน +1

    THANK YOU!!!

  • @Gobothechairman
    @Gobothechairman 4 หลายเดือนก่อน

    Thank you!

  • @nurmanah247
    @nurmanah247 6 หลายเดือนก่อน

    Thank you very much for the tutorial, it is very useful 👌

  • @mr.protienewing8343
    @mr.protienewing8343 4 หลายเดือนก่อน

    thanks bro i was actually stuck with it
    it worked haha

  • @natalialeitura5389
    @natalialeitura5389 3 หลายเดือนก่อน

    Obrigada MUITO OBRIGADA !!!! Tava quebrando a cabeça pra descobrir como fazer

  • @ziyaandrn5986
    @ziyaandrn5986 10 วันที่ผ่านมา

    Hello! I love the work you do. I want to ask a question, how can I make a high-quality screen recording of the prototype I designed like in this video ?

  • @gehadmagdyelkhouly96
    @gehadmagdyelkhouly96 19 วันที่ผ่านมา

    very helpful thanks

  • @KushEdits99
    @KushEdits99 3 หลายเดือนก่อน

    Very Helpful

  • @souravshah2938
    @souravshah2938 5 หลายเดือนก่อน

    Thank you sir for your helpful video..

  • @user-qd4bg7lj8o
    @user-qd4bg7lj8o 22 วันที่ผ่านมา +1

    The best tutorial. Thank you!

    • @uxpeak
      @uxpeak  20 วันที่ผ่านมา

      Very happy to hear that :)

  • @ashrafloubani3174
    @ashrafloubani3174 5 หลายเดือนก่อน

    thank you😄

  • @esu_uxui_designer
    @esu_uxui_designer ปีที่แล้ว +1

    Wow..very slow tutorial...like this type tutorial..and more videos about figma prototype videos please upload your channel..we are support your channel😮❤❤🎉🎉🎉

  • @thebestreveal
    @thebestreveal ปีที่แล้ว

    Love it!

    • @uxpeak
      @uxpeak  ปีที่แล้ว

      Thank you!

  • @Montford_
    @Montford_ 3 หลายเดือนก่อน

    Thanks mame!

  • @aryheic
    @aryheic 3 หลายเดือนก่อน

    Loved the video. Helped me a bunch!

    • @RedFunJester
      @RedFunJester 3 หลายเดือนก่อน

      i what way f*ck how &

  • @menaammar289
    @menaammar289 6 หลายเดือนก่อน +1

    Great toturial thank you❤

    • @uxpeak
      @uxpeak  6 หลายเดือนก่อน

      Thank you for your kind words! :) We're delighted to hear that you like this tutorial.

  • @najwanaura7171
    @najwanaura7171 6 หลายเดือนก่อน

    very easy to follow! Thankss

  • @saradia9263
    @saradia9263 6 หลายเดือนก่อน

    Very helpful :'))

  • @esu_uxui_designer
    @esu_uxui_designer ปีที่แล้ว

    I want daily more prototype videos in figma...pls upload

  • @dominikd6772
    @dominikd6772 ปีที่แล้ว +2

    This is amazing 🎉

    • @uxpeak
      @uxpeak  ปีที่แล้ว

      Oh, that's nice, thank you for your comment

  • @user-zq3oo2wl2p
    @user-zq3oo2wl2p 6 หลายเดือนก่อน +1

    You mentioned at the top hello Nina! How does it change when a user types some other name?

  • @MariaSerralha
    @MariaSerralha 2 วันที่ผ่านมา

    obrigada!

  • @cherryc0smos1
    @cherryc0smos1 9 หลายเดือนก่อน

    Thanks

  • @miroslavak.3666
    @miroslavak.3666 ปีที่แล้ว +1

    Awesome tutorial

    • @uxpeak
      @uxpeak  ปีที่แล้ว

      We are very happy to hear that you like it :)

  • @lunapro8003
    @lunapro8003 ปีที่แล้ว +1

    Great tutorial

    • @uxpeak
      @uxpeak  ปีที่แล้ว

      We really appreciate your feedback :) Super happy to hear that.

  • @karenpires4532
    @karenpires4532 5 หลายเดือนก่อน +2

    the overflow option doesn't appear to me when I select what I want to move, only when I select the entire frame (and I don't want to move the entire frame, just a specific category). can someone help me? :(

  • @deborahodinga8739
    @deborahodinga8739 ปีที่แล้ว +1

    Thank you

    • @uxpeak
      @uxpeak  ปีที่แล้ว

  • @andrealiptakova9168
    @andrealiptakova9168 ปีที่แล้ว

    Very cool video 😊

    • @uxpeak
      @uxpeak  ปีที่แล้ว

      Thank you. Glad you enjoyed it.🙂

  • @dominikd6772
    @dominikd6772 ปีที่แล้ว +1

    Great video

    • @uxpeak
      @uxpeak  ปีที่แล้ว

      Thank you :)

  • @user-cy5pq7qf7n
    @user-cy5pq7qf7n 4 หลายเดือนก่อน +1

    What should be the interaction for horizental scroll? I've followed the steps but its not showing there

  • @envyvb0535
    @envyvb0535 ปีที่แล้ว +2

    Nice tutorial, thanks!💫

    • @uxpeak
      @uxpeak  ปีที่แล้ว +1

      Thank you for watching :)

  •  หลายเดือนก่อน +1

    How do I make it scroll further than the content? It’s not showing me all the content. Cause the menu bar covers it.

    • @Official_mohamedfayez
      @Official_mohamedfayez หลายเดือนก่อน

      Set the bottom of the frame at the top of the bottombar, not the top. This should solve the problem I was having too.

  • @StrangeSupreme2045
    @StrangeSupreme2045 11 หลายเดือนก่อน

    How to make prototyping navigation appear when scrolling in figma??

  • @metternich05
    @metternich05 11 หลายเดือนก่อน +24

    Do you really have to add the intro music with 5x volume? It's youtube 101 you normalize levels before publishing. Not just throw in the first stock audio you find in the junkyard.

    • @BellsDev
      @BellsDev 4 หลายเดือนก่อน

      Show what you have got... Nothing

    • @mech1317
      @mech1317 25 วันที่ผ่านมา

      Hahahaha

  • @IAm-ui6bq
    @IAm-ui6bq 9 หลายเดือนก่อน

    time saver stg

  • @richardappow6770
    @richardappow6770 7 หลายเดือนก่อน

    can we get source file and the assets used?

  • @kwombat5306
    @kwombat5306 8 หลายเดือนก่อน +2

    command key doesnt work

  • @olaleyesylvester9148
    @olaleyesylvester9148 2 หลายเดือนก่อน

    Pls can I get this figma file link?

  • @JonaSaxify
    @JonaSaxify 16 วันที่ผ่านมา

    Mine didn't scroll all the way down. Does anyone know why?

  • @mdgolamrabby156
    @mdgolamrabby156 6 หลายเดือนก่อน

    if you haven't any problem you can share your file for your online students in the video description thanks

  • @mat.0565
    @mat.0565 หลายเดือนก่อน

    chef mate asap

  • @IraHamdan-xs8mv
    @IraHamdan-xs8mv หลายเดือนก่อน

    can i know the key for windows?anyone can help me on this?

  • @candace200
    @candace200 5 หลายเดือนก่อน

    Should have mentioned the padding within the horizontal scroll. Its a minimal requirement.

  • @pinayhazelvlog
    @pinayhazelvlog 9 หลายเดือนก่อน

    Hello. Why i can't do a vertical mode from scroll behavior for my prototype? It showed an exclamation mark and I don't have a fix position when scrolling. Please help me. Thanks.

    • @karenpires4532
      @karenpires4532 5 หลายเดือนก่อน

      the exclamation mark appears when you have no elements outside the screen spacing. To move vertically, you have to make sure there are elements that extend beyond the size of the frame. I hope this helps.

  • @plutouzi2740
    @plutouzi2740 ปีที่แล้ว +1

    Is there a File for this?

    • @uxpeak
      @uxpeak  ปีที่แล้ว

      Thank you for watching :) No, we didn't include the source file for this one but our other videos usually have one.

  • @ভোমরা
    @ভোমরা ปีที่แล้ว +1

    Plz design website

    • @uxpeak
      @uxpeak  ปีที่แล้ว

      Hello! In our most recent video, we demonstrate how to create a 3D animated carousel for a website hero section using Figma.

  • @Wenaartgr
    @Wenaartgr หลายเดือนก่อน

    Idk what is command key and I'm on windows

  • @drakata27
    @drakata27 3 หลายเดือนก่อน

    intro not loud enough