Create ADVANCED Image Slider Animation In Figma | Figma Tutorial
Вставка
- Опубліковано 29 вер 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
no written captions or voice for the directions?
Great work! But I wish it was a explained through words instead of using music. It's much earlier to understand.
Thanks for your feedback!
I have kept the same settings while prototyping, but the effect is not working for some reason. Can you help me out ?
Please check the tutorial once again. It should work.
Who's is here and is actually a Framer User ?
Maan u will test to make this awesome tutorial directly in framer
Sure, will try to do in Framer
@@pixxelex Hi buddy when I insert this into my website frame it doesn't work. I mean the effects, but it works outside the design frame
how to convert this prototype into a website with any platform, anybody know???
You can build it using code or no-code tools like Framer/Webflow to transform it into a website.
love ❤
Bro how can i contact you for your works
You can contact me via email.
You will find my email address on my channel.
how to move left all image
Hold Shift and use arrow keys to move any element
Thank you sooooo much for the tutorial! I’m a Figma noob and could follow so easily you literally saved my UX assignment
Glad it helped!
LMAOO!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
If you have this problem :
The slide of images doesn't work as expected, try this :
turn on clip content for the frame (make sure it's the case)
If it still doesn't work, select all the images => right click => delete auto layout. It should work
I spent more than 2 hours to find out about this :)
Bro instead of this background music can you use voice (Yours /AI).It would be really helpfull
how to download after the slider animation is finished
Thank youuuuuu amazing tutorial am exist a second part ? for add the funtionality to the buttons of stories contests and login?
Sure, will try to make a video on that
Which plugin you used for images ?
Plugin: Lummi
hii i need help
how to place this flow in main landing page
Did you got the answer
İnstead of desktop I used components, yet my text didn't rolled as landscape shifting to portrait
Yeah i too faced this problem so instead of u alter the texts
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
Those are just pre-made texts I created earlier to save time😅I just copy and paste them into this frame.
Ok, but how to export all this?
Unfortunately, we can't export it
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?
I have the same issue here! Any chance you could share the fix? Thanks so much 🙏
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
You can use keyboard shortcuts: (Ctrl + C) to copy and (Ctrl + V) to paste.
You can also press CTRL/CMD + D to do the same :)
great tutorial! I just started learning Figma and this video really did help me! Thanks a lot :)
You're very welcome!
Hi, is there any chance to embed this carousel in a bigger figma page? thank you
You need to create a component set with those Frames and then add component 1 to the bigger page.
@@federicamastrolonardo1633 grazie!
how you move the landscape text? i can't do it
You can use arrow keys to move elements.
In 6:28 how you select the whole frame and change landscape to potrait that doesn't work for me
Just select the contents inside the frame and move them up
did u get the solution if can u plz tell me
@@pixxelex no sir it was not happening like that plz tell with voice so we can actually understand what ur trying to do
How to export this into wordpress site pls help
Up
how did you do a snap story?
It's just a logo
@@pixxelex well thank you
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
Make sure to turn on the Clip content of the frame. Check at 5:16
how you scroll a text "Landscape" to "Portrait" ? its too difficult to understand this thing can you please help me ?
Just use arrow keys to move anything in the frame
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
Learn about the Figma constraints.
Bro...how to move up and down elements in a frame
You can use arrow keys to move elements in a frame.
But.....images are only sliding front images are not hiding while using arrow keys
Make sure to turn on the Clip content of the frame containing images.
Do not use any autolayout in the first frame
is it possible to create a component out of this and paste it in the middle of a website page on figma?
HI
Guys this tutorial dont funtion to me because i add my images or i dont now aaam can you help me please?
Make sure to understand the process beforehand, as it should work with any images.
@@pixxelex AM guys I managed to get it working in the end, it turns out that in the Microsoft version there is 1 step that changed its location so it was just a matter of searching, thanks
i did it but when i insert it with another its not working
how to move clip content?
pls can you explain what you did with the ruler ,i am trying to shift the image slider but it is not disappearing.
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.
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
Make sure to turn on the Clip content of the frame containing images.
@@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.
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.
@@ResonateForceDo not use any autolayout in the first frame
@@ResonateForce please if you found a solution tell me, i'm stuck
my first 2 slides are not working rest is working. Donno why?
Please check the prototype settings once again or restart the prototype.
mine doesn't loop, how to fix it? I followed your tutorial very well
Please ensure that the last frame is linked to the first frame with an "instant" animation
Thanks for the video how can I record my screen the way you showed it from the beginning please.
You can use "OBS Studio" for the screen recording
@@pixxelex Thanks so much
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 ! 🤞
Yes, sure.
Let's connect: rohanrhn.work@gmail.com
@@pixxelex
Emailed please check & reply positive 🤞
@@pixxelex
Emailed information waiting for your reply!
R u Marathi ?
it works on the page where i created it how can i make it work when i move it to my design file
have any answer?
@@mohamedhoussamboutaleb5438 Yeah select all the frames and then create a component set, name the component set carousels, then go assets, search for carousels and insert it into your design frame it works that way!
Bisakah kirimian file untuk referensi saya
Love It!
How should I add this in my website as section while scroling?
You can do it using code or no-code tools such as Framer or Webflow
@@pixxelex ok
you're the best!!! Thank you :)
Glad my videos are helping you ❤
I'm glad I found your page
Bro can you work for startups?
Yeah!
@@pixxelex how can i contact you
This is so awesome!
Thank you!
Great work, thank you for your effort.
Many thanks!
loved it
❤
Great brother ❤
Thanks ✌️
Thanksss
Welcome
This is amazing 🤩 👏🏼
Thank you!