No video

Create ADVANCED Image Slider Animation In Figma | Figma Tutorial

  Рет қаралды 71,423

Pixxelex

Pixxelex

3 ай бұрын

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

Пікірлер: 91
@gaolin4846
@gaolin4846 3 ай бұрын
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 3 ай бұрын
Glad it helped!
@chiedozienebeolisa
@chiedozienebeolisa 3 ай бұрын
I'm glad I found your page
@MythicLegendsUniverse
@MythicLegendsUniverse 26 күн бұрын
great tutorial! I just started learning Figma and this video really did help me! Thanks a lot :)
@pixxelex
@pixxelex 23 күн бұрын
You're very welcome!
@williamcopelandiv
@williamcopelandiv 20 күн бұрын
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?
@JosephineChung-g7g
@JosephineChung-g7g 4 күн бұрын
you're the best!!! Thank you :)
@pixxelex
@pixxelex 2 күн бұрын
Glad my videos are helping you ❤
@Gomorrah_TV
@Gomorrah_TV 2 ай бұрын
Great work, thank you for your effort.
@pixxelex
@pixxelex 2 ай бұрын
Many thanks!
@sapnabisht1969
@sapnabisht1969 15 күн бұрын
Great work! But I wish it was a explained through words instead of using music. It's much earlier to understand.
@pixxelex
@pixxelex 14 күн бұрын
Thanks for your feedback!
@musicalmotivation3762
@musicalmotivation3762 Ай бұрын
Bro instead of this background music can you use voice (Yours /AI).It would be really helpfull
@sheikab28
@sheikab28 3 ай бұрын
Great brother ❤
@pixxelex
@pixxelex 3 ай бұрын
Thanks ✌️
@KkrishLalchandani
@KkrishLalchandani 2 ай бұрын
loved it
@poojamirchonia1876
@poojamirchonia1876 2 ай бұрын
hii i need help how to place this flow in main landing page
@akinbooluwakemisola4046
@akinbooluwakemisola4046 3 ай бұрын
This is amazing 🤩 👏🏼
@pixxelex
@pixxelex 3 ай бұрын
Thank you!
@muteahmdv
@muteahmdv 2 ай бұрын
İnstead of desktop I used components, yet my text didn't rolled as landscape shifting to portrait
@Teenage_Boi
@Teenage_Boi 14 күн бұрын
Yeah i too faced this problem so instead of u alter the texts
@pragyanshvardhan3029
@pragyanshvardhan3029 3 күн бұрын
I have kept the same settings while prototyping, but the effect is not working for some reason. Can you help me out ?
@pixxelex
@pixxelex 2 күн бұрын
Please check the tutorial once again. It should work.
@alessandrobalzano6177
@alessandrobalzano6177 17 күн бұрын
Hi, is there any chance to embed this carousel in a bigger figma page? thank you
@federicamastrolonardo1633
@federicamastrolonardo1633 17 күн бұрын
You need to create a component set with those Frames and then add component 1 to the bigger page.
@alessandrobalzano6177
@alessandrobalzano6177 16 күн бұрын
@@federicamastrolonardo1633 grazie!
@Travellandmore
@Travellandmore 3 ай бұрын
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.
@steviesmith5161
@steviesmith5161 8 күн бұрын
no written captions or voice for the directions?
@samielkaddach8816
@samielkaddach8816 2 ай бұрын
is it possible to create a component out of this and paste it in the middle of a website page on figma?
@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.
@ToluwanimiVictoria
@ToluwanimiVictoria 2 ай бұрын
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 2 ай бұрын
You can use keyboard shortcuts: (Ctrl + C) to copy and (Ctrl + V) to paste.
@InfiniteLoop-i7f
@InfiniteLoop-i7f 7 күн бұрын
Iam trying to move the image to the left but 1st image is not hiding Ive followed every step from this video 6:39 Please someone help
@pixxelex
@pixxelex 7 күн бұрын
Make sure to turn on the Clip content of the frame. Check at 5:16
@08Balaji.S.K
@08Balaji.S.K 3 ай бұрын
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
@aryangoswami08
@aryangoswami08 2 ай бұрын
love ❤
@wajihamajeed7817
@wajihamajeed7817 Ай бұрын
how you scroll a text "Landscape" to "Portrait" ? its too difficult to understand this thing can you please help me ?
@pixxelex
@pixxelex 29 күн бұрын
Just use arrow keys to move anything in the frame
@eleven.12-e8n
@eleven.12-e8n Ай бұрын
how did you do a snap story?
@pixxelex
@pixxelex Ай бұрын
It's just a logo
@eleven.12-e8n
@eleven.12-e8n Ай бұрын
@@pixxelex well thank you
@ABVenkatesh
@ABVenkatesh 2 ай бұрын
Bro...how to move up and down elements in a frame
@pixxelex
@pixxelex 2 ай бұрын
You can use arrow keys to move elements in a frame.
@ABVenkatesh
@ABVenkatesh 2 ай бұрын
But.....images are only sliding front images are not hiding while using arrow keys
@pixxelex
@pixxelex 2 ай бұрын
Make sure to turn on the Clip content of the frame containing images.
@shrutidas391
@shrutidas391 2 ай бұрын
Do not use any autolayout in the first frame
@Designbychiamaka
@Designbychiamaka 3 ай бұрын
Thanks for the video how can I record my screen the way you showed it from the beginning please.
@pixxelex
@pixxelex 3 ай бұрын
You can use "OBS Studio" for the screen recording
@Designbychiamaka
@Designbychiamaka 3 ай бұрын
@@pixxelex Thanks so much
@wildania.b532
@wildania.b532 2 ай бұрын
how you move the landscape text? i can't do it
@pixxelex
@pixxelex 2 ай бұрын
You can use arrow keys to move elements.
@mma-pe5ft
@mma-pe5ft 2 ай бұрын
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 2 ай бұрын
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.
@jovenanthony7229
@jovenanthony7229 25 күн бұрын
i did it but when i insert it with another its not working
@StoryJokes.
@StoryJokes. 2 ай бұрын
how to convert this prototype into a website with any platform, anybody know???
@pixxelex
@pixxelex 2 ай бұрын
You can build it using code or no-code tools like Framer/Webflow to transform it into a website.
@Designlearners99
@Designlearners99 Ай бұрын
Wow
@pixxelex
@pixxelex Ай бұрын
Thank you!
@ResonateForce
@ResonateForce 2 ай бұрын
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 ай бұрын
​@@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 2 ай бұрын
​@@ResonateForceDo not use any autolayout in the first frame
@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
@srinithya3560
@srinithya3560 24 күн бұрын
How should I add this in my website as section while scroling?
@pixxelex
@pixxelex 23 күн бұрын
You can do it using code or no-code tools such as Framer or Webflow
@srinithya3560
@srinithya3560 11 күн бұрын
@@pixxelex ok
@ElnaraMammadova-zn3mk
@ElnaraMammadova-zn3mk 3 ай бұрын
Thanksss
@pixxelex
@pixxelex 3 ай бұрын
Welcome
@FloralWhispers-nw3qm
@FloralWhispers-nw3qm Ай бұрын
How to export this into wordpress site pls help
@lenovok4note298
@lenovok4note298 Күн бұрын
Bro can you work for startups?
@pixxelex
@pixxelex 18 сағат бұрын
Yeah!
@lenovok4note298
@lenovok4note298 18 сағат бұрын
@@pixxelex how can i contact you
@suryajayarajan42
@suryajayarajan42 Ай бұрын
my first 2 slides are not working rest is working. Donno why?
@pixxelex
@pixxelex Ай бұрын
Please check the prototype settings once again or restart the prototype.
@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 ай бұрын
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 ?
@JagadeeshPenupothu
@JagadeeshPenupothu 3 ай бұрын
@jorneycastillo-cw6cj
@jorneycastillo-cw6cj Ай бұрын
how to move left all image
@pixxelex
@pixxelex Ай бұрын
Hold Shift and use arrow keys to move any element
@farhanhidayat6721
@farhanhidayat6721 3 ай бұрын
Bisakah kirimian file untuk referensi saya
@lenovok4note298
@lenovok4note298 18 сағат бұрын
Bro how can i contact you for your works
@pixxelex
@pixxelex 8 сағат бұрын
You can contact me via email. You will find my email address on my channel.
Survive 100 Days In Nuclear Bunker, Win $500,000
32:21
MrBeast
Рет қаралды 153 МЛН
Jumping off balcony pulls her tooth! 🫣🦷
01:00
Justin Flom
Рет қаралды 35 МЛН
Figma Tutorial: Fruit Swipe Animation/Prototyping Tutorial
8:45
Discover design with Muhammad
Рет қаралды 2,4 М.
Create PARALLAX SCROLL EFFECT In Figma | Figma Tutorial
10:56
Nike Spinning Animation in Figma
35:09
Shmelt studios
Рет қаралды 114 М.
Reduce Prototypes by 50% (Simple trick) | Figma Tutorial
5:41
Create an Interactive WEB SLIDER in Figma
20:22
Mavi Design
Рет қаралды 145 М.
Splash Screen Animation in 6 Minutes (Figma Tutorial)
6:52
Tim Gabe
Рет қаралды 146 М.
From Figma to a 3D Web Page with Dora Plugin - No code Tutorial
12:16
Crazy 3D Rotation Effect Using CSS Only
7:40
Lun Dev
Рет қаралды 85 М.
Survive 100 Days In Nuclear Bunker, Win $500,000
32:21
MrBeast
Рет қаралды 153 МЛН