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
I'm glad I found your page
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!
loved it
great tutorial! I just started learning Figma and this video really did help me! Thanks a lot :)
You're very welcome!
love ❤
Great work, thank you for your effort.
Many thanks!
hii i need help
how to place this flow in main landing page
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?
İnstead of desktop I used components, yet my text didn't rolled as landscape shifting to portrait
is it possible to create a component out of this and paste it in the middle of a website page on figma?
Great brother ❤
Thanks ✌️
This is amazing 🤩 👏🏼
Thank you!
How to export this into wordpress site pls help
Thanksss
Welcome
❤
i did it but when i insert it with another its not working
Wow
Thank you!
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.
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.
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.
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
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.
Bro instead of this background music can you use voice (Yours /AI).It would be really helpfull
how you move the landscape text? i can't do it
You can use arrow keys to move elements.
Bisakah kirimian file untuk referensi saya
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!
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
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 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
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.
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
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
how did you do a snap story?
It's just a logo
@@pixxelex well thank you
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
my first 2 slides are not working rest is working. Donno why?
Please check the prototype settings once again or restart the prototype.
how to move left all image
Hold Shift and use arrow keys to move any element
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 ?