Basics of Scroll/ carousel interaction in Figma 

Glad it was helpful!

Glad you liked it!

Glad the vide was helpful Andrew✌️✌️

Glad it was helpful Helen 🤗

Glad you liked it 😇

🤩🤩🤩

You're very welcome!😇

Hey Lucia! I will surely be adding windows shortcut too on my upcoming videos. Currently I only do Mac shortcuts as I haven't used windows in a while 😬

Glad it was helpful 😇😇

thank you😇

🤩🤩🤩🤩

You're very welcome! 😊

You’re welcome 😊

Happy to help!

Hey👋 adding carousel indicators is actually best practice in order to make a carousel more obvious.I haven't shown it here in the interest of time. You can add carousel indicators to assisted/page type of scroll only not to the free scrolls. Adding scroll indicators (dots) is fairly easy, just add dots equal to the number of elements. Group them and reduce the opacity of rest expcept one in every artboard. The artboards are linked through smart animate, the indicators would work.🤘

No you can add multiple drags to a single element, Figma automatically knows which one to pick based on drag direction, You can checkout the Figma file for this here: www.figma.com/community/file/982727754440876794/High-fidelity-interactive-prototypes--Part2

@@AkashYadavUX It says I don't have permission to duplicate it :(

Glad it helped😇

😇😇😇🤗🤗

You're so welcome!

You're very welcome!

glad you liked it

Yes you can absolutely make that and that's infact a better approach. at the time of recording this video interactive variant were not available in Figma

I also need that

You can find the automatic slider video here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-6XtmjmcAtdA.html ✌️

Hmmm not sure. They did update interactions in the latest update but not sure if they did update this. Will check✌️

Hey typically the issue happens when the elements go out of the artboard, it looks like the elements are there but they actually have slipped out of the artboard. Check the left layers panel for this. Dissolve animation happens if your layers are not named exactly the same in two frames. make sure the names are exact between the elements of two frames. For more check out this source file: www.figma.com/community/file/982727754440876794

Thank you Sara😇

😇😇 glad it was helpful

My pleasure 😊

Hey Elizabeth To add a status bar in your prototypes, you can download system UI figma file from community and add the status bar component in your artboard directly. Make this element fixed from right panel by selecting "Fixed position while scrolling". Unfortunately there is no setting or anything in Figma that you switch on to have this available.

Hey Sam Just remove the text from the group containing the images, it should become static.✌️

You are so welcome!

glad it helped ☺️

🤠🤠 thank you Bart

Thank you so much😃

Thanks for being here 😇

Glad it was helpful!

I briefly explained that in this video ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-6XtmjmcAtdA.html

hehe Yeah. Actually you will be surprised to know how many people messaged me as they don't understand the meaning of overflow in terms of Figma. Hence the repetition

Hi, The smoothness of the prototypes depend on the system you are running figma on. Prototype requires decent bit of memory and having a graphic card on the laptop helps. You also need a good wifi connection as figma is cloud based.If your internet is choppy then your prototypes will not be smooth as well🤟

Hey Hector Didnt fully understand your problem but here is what you can do if you want something to not scroll. Select the element(s) and on the right panel you will an option " Fixed position while scrolling". Check this option and your elements will becomes fixed. 😇

@@AkashYadavUX ok i got it...thanks

Hi Santosh Add the elements you want to scroll inside a separate frame and add horizontal scrolling to this frame only. Make sure the artboard has no scrolling selected this will make rest of the elements on the screen fixed. Also make sure the frame you make has the same bounds as width of artboard.🤟

Hey Juan so this was a very basic video on how carousel works, hence I didn't explain advance things here. But you can add carousels at any place of a page need not to be just on top, just that you have to use separate frames and interactive variants. Check out my video here where i explained this: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-6XtmjmcAtdA.html ✌️

Glad you liked it Anwesh 🤗🤗

😊😊😊 thank you

Thank you☺️☺️

Glad it helped

You are most welcome

You can do pagination really easily just need to link number with tap interaction to other frames. Requires a little effort but easily doable.

thank you 🤠

Will do parallax soon 😇

Hey that's easy to do as well. So instead of linking the individual cards through drag, add two arrows (left and right). Now link the right arrow of first artboard to 2nd artboard, similarly add right arrow of the second artboard to third and left arrow to first. Continue it for other cards as well ( you get the gist) And instead of adding the arrows through drag use click "trigger" Check out my next video in Figma shorts series to see how can you implement cyclic carousels. Same process as above, just replace drag trigger to click with arrows. 🤗🤗

You're so welcome!

Glad it helped!😇

Hey Sandhya, Yes that's really easy to do in Figma. Just change the frame dimensions only (by clicking command+ dragging) to whatever area you want the scrolling to happen. Make sure the inside elements flow out of the the dimensions of the frame. Enable horizontal/vertical scrolling for the frame and you are done.✌️

@@AkashYadavUX thank you! I'll give it a go.

glad it helped

😇😇 Thanks Saurav

😇

You can do the "Simple horizontal scroll" ones in one frame. But the page/assisted scroll is done through drag, you will need as many artboards as the number of scroll elements 😇

Hey Sasha You can join the group here: discord.gg/KrXd7kCa

@@AkashYadavUX Thank you!

Hey Erez You can assign multiple action to one element as long as they are not conflicting in nature (Actions where Figma is not able to apprehend what are you trying to execute). For example if one action is "click to move to a different artboard" and the other option is " scroll on the same page". Figma will give you the error in this case, as one action is taking you to other page while one is scrolling on the same page and both are linked to same element. Two drags is simple, in the example I have shown one action is dragging right and the other option is dragging left. So Figma automatically figures out what you wanna do based on the interaction in real time. You can also do click to move to another artboard and drag as well on the same element. As long as they are not conflicting. From the "+" icon you can add multiple interactions :) check the source file here for more clarity : www.figma.com/@yakash

🤩🤩🤩🤩 thank you Mons

😇😇

Hi Aizhan You can check out my other video here : ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-oE0v0wfX2AQ.html I have explained button carousels here. Also now you can simply add interactive variants instead of adding whole frame.check out the video,that should help :)

My pleasure 😇

checkout this tutorial ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-oE0v0wfX2AQ.html

You need to build this using click. Create three artboards and place your frames in it. with different central image with back and next buttons. Connect screens to each other with the back and next buttons. First artboard to 2nd using next button, 2nd artboard to 1st using back. 2nd to 3rd using next and so on. In case you want ti build endless scroll you can check out this video 🙂 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-K97aa24WlKo.html

@@AkashYadavUX is figma used to directly make a website or is it just a designing tool that later coders use to refer and code up the webstie

Hey Puneeth, No, Figma is just used by designer to design the screens and handover to devs for specs. Coding has to be done separately by devs.

Hey! I am sharing the master file for this and of all the interactions on my channel tomorrow (post 1k subs). I will post the link in the community post section. FYI: There is also a part-1 of Figma source file (if you haven't checked it already). Find it here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-TSXyYt4o0Zg.html

@@AkashYadavUX thank you so so much! Very appreciated!

Hey Dama! To make things overflow, select all the images and then club them together in a frame using the command OPT+CMD+G. Now hold the CMD key on your keyboard and select the frame, resize the bounds of the frame only to make it smaller. The images will still be inside the frame (check the layers panel or toggle clip content), while your frame is now smaller size. And in this way your actual images now overflow the main frame that they are in.😇 Check out the source files for this to understand more. They are here: www.figma.com/community/file/982727754440876794/High-fidelity-interactive-prototypes--Part2