0
1
00:00:00,260 --> 00:00:05,160
In this assignment, you are going to practice tension. Nailing down tension method does take some practice.
1

2
00:00:05,260 --> 00:00:07,130
So, I want you to relax and just play around.
2

3
00:00:07,140 --> 00:00:09,060
Don't worry if you're not too happy with the result.
3

4
00:00:09,060 --> 00:00:10,250
Just have fun with it.
4

5
00:00:10,260 --> 00:00:12,060
That's how usually tension works out.
5

6
00:00:12,090 --> 00:00:15,570
You mess around for a while and at some point one of the versions looks quite all right.
6

7
00:00:15,570 --> 00:00:20,160
There is one frame in this Figma file. I want you to design the section in a way that you create some
7

8
00:00:20,160 --> 00:00:21,630
tension in the design.
8

9
00:00:21,630 --> 00:00:28,130
As we already discussed, there are several ways you can create tension. For example by use of angles.
9

10
00:00:28,170 --> 00:00:33,220
So, how do you use angles? Well, remember that classic split-screen layout that we usually use for such sections?
10

11
00:00:33,340 --> 00:00:39,090
Instead of having it straight and a rectangle, we can make them slanted. To edit any shape inside Figma.
11

12
00:00:39,100 --> 00:00:42,730
Just double-click it. Or click Edit Object in the toolbar.
12

13
00:00:42,760 --> 00:00:44,600
Now you'll get this sort of view.
13

14
00:00:44,700 --> 00:00:47,890
The points on the corners of the rectangle can be dragged around.
14

15
00:00:47,920 --> 00:00:51,700
Drag them to your liking to make a slanted rectangle.
15

16
00:00:51,700 --> 00:00:54,760
When you're done. Click Done button in the toolbar. Or hit Enter.
16

17
00:00:54,760 --> 00:01:00,640
Don't forget this. Because the screen is now locked in this Edit mode of the shape. And you won't be able
17

18
00:01:00,640 --> 00:01:04,230
to actually click on any other element and do anything else on the page.
18

19
00:01:04,240 --> 00:01:08,890
I sometimes accidentally double click on shapes like this, which then puts me into the edit mode and
19

20
00:01:08,890 --> 00:01:12,730
I'm not able to actually click on anything else and I'm wondering, "what the hell is going on?".
20

21
00:01:13,300 --> 00:01:17,740
And it's not very evident in Figma that you are in that mode.
21

22
00:01:17,740 --> 00:01:21,840
So keep in mind, if you're not able to select some element just check on the toolbar.
22

23
00:01:21,850 --> 00:01:26,350
If there is this blue button that says Done, that means you're probably in the edit mode of one of
23

24
00:01:26,350 --> 00:01:26,920
the shapes.
24

25
00:01:27,100 --> 00:01:32,130
Okay, now we can use this shape as our mask, just like we usually do with a split-screen layout.
25

26
00:01:32,140 --> 00:01:37,450
Remember to move the rectangle behind the picture. And while you have both elements selected click Mask
26

27
00:01:37,450 --> 00:01:42,060
icon in the toolbar. Now enlarge and position the image inside the mask just the way you want to.
27

28
00:01:49,240 --> 00:01:50,590
And there with few clicks,
28

29
00:01:50,590 --> 00:01:53,260
we already have a layout with a lot of tension.
29

30
00:01:53,260 --> 00:01:55,750
You can then change the color of the background if you like.
30

31
00:01:59,530 --> 00:02:01,720
Or change the angle and position of your mask.
31

32
00:02:15,300 --> 00:02:18,330
Another way to create tension is to align an object on the edge.
32

33
00:02:18,330 --> 00:02:23,100
This you can only do with certain objects. For example, you could do this with a headline or some text,
33

34
00:02:23,130 --> 00:02:24,180
if it's large enough.
34

35
00:02:24,180 --> 00:02:27,690
Doing this with a paragraph text will make it look like it's a mistake.
35

36
00:02:50,760 --> 00:02:58,400
I sometimes use this sort of edge alignment when I'm numbering steps or something like that.
36

37
00:02:58,460 --> 00:03:02,900
By the way, you can forget about the grid in this exercise. Grid and tension, just like grid and overlapping
37

38
00:03:02,900 --> 00:03:07,010
often go against each other. So don't worry about the grid for this assignment.
38

39
00:03:09,410 --> 00:03:14,840
Also, you can create tension using off-balance layout or by overlapping some elements. For example, overlapping
39

40
00:03:14,900 --> 00:03:18,400
headline with that photo. Or putting some elements of balance.
40

41
00:03:21,660 --> 00:03:24,870
All right, now it's your turn. You already have enough ideas how to create tension.
41

42
00:03:25,000 --> 00:03:28,540
And don't forget to style the headline, and the text, and the button.
42

43
00:03:28,720 --> 00:03:34,480
And most importantly. Have fun in this exercise. Because when it comes to tension and overlapping tricks
43

44
00:03:34,720 --> 00:03:38,230
they best work if you're having fun and kind of playing with it.
44

45
00:03:38,260 --> 00:03:40,920
So have fun. And play around. And see if it works out.
45

46
00:03:40,930 --> 00:03:44,920
If it doesn't, don't feel too bad about it, it will come with a little bit of practice.