Horizontal Scroll Snap | Advanced Figma Prototyping

hey hey welcome my name is Jones and today I'm gonna show you how to make this horizontal scroll snap effect into your figma prototype and the cool thing about is is that you don't have to I mean it doesn't matter where you have scrolled the page or the feet it will still work as you can see so without further ado let's get started so here we are in figma and here I have some just a generic application which would say news feed that has elements vertically and horizontally and on the right I have the prototype running and currently it does not have any horizontal scrolling as you can see so the easiest way to get a horizontal scroll is to just go into the containing frame that contains your items as you can see here so select a frame and then go into the prototype tab and choose horizontal scrolling and immediately you will be able to scroll but it won't have the snapping effect as you can see but if this basic scrolling is enough for you this is all you need to do to enable that but here we we are here for the snapping effect so in order to do that you have to do the following so I'm just gonna write the flow items like so and let's go into the latest carousel that's what I'm calling this this thing here and we need to create a frame inside here which is going to be just a like a trigger zone for the a touch event so you're gonna create the frame here and we're not going to create it on top of this because otherwise you will include these items automatically inside the frame and we do know we don't want anything in the frame we just want it empty in here so let's move it but really it's just moving here so it's inside the latest carousel element and then let's okay No you know we know it's right okay so I'm just gonna scale it to be these sides of the cars here and remove the background color and then I'm going to name it something like why oh I can't see my keyboard here just a sec swipe next area like so and then I'm going to duplicate it like so and we bring all this swipe previous it oops No [Music] Oh's area thank you so now that we have these two created we can move on and duplicate the whole frame like so and then we want to go into the items here and we want to shift them into the next light state but it's going to be snapping basically like so and let's see if it's much in the spring and morton's yeah it is flexo and then we're just gonna repeat this part for all the remaining hearts basically the next one here you know here and actually just here and then shifted over to the next one and here you probably don't want me to do this before your feet like content is final because now that you are duplicating each each time now if you have to do changes to the feet you have to do it in into each one of these so you want to make sure that the feed is finalized before you start doing this like advanced prototyping and probably go with just the horizontal scrolling oh I still have that enabled also disable the horizontal scroll effects from the container frame because that is going to up otherwise or even though dinner no scrolling sorry about this I'm going to just speed just a little bit for you you remember to deserve this before you start doing the duplication okay now way back to normal and I still need to shift this so items move it over like so like so and then I believe this is the last one items you know like this it's reading the mornings yes now I'm gonna go in here select the swipe next area and go to the prototype tab and then connect it to the next one and then instead of selecting in the interaction panel in instead of contact we will choose on rack and then the animation will be push and we will push it to the left like so and this is the important part you have to enable the smart animate matching layers because otherwise it's not going to work so [Music] actually the first step should be working now let's say if I drag yeah it's more so now we just have to repeat it repeat it to all the other ones so let's go here and select the next swipe next drag it here and it should be should have all the same settings automatically because it remembers the previous applied transition now just go the next on the next prime and then just quickly repeat this process until even at the end and then here in the last one now we want to do the same but for the previous it's what previous area so we the way connected to the previous screen obviously and instead of on top it's on rack and the direction is going to be right so this and enable the small animation Oh smart animated feature now we just have to put them for the remaining previous swipe areas all of this [Music] okay so I'm done here I I didn't notice that these also had in their next swipe area had also their own tab interaction still enabled so I just quickly swap stars but we should be done here let's see let's go into the prototype and swipe one two three four and white okay cool and the other way one two three four okay cool so it's working and it was really simple to setup and it really elevates your prototypes in a way that like it actually feels like a real real application and you see this effect in like a lot of high-end apps so now you can bring that feature into your prototypes directly and that's it we're done here it really is a simple process to get this awesome effect into your finger prototypes and I will be leaving this project link in the description so you're going to go check out all the details on your own from there and I hope you really learned something useful from this tutorial and if you like this content please leave a like below and if you don't want to miss any future tutorials please subscribe and also leave your feedback in their comments below but for now goodbye and see you next time [Music]

Channel: Full Stack Designer

Views: 11,312

Keywords: figma, tutorial, horizontal scroll, prototype, ui desing, ux desing, ixd, app design

Id: ZUHTVRiiVb0

Length: 9min 51sec (591 seconds)

Published: Sun Apr 26 2020