Create ADVANCED Image Slider Animation In Figma | Figma Tutorial

Подписаться 13 тыс.

Просмотров 106 тыс.

50% 1

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

Опубликовано:

5 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 122

@gaolin4846 5 месяцев назад

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

@pixxelex 5 месяцев назад

Glad it helped!

@graphiccarolina 12 дней назад

LMAOO!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

@mohamedhoussamboutaleb5438 18 дней назад

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 :)

@Thao-z7c 2 месяца назад

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

@pixxelex 2 месяца назад

You're very welcome!

@steviesmith5161 Месяц назад

no written captions or voice for the directions?

@shimata2431 День назад

If you want to use this in a bigger frame, what worked for me was making this whole thing a component and placing it there!

@gabrielaragao3439 10 часов назад

can u send me the link of what u done?

@williamcopelandiv 2 месяца назад

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?

@steinmartahh Месяц назад

I have the same issue here! Any chance you could share the fix? Thanks so much 🙏

@chiedozienebeolisa 5 месяцев назад

I'm glad I found your page

@HaiLe-zt9cc 2 дня назад

thank you so much ^^

@gabrielaragao3439 10 часов назад

man can u send me it ready?

@musicalmotivation3762 3 месяца назад

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

@pongalelalupa9328 25 дней назад

Thank youuuuuu amazing tutorial am exist a second part ? for add the funtionality to the buttons of stories contests and login?

@pixxelex 25 дней назад

Sure, will try to make a video on that

@seymorebizz7950 28 дней назад

This is so awesome!

@pixxelex 27 дней назад

Thank you!

@rukhsarahmed651 2 часа назад

How can I achieve a loop effect in Figma without duplicating frames? Everything works smoothly until I transition from the last frame back to the first. When I click to return to the first frame, it goes backward instead of looping. How can I fix this?

@JosephineChung-g7g Месяц назад

you're the best!!! Thank you :)

@pixxelex Месяц назад

Glad my videos are helping you ❤

@dee4laymoo Месяц назад

Love It!

@Gomorrah_TV 3 месяца назад

Great work, thank you for your effort.

@pixxelex 3 месяца назад

Many thanks!

@sapnabisht1969 2 месяца назад

Great work! But I wish it was a explained through words instead of using music. It's much earlier to understand.

@pixxelex 2 месяца назад

Thanks for your feedback!

@muteahmdv 4 месяца назад

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

@Teenage_Boi 2 месяца назад

Yeah i too faced this problem so instead of u alter the texts

@FloNocode 24 дня назад

Who's is here and is actually a Framer User ? Maan u will test to make this awesome tutorial directly in framer

@pixxelex 23 дня назад

Sure, will try to do in Framer

@thestranger8528 22 дня назад

@@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

@akinbooluwakemisola4046 5 месяцев назад

This is amazing 🤩 👏🏼

@pixxelex 5 месяцев назад

Thank you!

@poojamirchonia1876 4 месяца назад

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

@RamyaBhatt-h5s Месяц назад

Did you got the answer

@KkrishLalchandani 4 месяца назад

loved it

@ToluwanimiVictoria 3 месяца назад

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 3 месяца назад

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

@inderjanakarajan9389 20 дней назад

You can also press CTRL/CMD + D to do the same :)

@sheikab28 5 месяцев назад

Great brother ❤

@pixxelex 5 месяцев назад

Thanks ✌️

@Travellandmore 5 месяцев назад

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 5 месяцев назад

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

@RokiMANABU 17 дней назад

how to download after the slider animation is finished

@chaccoromi 3 месяца назад

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 3 месяца назад

Learn about the Figma constraints.

@samielkaddach8816 3 месяца назад

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

@alessandrobalzano6177 2 месяца назад

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

@federicamastrolonardo1633 2 месяца назад

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

@alessandrobalzano6177 2 месяца назад

@@federicamastrolonardo1633 grazie!

@aryangoswami08 3 месяца назад

love ❤

@pragyanshvardhan3029 Месяц назад

I have kept the same settings while prototyping, but the effect is not working for some reason. Can you help me out ?

@pixxelex Месяц назад

Please check the tutorial once again. It should work.

@wildania.b532 3 месяца назад

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

@pixxelex 3 месяца назад

You can use arrow keys to move elements.

@jovenanthony7229 2 месяца назад

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

@wajihamajeed7817 2 месяца назад

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

@pixxelex 2 месяца назад

Just use arrow keys to move anything in the frame

@MahnoorMahnoormalik-s9q 15 дней назад

Which plugin you used for images ?

@pixxelex 11 дней назад

Plugin: Lummi

@eleven.12-e8n 3 месяца назад

how did you do a snap story?

@pixxelex 3 месяца назад

It's just a logo

@eleven.12-e8n 3 месяца назад

@@pixxelex well thank you

@krishajuliannacelestial4566 4 месяца назад

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

@pixxelex 4 месяца назад

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

@ABVenkatesh 4 месяца назад

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

@pixxelex 4 месяца назад

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

@ABVenkatesh 4 месяца назад

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

@pixxelex 4 месяца назад

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

@shrutidas391 4 месяца назад

Do not use any autolayout in the first frame

@mma-pe5ft 4 месяца назад

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

@pixxelex 4 месяца назад

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.

@08Balaji.S.K 5 месяцев назад

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

@pixxelex 5 месяцев назад

Just select the contents inside the frame and move them up

@ResonateForce 4 месяца назад

did u get the solution if can u plz tell me

@ResonateForce 4 месяца назад

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

@FloralWhispers-nw3qm 3 месяца назад

How to export this into wordpress site pls help

@Victor-do8xt 9 дней назад

@StoryJokes. 4 месяца назад

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

@pixxelex 4 месяца назад

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

@ElnaraMammadova-zn3mk 5 месяцев назад

Thanksss

@pixxelex 5 месяцев назад

Welcome

@Designbychiamaka 4 месяца назад

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

@pixxelex 4 месяца назад

You can use "OBS Studio" for the screen recording

@Designbychiamaka 4 месяца назад

@@pixxelex Thanks so much

@InfiniteLoop-i7f Месяц назад

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 Месяц назад

Make sure to turn on the Clip content of the frame. Check at 5:16

@allnewfeatureswithtech Месяц назад

how to move clip content?

@thestranger8528 24 дня назад

it works on the page where i created it how can i make it work when i move it to my design file

@mohamedhoussamboutaleb5438 18 дней назад

have any answer?

@thestranger8528 18 дней назад

@@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!

@srinithya3560 2 месяца назад

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

@pixxelex 2 месяца назад

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

@srinithya3560 2 месяца назад

@@pixxelex ok

@mannolo2871 Месяц назад

HI Guys this tutorial dont funtion to me because i add my images or i dont now aaam can you help me please?

@pixxelex Месяц назад

Make sure to understand the process beforehand, as it should work with any images.

@mannolo2871 Месяц назад

@@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

@ResonateForce 4 месяца назад

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 4 месяца назад

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

@ResonateForce 4 месяца назад

@@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 4 месяца назад

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 4 месяца назад

@@ResonateForceDo not use any autolayout in the first frame