I want to teach you about overflow behavior, so this is pretty cool if you want to, like, incorporate
some horizontal or horizontal and vertical scrolling and I'm going to teach you how to do that really
quickly.
Now, overfull behavior essentially controls how your users interact with content.
Den's beyond a device's dimensions or within the frames dimensions.
I mean, you can use this to replicate scrolling down on like the page of content, as well as more
advanced like interactions like scrolling left or right to switch between elements in a slider.
You know, you can panner scroll around an interactive map.
It's really awesome.
You can apply the overall flow behavior just to the frame.
So I'll show what that looks like.
I have a frame over here and there's an overflow behavior which is really easy to use.
Now, let's start with just vertical scrolling.
So what I have here is just a long homepage.
This is obviously going to be way too long for our actual device.
I fixed the bottom navigation bar.
You'll notice it over here.
And it's actually reflected in the bar over here in the side.
And we're just going to see what that looks like.
So you don't necessarily need to apply an overflow behavior to everything.
I mean, this is just going to scroll just fine and you'll notice that that's an easy way to make a
like a sticky nav or like a sticky search bar if you want it.
Now, let's see if we combine something like this into a frame and then we shrink that frame and we
clip the content.
Now, all of a sudden, like we can't see that contain maybe we would want to scroll based off of that
content.
OK, yeah, there we go.
Maybe you just want to see just a snippet of this clip it snip and clip it.
That rhymes with a prototype and we're going to do vertical scrolling.
So let's see what happens so you can scroll within this frame as well as scrolling over here.
I don't recommend doing this for something like this, but I mean, gets the point across pretty easily.
Right.
OK, so we're going to just reverse what we did there.
Another way to do it is to actually scroll horizontally.
And this is super easy, we just need to ensure that this frame is with an.
And we need to clip the content.
Here we can clip it right there.
Perfect.
There we go now, users can easily, like, swipe through.
We could even just, like, touch this up just a smidge if we go to our products inside this frame,
so we have like three, we can adjust the constraints.
So that way they don't.
To move while we touch this frame.
Perfect.
And so when we do SWIP, it's going to go off the device.
Whoa, that's super cool.
So, I mean, we can refine this some more, but you can tell that we can just easily simulate that
sliding and scrolling without necessarily going to a new page.
So super awesome if you want to do something like that.
Now, if you do want to do here, let's duplicate this frame.
We'll keep that there.
Let's just go back, actually.
OK, let's duplicate this frame.
We'll keep that one is our original and what we're going to do is we're actually going to remove all
this.
Remove this.
And we're going to create like a massive.
Actually, not here, I will show you how to do this, let's create a frame.
And we're going to go to our plug ins, I have a great plug in over here called Natsuko, so I'm going
to open it up.
And you can just kind of set like any position you want.
Five hundred by five hundred.
So it's definitely big.
We're going to create a frame for that and we're going to shrink the frame in.
And we're going to clip the content.
And we're going to move that over here, so we have San Francisco, beautiful San Francisco, and what
we're going to do is with our overflow behavior, we are going to do a horizontal and vertical scrolling.
And when we go into our prototype, oh, it's not in our prototype because it's not in the frame.
So let's push that in the frame.
There we go and we go into our prototype, we can easily scroll.
Horizontally and vertically, so this is really great if you're creating an application with a map that
you want to be able to do that with or with whatever content you deem necessary so you can stick whatever
size image in here.
And this thing is it kind of has like this nice animation when you kind of drag.
So it really allows, like users to swipe through both left and right, up and down within like that
particular frame.
So go ahead, go out there and test these little things out.
I know a lot of people like to do like horizontal scrolling, especially with images like over here
and products.
I mean, this is pretty cool.
Kind of like you don't necessarily need to get into any animation in order to create, like, a pretty
awesome prototype.
So that's overflow behavior within Sigma.