Create ADVANCED Image Slider Animation In Figma | Figma Tutorial

แชร์
ฝัง
  • เผยแพร่เมื่อ 23 เม.ย. 2024
  • In this video, I tried to show you how to create an advanced image carousel animation using Figma. If you found this video useful, don't forget to like, comment, and share this video.
    Check Out Previous Videos
    Card Swiping Animation: • Create Card SWIPE Anim...
    Parallax Scrolling Animation: • Create Full Website Wi...
    Endless Auto-Scroll Text Animation: • Create ENDLESS Auto Sc...
    UI Design Challenges: • Daily UI Design Challe...
    UI Design Resouces: • UI Design Resources
    Figma Animation Tutorial Playlist: • Playlist

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

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

    I'm glad I found your page

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

    Thank you sooooo much for the tutorial! I’m a Figma noob and could follow so easily you literally saved my UX assignment

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

      Glad it helped!

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

    loved it

  • @MythicLegendsUniverse
    @MythicLegendsUniverse 11 วันที่ผ่านมา

    great tutorial! I just started learning Figma and this video really did help me! Thanks a lot :)

    • @pixxelex
      @pixxelex  7 วันที่ผ่านมา

      You're very welcome!

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

    love ❤

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

    Great work, thank you for your effort.

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

      Many thanks!

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

    hii i need help
    how to place this flow in main landing page

  • @williamcopelandiv
    @williamcopelandiv 4 วันที่ผ่านมา

    EDIT: Figured it out!
    Thanks for the tutorial! Quick quedstion, I am trying to use this within a bigger frame on a landing page. When I move it in and prototype it on page, when I get to the section everything goes away except the image slider. How do I go about keeping it on a full page view while keeping the image slider functional?

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

    İnstead of desktop I used components, yet my text didn't rolled as landscape shifting to portrait

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

    is it possible to create a component out of this and paste it in the middle of a website page on figma?

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

    Great brother ❤

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

      Thanks ✌️

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

    This is amazing 🤩 👏🏼

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

      Thank you!

  • @FloralWhispers-nw3qm
    @FloralWhispers-nw3qm หลายเดือนก่อน

    How to export this into wordpress site pls help

  • @ElnaraMammadova-zn3mk
    @ElnaraMammadova-zn3mk 3 หลายเดือนก่อน

    Thanksss

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

      Welcome

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

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

    i did it but when i insert it with another its not working

  • @Designlearners99
    @Designlearners99 21 วันที่ผ่านมา

    Wow

    • @pixxelex
      @pixxelex  21 วันที่ผ่านมา

      Thank you!

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

    hello, I want to ask. maybe this is a little off topic. I am very new to UI UX design and at that time I was designing for my college assignment. I was really confused when I wanted to expand the page, the icon that I had placed well actually shifted. Can you explain how I solve it, or is the icon part added after all the designs are ready? Hopefully this question can be answered

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

      Learn about the Figma constraints.

  • @mma-pe5ft
    @mma-pe5ft หลายเดือนก่อน

    pls can you explain what you did with the ruler ,i am trying to shift the image slider but it is not disappearing.

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

      I added the ruler for reference.
      To hide the images, ensure the Clip content option is enabled for the frame containing the images. Please check at 6:42.

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

    hi, Just came across your video and trying to duplicate what you did here. but I'm stuck how you duplicate 3 more of rectangle 1

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

      You can use keyboard shortcuts: (Ctrl + C) to copy and (Ctrl + V) to paste.

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

    Thanks for the video how can I record my screen the way you showed it from the beginning please.

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

      You can use "OBS Studio" for the screen recording

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

      @@pixxelex Thanks so much

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

    Heyy can help me how you add the snap story,discover,stories, option from the video 5:31 minutes.
    And how you create frame 5,4,&2
    Everything I am complet but stuck in 5:31 how you add these can you Plzz explain me.
    Bhai 5:31 second ru au bujhi hauni thk explain kro ki frame 5,4,2 kemte create krilo au text guda kemte kn create krilo

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

      Those are just pre-made texts I created earlier to save time😅I just copy and paste them into this frame.

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

    Bro instead of this background music can you use voice (Yours /AI).It would be really helpfull

  • @wildania.b532
    @wildania.b532 หลายเดือนก่อน +1

    how you move the landscape text? i can't do it

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

      You can use arrow keys to move elements.

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

    Bisakah kirimian file untuk referensi saya

  • @alessandrobalzano6177
    @alessandrobalzano6177 2 วันที่ผ่านมา +1

    Hi, is there any chance to embed this carousel in a bigger figma page? thank you

    • @federicamastrolonardo1633
      @federicamastrolonardo1633 2 วันที่ผ่านมา +1

      You need to create a component set with those Frames and then add component 1 to the bigger page.

    • @alessandrobalzano6177
      @alessandrobalzano6177 20 ชั่วโมงที่ผ่านมา

      @@federicamastrolonardo1633 grazie!

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

    mine doesn't loop, how to fix it? I followed your tutorial very well

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

      Please ensure that the last frame is linked to the first frame with an "instant" animation

  • @08Balaji.S.K
    @08Balaji.S.K 3 หลายเดือนก่อน +1

    In 6:28 how you select the whole frame and change landscape to potrait that doesn't work for me

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

      Just select the contents inside the frame and move them up

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

      did u get the solution if can u plz tell me

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

      ​@@pixxelex no sir it was not happening like that plz tell with voice so we can actually understand what ur trying to do

  • @srinithya3560
    @srinithya3560 8 วันที่ผ่านมา

    How should I add this in my website as section while scroling?

    • @pixxelex
      @pixxelex  7 วันที่ผ่านมา

      You can do it using code or no-code tools such as Framer or Webflow

  • @StoryJokes.
    @StoryJokes. 2 หลายเดือนก่อน +1

    how to convert this prototype into a website with any platform, anybody know???

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

      You can build it using code or no-code tools like Framer/Webflow to transform it into a website.

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

    in 6:42 when u slide the images two right the image in the first got disapear but when i tried to do it it doesn't how to do it plz help

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

      Make sure to turn on the Clip content of the frame containing images.

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

      ​@@pixxelexyes I did it still it wasn't happening the first nature image when u moved to the left it got disappeared but when I tried to move to left it was moving over the text of portraits can u help plz.

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

      Turn on the Clip content of the frame containing images ( not the main frame) and It should work. Please once again check the video properly.

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

      ​@@ResonateForceDo not use any autolayout in the first frame

  • @wajihamajeed7817
    @wajihamajeed7817 17 วันที่ผ่านมา

    how you scroll a text "Landscape" to "Portrait" ? its too difficult to understand this thing can you please help me ?

    • @pixxelex
      @pixxelex  13 วันที่ผ่านมา

      Just use arrow keys to move anything in the frame

  • @eleven.12-e8n
    @eleven.12-e8n หลายเดือนก่อน +1

    how did you do a snap story?

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

      It's just a logo

    • @eleven.12-e8n
      @eleven.12-e8n หลายเดือนก่อน +1

      @@pixxelex well thank you

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

    Bro...how to move up and down elements in a frame

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

      You can use arrow keys to move elements in a frame.

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

      But.....images are only sliding front images are not hiding while using arrow keys

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

      Make sure to turn on the Clip content of the frame containing images.

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

      Do not use any autolayout in the first frame

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

    my first 2 slides are not working rest is working. Donno why?

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

      Please check the prototype settings once again or restart the prototype.

  • @jorneycastillo-cw6cj
    @jorneycastillo-cw6cj หลายเดือนก่อน

    how to move left all image

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

      Hold Shift and use arrow keys to move any element

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

    Hello Sir,
    I'm big fan of your design can you design my travel website? It's my new startup?
    I'm waiting for your positive reply ! 🤞

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

      Yes, sure.
      Let's connect: rohanrhn.work@gmail.com

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

      @@pixxelex
      Emailed please check & reply positive 🤞

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

      @@pixxelex
      Emailed information waiting for your reply!
      R u Marathi ?