1
00:00:00,550 --> 00:00:05,620
I want to teach you about overflow behavior, so this is pretty cool if you want to, like, incorporate

2
00:00:05,620 --> 00:00:11,290
some horizontal or horizontal and vertical scrolling and I'm going to teach you how to do that really

3
00:00:11,290 --> 00:00:11,800
quickly.

4
00:00:12,460 --> 00:00:17,940
Now, overfull behavior essentially controls how your users interact with content.

5
00:00:18,790 --> 00:00:23,260
Den's beyond a device's dimensions or within the frames dimensions.

6
00:00:23,570 --> 00:00:27,760
I mean, you can use this to replicate scrolling down on like the page of content, as well as more

7
00:00:27,760 --> 00:00:33,220
advanced like interactions like scrolling left or right to switch between elements in a slider.

8
00:00:33,760 --> 00:00:37,210
You know, you can panner scroll around an interactive map.

9
00:00:37,540 --> 00:00:38,530
It's really awesome.

10
00:00:38,890 --> 00:00:42,160
You can apply the overall flow behavior just to the frame.

11
00:00:42,160 --> 00:00:43,380
So I'll show what that looks like.

12
00:00:43,390 --> 00:00:49,180
I have a frame over here and there's an overflow behavior which is really easy to use.

13
00:00:49,900 --> 00:00:52,400
Now, let's start with just vertical scrolling.

14
00:00:52,960 --> 00:00:55,840
So what I have here is just a long homepage.

15
00:00:55,840 --> 00:00:59,550
This is obviously going to be way too long for our actual device.

16
00:00:59,860 --> 00:01:02,200
I fixed the bottom navigation bar.

17
00:01:02,200 --> 00:01:03,550
You'll notice it over here.

18
00:01:03,550 --> 00:01:07,180
And it's actually reflected in the bar over here in the side.

19
00:01:07,690 --> 00:01:10,150
And we're just going to see what that looks like.

20
00:01:10,330 --> 00:01:13,520
So you don't necessarily need to apply an overflow behavior to everything.

21
00:01:13,540 --> 00:01:18,070
I mean, this is just going to scroll just fine and you'll notice that that's an easy way to make a

22
00:01:18,070 --> 00:01:20,970
like a sticky nav or like a sticky search bar if you want it.

23
00:01:21,580 --> 00:01:30,790
Now, let's see if we combine something like this into a frame and then we shrink that frame and we

24
00:01:30,790 --> 00:01:31,660
clip the content.

25
00:01:33,220 --> 00:01:38,380
Now, all of a sudden, like we can't see that contain maybe we would want to scroll based off of that

26
00:01:38,380 --> 00:01:38,860
content.

27
00:01:39,760 --> 00:01:42,260
OK, yeah, there we go.

28
00:01:42,280 --> 00:01:46,900
Maybe you just want to see just a snippet of this clip it snip and clip it.

29
00:01:46,900 --> 00:01:51,670
That rhymes with a prototype and we're going to do vertical scrolling.

30
00:01:51,880 --> 00:01:59,260
So let's see what happens so you can scroll within this frame as well as scrolling over here.

31
00:01:59,290 --> 00:02:04,300
I don't recommend doing this for something like this, but I mean, gets the point across pretty easily.

32
00:02:04,300 --> 00:02:04,600
Right.

33
00:02:05,830 --> 00:02:08,670
OK, so we're going to just reverse what we did there.

34
00:02:11,500 --> 00:02:14,680
Another way to do it is to actually scroll horizontally.

35
00:02:15,640 --> 00:02:23,260
And this is super easy, we just need to ensure that this frame is with an.

36
00:02:24,500 --> 00:02:27,230
And we need to clip the content.

37
00:02:28,900 --> 00:02:30,560
Here we can clip it right there.

38
00:02:31,560 --> 00:02:32,370
Perfect.

39
00:02:33,420 --> 00:02:37,230
There we go now, users can easily, like, swipe through.

40
00:02:39,470 --> 00:02:46,430
We could even just, like, touch this up just a smidge if we go to our products inside this frame,

41
00:02:46,640 --> 00:02:50,420
so we have like three, we can adjust the constraints.

42
00:02:51,810 --> 00:02:53,700
So that way they don't.

43
00:02:55,130 --> 00:02:57,290
To move while we touch this frame.

44
00:02:58,870 --> 00:02:59,720
Perfect.

45
00:03:00,070 --> 00:03:02,900
And so when we do SWIP, it's going to go off the device.

46
00:03:03,040 --> 00:03:04,650
Whoa, that's super cool.

47
00:03:04,870 --> 00:03:09,520
So, I mean, we can refine this some more, but you can tell that we can just easily simulate that

48
00:03:09,520 --> 00:03:13,170
sliding and scrolling without necessarily going to a new page.

49
00:03:13,720 --> 00:03:16,120
So super awesome if you want to do something like that.

50
00:03:17,170 --> 00:03:20,590
Now, if you do want to do here, let's duplicate this frame.

51
00:03:22,120 --> 00:03:23,230
We'll keep that there.

52
00:03:23,950 --> 00:03:25,360
Let's just go back, actually.

53
00:03:28,110 --> 00:03:30,330
OK, let's duplicate this frame.

54
00:03:31,480 --> 00:03:36,730
We'll keep that one is our original and what we're going to do is we're actually going to remove all

55
00:03:36,730 --> 00:03:37,240
this.

56
00:03:38,140 --> 00:03:39,220
Remove this.

57
00:03:41,610 --> 00:03:43,980
And we're going to create like a massive.

58
00:03:48,950 --> 00:03:54,290
Actually, not here, I will show you how to do this, let's create a frame.

59
00:03:56,320 --> 00:04:00,910
And we're going to go to our plug ins, I have a great plug in over here called Natsuko, so I'm going

60
00:04:00,910 --> 00:04:01,570
to open it up.

61
00:04:03,850 --> 00:04:06,490
And you can just kind of set like any position you want.

62
00:04:06,580 --> 00:04:08,040
Five hundred by five hundred.

63
00:04:08,050 --> 00:04:09,490
So it's definitely big.

64
00:04:10,030 --> 00:04:15,550
We're going to create a frame for that and we're going to shrink the frame in.

65
00:04:17,860 --> 00:04:19,090
And we're going to clip the content.

66
00:04:21,360 --> 00:04:26,850
And we're going to move that over here, so we have San Francisco, beautiful San Francisco, and what

67
00:04:26,850 --> 00:04:31,440
we're going to do is with our overflow behavior, we are going to do a horizontal and vertical scrolling.

68
00:04:31,440 --> 00:04:36,630
And when we go into our prototype, oh, it's not in our prototype because it's not in the frame.

69
00:04:36,630 --> 00:04:38,480
So let's push that in the frame.

70
00:04:41,030 --> 00:04:45,650
There we go and we go into our prototype, we can easily scroll.

71
00:04:48,990 --> 00:04:53,790
Horizontally and vertically, so this is really great if you're creating an application with a map that

72
00:04:53,790 --> 00:04:59,070
you want to be able to do that with or with whatever content you deem necessary so you can stick whatever

73
00:04:59,070 --> 00:05:00,180
size image in here.

74
00:05:01,210 --> 00:05:05,260
And this thing is it kind of has like this nice animation when you kind of drag.

75
00:05:05,890 --> 00:05:11,410
So it really allows, like users to swipe through both left and right, up and down within like that

76
00:05:11,410 --> 00:05:12,440
particular frame.

77
00:05:12,880 --> 00:05:16,090
So go ahead, go out there and test these little things out.

78
00:05:16,110 --> 00:05:20,770
I know a lot of people like to do like horizontal scrolling, especially with images like over here

79
00:05:21,100 --> 00:05:21,890
and products.

80
00:05:21,910 --> 00:05:23,920
I mean, this is pretty cool.

81
00:05:23,920 --> 00:05:28,330
Kind of like you don't necessarily need to get into any animation in order to create, like, a pretty

82
00:05:28,330 --> 00:05:29,250
awesome prototype.

83
00:05:29,320 --> 00:05:31,450
So that's overflow behavior within Sigma.