In this assignment, you are going to practice tension. Nailing down tension method does take some practice. 1
So, I want you to relax and just play around. 2
Don't worry if you're not too happy with the result. 3
Just have fun with it. 4
That's how usually tension works out. 5
You mess around for a while and at some point one of the versions looks quite all right. 6
There is one frame in this Figma file. I want you to design the section in a way that you create some 7
tension in the design. 8
As we already discussed, there are several ways you can create tension. For example by use of angles. 9
So, how do you use angles? Well, remember that classic split-screen layout that we usually use for such sections? 10
Instead of having it straight and a rectangle, we can make them slanted. To edit any shape inside Figma. 11
Just double-click it. Or click Edit Object in the toolbar. 12
Now you'll get this sort of view. 13
The points on the corners of the rectangle can be dragged around. 14
Drag them to your liking to make a slanted rectangle. 15
When you're done. Click Done button in the toolbar. Or hit Enter. 16
Don't forget this. Because the screen is now locked in this Edit mode of the shape. And you won't be able 17
to actually click on any other element and do anything else on the page. 18
I sometimes accidentally double click on shapes like this, which then puts me into the edit mode and 19
I'm not able to actually click on anything else and I'm wondering, "what the hell is going on?". 20
And it's not very evident in Figma that you are in that mode. 21
So keep in mind, if you're not able to select some element just check on the toolbar. 22
If there is this blue button that says Done, that means you're probably in the edit mode of one of 23
the shapes. 24
Okay, now we can use this shape as our mask, just like we usually do with a split-screen layout. 25
Remember to move the rectangle behind the picture. And while you have both elements selected click Mask 26
icon in the toolbar. Now enlarge and position the image inside the mask just the way you want to. 27
And there with few clicks, 28
we already have a layout with a lot of tension. 29
You can then change the color of the background if you like. 30
Or change the angle and position of your mask. 31
Another way to create tension is to align an object on the edge. 32
This you can only do with certain objects. For example, you could do this with a headline or some text, 33
if it's large enough. 34
Doing this with a paragraph text will make it look like it's a mistake. 35
I sometimes use this sort of edge alignment when I'm numbering steps or something like that. 36
By the way, you can forget about the grid in this exercise. Grid and tension, just like grid and overlapping 37
often go against each other. So don't worry about the grid for this assignment. 38
Also, you can create tension using off-balance layout or by overlapping some elements. For example, overlapping 39
headline with that photo. Or putting some elements of balance. 40
All right, now it's your turn. You already have enough ideas how to create tension. 41
And don't forget to style the headline, and the text, and the button. 42
And most importantly. Have fun in this exercise. Because when it comes to tension and overlapping tricks 43
they best work if you're having fun and kind of playing with it. 44
So have fun. And play around. And see if it works out. 45
If it doesn't, don't feel too bad about it, it will come with a little bit of practice.