Pixxelex
Pixxelex
  • 157
  • 1 440 355
Create ADVANCED Image Slider Animation Using Figma | Figma Tutorial
In this video, I tried to show you how to create an advanced image slider animation using Figma. If you find this video useful, don't forget to like, comment, and share this video.
Check Out Previous Videos
Create Accordion Card: ua-cam.com/video/7gQ8XsmubsU/v-deo.html
Endless Scrolling Text: ua-cam.com/video/QYkdzTGy7uc/v-deo.html
Animated SignUp Page: ua-cam.com/video/nnC-ZGB_Rzo/v-deo.html
UI Design Challenges: ua-cam.com/play/PLBblYKb7F1vr3b_N8ZuagaJDAaq1zWrfa.html&si=vYKY0eAWmHI9H4kn
UI Design Resouces: ua-cam.com/play/PLBblYKb7F1vpVughMvteE5FP4PSot0sq7.html
Figma Animation Tutorial Playlist: ua-cam.com/play/PLBblYKb7F1vpEIYsbTdzTUO3EbMkWOWuc.html
Переглядів: 1 818

Відео

Create ADVANCED Image Slider Animation In Figma | Figma Tutorial
Переглядів 3,1 тис.Місяць тому
In this video, I tried to show you how to create an advanced image slider animation using Figma. If you found this video useful, make sure to like, comment, and share this video. Check Out Previous Videos Full Website UI/UX Design: ua-cam.com/video/b5sYBmFI2RE/v-deo.html Endless Curved Carousel: ua-cam.com/video/yk2DflmxmXI/v-deo.html Up/Down Slider Animation: ua-cam.com/video/5cCe3fM6sPc/v-deo...
Create 4 EASY Interactive Button Animations In Figma | Figma Tutorial
Переглядів 4 тис.Місяць тому
In this video, I tried to show you how to create easy interactive button animations like a pro using Figma. If you found this video useful, don't forget to like, comment, and share this video. Check Out Previous Videos Interactive Star Rating: ua-cam.com/video/c7vN6m7MWW4/v-deo.html Advanced Image Slider: ua-cam.com/video/D2FZkt7EXnw/v-deo.html Endless Spinning Carousel: ua-cam.com/video/An9IqP...
Create ADVANCED Image Slider Animation In Figma | Figma Tutorial
Переглядів 3 тис.2 місяці тому
In this video, I tried to show you how to create a unique image slider animation using Figma. If you found this video useful, don't forget to like, comment, and share this video. Check Out Previous Videos Advanced Image Slider: ua-cam.com/video/TrApblISEJw/v-deo.html Full Page Scroll Animation: ua-cam.com/video/c6YL6-dsLCE/v-deo.html Revealing Scroll Animation: ua-cam.com/video/Dbvxfq3X47k/v-de...
MOTIFF: Speed Up Your UI Design 10x Using This AI Tool
Переглядів 2,3 тис.2 місяці тому
Discover Motiff, a powerful UI design tool with AI features like UI generation, AI Reduplication, and AI Magic Box to speed up your design process. I have explained about them in this video. If you found this video helpful, don’t forget to like, comment, and share the video. Try Motiff: motiff.com/ Check Out Previous Videos Advanced Image Slider: ua-cam.com/video/D2FZkt7EXnw/v-deo.html Parallax...
Create ADVANCED Image Slider Animation In Figma | Figma Tutorial (With Voice)
Переглядів 7 тис.3 місяці тому
In this video, I tried to explain how to create an advanced image carousel animation using Figma. If you found this video useful, don't forget to like, comment, and share the video. Check Out Previous Videos Interactive Feedback Animation: ua-cam.com/video/c7vN6m7MWW4/v-deo.html Revealing Scroll Animation: ua-cam.com/video/Dbvxfq3X47k/v-deo.html Portfolio UI/UX Design: ua-cam.com/video/b5sYBmFI...
Create AMAZING Interactive Button Animation Using Figma | Figma Tutorial
Переглядів 2,2 тис.3 місяці тому
In this video, I tried to show you how to create an interactive button hover animation using Figma. If you found this video useful, don't forget to like, comment, and share this video. Check Out Previous Videos Horizontal Parallax Animation: ua-cam.com/video/385PVKUUN5Q/v-deo.html Revealing Scroll Animation: ua-cam.com/video/Dbvxfq3X47k/v-deo.html Sticky Scrolling Animation: ua-cam.com/video/QS...
Create Interactive Star Rating Animation In Figma | Figma Tutorial
Переглядів 3,3 тис.4 місяці тому
In this video, I tried to show you how to create an interactive star rating animation. If you found this video helpful, don't forget to like, comment, and share this video. Check Out Previous Videos Parallax Slider Animation: ua-cam.com/video/_W4oVbPxq5U/v-deo.html Up/ Down Slider Animation: ua-cam.com/video/5cCe3fM6sPc/v-deo.html Refracted Glass Effect Animation: ua-cam.com/video/80IxygJl8Cc/v...
How to Create Full Page Website Scroll Animation In Figma | Figma Tutorial
Переглядів 23 тис.4 місяці тому
In this video, I tried to show you how to create a full-page website scrolling animation using Figma. If you found this video useful, don't forget to like, comment, and share this video. 🔴Portfolio UI Design (Part-1): ua-cam.com/video/b5sYBmFI2RE/v-deo.html Check Out Previous Videos Parallax Image Slider: ua-cam.com/video/_W4oVbPxq5U/v-deo.html Modern Landing Page UI Design: ua-cam.com/video/Fc...
Create Full Website UI/UX DESIGN From Scratch In Figma | Figma Tutorial
Переглядів 14 тис.4 місяці тому
In this video, I tried to show you how to create a personal portfolio website UI design from scratch in Figma. If you found this video useful, don't forget to like, comment, and share this video. Portfolio Web Animation (Part 2) - ua-cam.com/video/c6YL6-dsLCE/v-deo.html Check Out Previous Videos Curved Carousel Animation: ua-cam.com/video/yk2DflmxmXI/v-deo.html Travel Website UI Design: ua-cam....
Create PARALLAX IMAGE SLIDER Animation Using Figma | FIgma Tutorial
Переглядів 16 тис.5 місяців тому
In this video, we will learn how to create a unique parallax image slider animation using Figma. If you found this video helpful, please remember to like, comment, and share. Check Out Previous Videos Interactive Video Hover: ua-cam.com/video/r2Ff76AGrtc/v-deo.html Advanced Card Animation: ua-cam.com/video/-CallQaRgYk/v-deo.html Advanced Image Slider: ua-cam.com/video/cPSU3CbH5qE/v-deo.html UI ...
Create AMAZING Interactive Button Animation Using Figma | Figma Tutorial
Переглядів 13 тис.5 місяців тому
In this video, I tried to show you how to create an interactive button hover animation using Figma. If you found this video useful, don't forget to like, comment, and share this video. Check Out Previous Videos Auto Scrolling Text: ua-cam.com/video/QYkdzTGy7uc/v-deo.html Bouncing Ball Animation: ua-cam.com/video/3m0NHZz7ncI/v-deo.html Floating Button Animation: ua-cam.com/video/Aa5QVUHX5J4/v-de...
Create HORIZONTAL PARALLAX EFFECT Animation In Figma | Figma Tutorial
Переглядів 7 тис.5 місяців тому
In this video, I tried to show you how to create a horizontal parallax animation using Figma. If you found this video useful, don't forget to like, comment, and share this video. Check Out Previous Videos Advanced Image Slider: ua-cam.com/video/D2FZkt7EXnw/v-deo.html Endless Card Carousel: ua-cam.com/video/P5qEU73IPr8/v-deo.html Sticky Sidebar On Scroll: ua-cam.com/video/4kTjNGrl9yM/v-deo.html ...
Create INTERACTIVE Video Hover Animation In Figma | Figma Tutorial
Переглядів 6 тис.5 місяців тому
In this video, I tried to show you how to create an interactive video hover animation using Figma. If you found this video useful, don't forget to like, comment, and share this video. Check Out Previous Videos Modern Slider Animation: ua-cam.com/video/cPSU3CbH5qE/v-deo.html Card Swiping Animation: ua-cam.com/video/G2Ri1aV6ky8/v-deo.html Sticky Sidebar On Scrolling: ua-cam.com/video/4kTjNGrl9yM/...
Create ADVANCED Image Slider Animation In Figma | Figma Tutorial
Переглядів 7 тис.5 місяців тому
In this video, I tried to show you how to create an advanced image slider animation, which is likely a swipe animation using Figma. If you found this video useful, don't forget to like, comment, and share this video. Check Out Previous Videos Interactive Hover Animation: ua-cam.com/video/nk7Bw38qoZw/v-deo.html Endless Spinning Animation: ua-cam.com/video/An9IqPnqu2c/v-deo.html Refracted Glass E...
How To Create CURVED Carousel With Endless Auto Scrolling In Figma | Figma Tutorial
Переглядів 7 тис.5 місяців тому
How To Create CURVED Carousel With Endless Auto Scrolling In Figma | Figma Tutorial
Create ADVANCED Image SLIDER Animation In Figma | Figma Tutorial
Переглядів 6 тис.6 місяців тому
Create ADVANCED Image SLIDER Animation In Figma | Figma Tutorial
Create ADVANCED Image Slider Animation In Figma | Figma Tutorial
Переглядів 8 тис.6 місяців тому
Create ADVANCED Image Slider Animation In Figma | Figma Tutorial
Create Image Slider Animation In Figma | Figma Tutorial
Переглядів 7 тис.6 місяців тому
Create Image Slider Animation In Figma | Figma Tutorial
Create ENDLESS CARD CAROUSEL Animation In Figma | Figma Tutorial
Переглядів 5 тис.6 місяців тому
Create ENDLESS CARD CAROUSEL Animation In Figma | Figma Tutorial
Create INTERACTIVE Card Hover Animation Using Figma | Figma Tutorial
Переглядів 28 тис.7 місяців тому
Create INTERACTIVE Card Hover Animation Using Figma | Figma Tutorial
Create ADVANCED Card Animation In Figma | Figma Tutorial
Переглядів 7 тис.7 місяців тому
Create ADVANCED Card Animation In Figma | Figma Tutorial
Create ADVANCED Image Slider Animation In Figma | Figma Tutorial
Переглядів 146 тис.7 місяців тому
Create ADVANCED Image Slider Animation In Figma | Figma Tutorial
Create UP/DOWN Image Slider Animation In Figma | Figma Tutorial
Переглядів 18 тис.8 місяців тому
Create UP/DOWN Image Slider Animation In Figma | Figma Tutorial
Create PARALLAX CARD Animation In Figma | Figma Tutorial
Переглядів 10 тис.8 місяців тому
Create PARALLAX CARD Animation In Figma | Figma Tutorial
Create MODERN Landing Page UI Design In Figma | Figma Tutorial
Переглядів 24 тис.8 місяців тому
Create MODERN Landing Page UI Design In Figma | Figma Tutorial
Create REVEALING SCROLL Animation In Figma | Figma Tutorial
Переглядів 9 тис.8 місяців тому
Create REVEALING SCROLL Animation In Figma | Figma Tutorial
Create Cool HOVER ANIMATION In Figma | Figma Tutorial
Переглядів 3,1 тис.8 місяців тому
Create Cool HOVER ANIMATION In Figma | Figma Tutorial
Create Unique CARD HOVER Animation In Figma | Figma Tutorial
Переглядів 12 тис.8 місяців тому
Create Unique CARD HOVER Animation In Figma | Figma Tutorial
Create ACCORDION Card Animation In Figma | Figma Tutorial
Переглядів 10 тис.8 місяців тому
Create ACCORDION Card Animation In Figma | Figma Tutorial

КОМЕНТАРІ

  • @vartika4708
    @vartika4708 4 години тому

    There is no option for flow starting point to add on my screen..please help sir

  • @sanderzulkarnain5714
    @sanderzulkarnain5714 День тому

    hey! this is a really entertaining content. But I wonder how to make those navigation bar work nicely with the pages. Like when you tap on it, you will automatically scrolled to the page.

    • @pixxelex
      @pixxelex 19 годин тому

      Yeah, we can do that in Figma itself. Will try to cover this in the upcoming video

  • @SorathiyaDiya
    @SorathiyaDiya 3 дні тому

    hey can you plz tell me in detail about what you did at 6:42 sec

    • @pixxelex
      @pixxelex 2 дні тому

      Move all the images to the left until the first image is hidden (make sure to enable the clip content of the image-containing-frame ) and increase the size of the second image.

  • @blackgalleon7450
    @blackgalleon7450 7 днів тому

    If you dont know how to seperate images in the picture, you dont need to watch it. He is starting with all images which is neccesary and not giving informations about it.

  • @edenkefale7129
    @edenkefale7129 8 днів тому

    Thank you!

  • @muskansaini03
    @muskansaini03 10 днів тому

    Please make 3d website tutorial in figma

    • @pixxelex
      @pixxelex 2 дні тому

      Sure will make a tutorial on this

  • @nidamirza9801
    @nidamirza9801 10 днів тому

    Bro I cannot select the second frame on drag, it just doesn't happen

  • @abbas__00
    @abbas__00 11 днів тому

    where did you find illustration ?

    • @pixxelex
      @pixxelex 10 днів тому

      Check description

  • @hardikshilu6343
    @hardikshilu6343 11 днів тому

    Nice 👍👍 thank you so much 👍👍

  • @andynonimuss6298
    @andynonimuss6298 12 днів тому

    The whole key is On-Drag and Smart Animate.

  • @kickassets6414
    @kickassets6414 13 днів тому

    On point tutorial without all the extra fluff. Instant subscriber

  • @SandipKumar-og6xm
    @SandipKumar-og6xm 13 днів тому

    bro please also add some figma links for better practice and one more thing you are amazing

  • @umairbutt-t6o
    @umairbutt-t6o 14 днів тому

    amazing

  • @Debz_Graphics
    @Debz_Graphics 14 днів тому

    Instead of the noise, why don't you just explain. Mtcheww!

  • @levisworld5241
    @levisworld5241 14 днів тому

    hi, so i recreated this perfectly thanks to you but the only issue is that my portraits frame is just appearing in instead of transitioning in. pls helpppp

    • @pixxelex
      @pixxelex 14 днів тому

      Please check both the 1st and 2nd frames to ensure that all the names of the portrait images match. If they do not, rename all the portrait images in the first three frames so that their names are consistent across these frames.

    • @levisworld5241
      @levisworld5241 3 дні тому

      @ thank you!

  • @rin.san12
    @rin.san12 14 днів тому

    Thank you very much!

    • @pixxelex
      @pixxelex 14 днів тому

      You're welcome!

  • @rajendramirji3731
    @rajendramirji3731 15 днів тому

    You're doing a great job, mate! The animation is clean, engaging, and easy to follow. I’d suggest incorporating tips and tricks for transitioning elements from outside the frame. This will make it even easier for viewers to practice alongside and enhance their learning experience. Keep it up!

    • @pixxelex
      @pixxelex 14 днів тому

      Thanks mate, will do!

  • @lastshadowman
    @lastshadowman 15 днів тому

    the only bad thing about this video is the annoying background music, otherwise its a 10.

    • @pixxelex
      @pixxelex 14 днів тому

      Thank you for your feedback

  • @corb_fy
    @corb_fy 17 днів тому

    There must be a better way to do this but I haven't found it (yet).

  • @prase_creations
    @prase_creations 17 днів тому

    Thanks bro it’s really helpful!🥹❤️

    • @pixxelex
      @pixxelex 14 днів тому

      Glad to hear that!

  • @SaminaAmir-t1l
    @SaminaAmir-t1l 18 днів тому

    Best best best best best thank you so much ❤❤❤❤

    • @pixxelex
      @pixxelex 14 днів тому

      Most welcome 😊

  • @onyxtechnologyx
    @onyxtechnologyx 19 днів тому

    this really awesome video suggestion don't speed up

    • @pixxelex
      @pixxelex 14 днів тому

      Noted. Thank you!

  • @daragarcia3302
    @daragarcia3302 20 днів тому

    Muchas gracias!

  • @arutperunjothi.m.r7261
    @arutperunjothi.m.r7261 20 днів тому

    thanks man its helped me a lot 😇

    • @pixxelex
      @pixxelex 14 днів тому

      Glad it was helpful!

  • @Thundr005
    @Thundr005 20 днів тому

    NO MOVING CHANGE DRAG TO ON CLICK IT WILL FIX !

  • @UserdVidas
    @UserdVidas 21 день тому

    It works nicely, but it scrolls quite fast for some reason do I need to put in more pictures to make it slower?

    • @pixxelex
      @pixxelex 14 днів тому

      You can try that way but unfortunately we can't make it more slower

    • @UserdVidas
      @UserdVidas 14 днів тому

      @pixxelex oh no sorry. What I meant was that your scrolling effect was nice and slow... For some reason mine is really fast even though I have around 7 pictures (+ another 7 from the copy paste).

  • @littyann4085
    @littyann4085 23 дні тому

    how to make it auto layout to adapt it to different sizes

  • @hafizaareeba1380
    @hafizaareeba1380 24 дні тому

    very useful thank you

    • @pixxelex
      @pixxelex 21 день тому

      Glad it was useful!

  • @Kloudforreal
    @Kloudforreal 25 днів тому

    Hey man, which part should I drag into my main frame?

  • @Laptopwiz
    @Laptopwiz 26 днів тому

    Thank you for the work you do. I will appreciate a voice over, to a music.

    • @pixxelex
      @pixxelex 21 день тому

      Sure! will do a voice over version for this one

  • @RaheebahAsif
    @RaheebahAsif 26 днів тому

    I'm having a problem In the second frame when you move the first image so that second image becomes the first. When I try to move the first picture it is not disappearing like in the video it overlapping the ruler

    • @pixxelex
      @pixxelex 21 день тому

      Make sure to enable the clip content of the frame which contain images.

  • @dipanshuarya1650
    @dipanshuarya1650 27 днів тому

    A big thanks to you brother.

    • @pixxelex
      @pixxelex 21 день тому

      Glad it was helpful!

  • @JamesTeachesPiano
    @JamesTeachesPiano 28 днів тому

    THANK YOU! This was the best video on how to do this🙏

    • @pixxelex
      @pixxelex 21 день тому

      Glad it helped!

  • @AmirDemiri-i4t
    @AmirDemiri-i4t Місяць тому

    Can you please make an tutorial on full animation of this web like buttons and everything till the end please❤

    • @pixxelex
      @pixxelex 29 днів тому

      I've made videos on it. From UI/UX design to animation. You can check them here 👇 Full Website Design: ua-cam.com/video/b5sYBmFI2RE/v-deo.html Full Page Animation: ua-cam.com/video/c6YL6-dsLCE/v-deo.html

  • @miican-z4d
    @miican-z4d Місяць тому

    how i can move image like you

    • @pixxelex
      @pixxelex Місяць тому

      Please watch the tutorial carefully, I have explained all the steps

  • @nikhilkumar6231
    @nikhilkumar6231 Місяць тому

    I can see the years of hard work and experience amazing work !!!!!!!!!!!!!

  • @mohamedabdimohamed6714
    @mohamedabdimohamed6714 Місяць тому

    we need source code like images

    • @pixxelex
      @pixxelex Місяць тому

      This is the only UI design, we can't convert it directly to the code.

  • @Alexis-to7lf
    @Alexis-to7lf Місяць тому

    I didn't get it at all

  • @SaimorAlam
    @SaimorAlam Місяць тому

    Awesome

  • @hafizaareeba1380
    @hafizaareeba1380 Місяць тому

    hey thanks to continue this series thank you very much please continue this series its very helpful for me

  • @HumaIshtiaqHuma
    @HumaIshtiaqHuma Місяць тому

    👏👏👏

  • @serenajuhuisuh
    @serenajuhuisuh Місяць тому

    Does it work for mobile?

  • @hafizaareeba1380
    @hafizaareeba1380 Місяць тому

    Hey i like your videos please create more animation like this and make advance animation

    • @pixxelex
      @pixxelex Місяць тому

      Sure! and Thank you for watching my videos ❤

  • @merkure1
    @merkure1 Місяць тому

    hey, thanks a lot for the video, after the 10k ms my animation stop for like 1 or 2 sec do u know why ?

    • @pixxelex
      @pixxelex Місяць тому

      Set the prototype settings as "Instant" for the last frame as shown in the tutorial

  • @izukun1701
    @izukun1701 Місяць тому

    Why i didn't find the constraint feature? Is that because i'm using the web version?

    • @pixxelex
      @pixxelex Місяць тому

      Figma has changed its UI. You will find the constraint settings under the position section

  • @utkarshkumar906
    @utkarshkumar906 Місяць тому

    PERFECT

  • @VidyaVelmurugan-u9q
    @VidyaVelmurugan-u9q Місяць тому

    how to attach this as component in a frame?

  • @alenachuyankova
    @alenachuyankova Місяць тому

    Wow!!!

  • @nicholassamson-ajai7448
    @nicholassamson-ajai7448 Місяць тому

    Nice. Pls what is the hex code for the colors you used?

    • @pixxelex
      @pixxelex Місяць тому

      Thanx, you can find the color codes from the tutorial

  • @Okkotsu_Yuta_X
    @Okkotsu_Yuta_X Місяць тому

    how did you moved the text from landscape to potraits into other duplicate one

    • @pixxelex
      @pixxelex Місяць тому

      Please watch the tutorial carefully, I have explained all the steps