0
1
00:00:00,180 --> 00:00:05,000
In this video we're going to practice applying overlays to our images, so fire up your Figma 
1

2
00:00:05,010 --> 00:00:06,760
and let's get crack'n! In this Figma file,
2

3
00:00:06,760 --> 00:00:11,110
I have prepared 3 frames. The content is all designed and ready.
3

4
00:00:11,160 --> 00:00:17,730
Your task is, to find photos for each frame and apply image overlays, so the content is well visible.
4

5
00:00:17,730 --> 00:00:18,980
Let me demonstrate the first one.
5

6
00:00:19,110 --> 00:00:23,160
So we have this hero section. For a meditation app or something like that,
6

7
00:00:23,160 --> 00:00:26,310
not sure exactly. I grabbed this content from random websites.
7

8
00:00:26,310 --> 00:00:27,620
First, we need to find a photo.
8

9
00:00:27,630 --> 00:00:33,130
So go to Unsplash.com. And let's try searching for meditation photos.
9

10
00:00:33,150 --> 00:00:35,210
It doesn't need to be the exactly meditation,
10

11
00:00:35,220 --> 00:00:40,180
you can search for whatever you think is suitable. So perhaps calm lakes, waters,
11

12
00:00:40,200 --> 00:00:46,260
nature, sky. Basically soothing and calming images. When looking for photos we don't need to go too literally
12

13
00:00:46,260 --> 00:00:48,820
and have the image describe everything in action.
13

14
00:00:48,840 --> 00:00:50,860
More about techniques of finding photos later.
14

15
00:00:50,910 --> 00:00:52,620
This photo works just fine for me.
15

16
00:00:52,620 --> 00:00:55,120
You can use the same or something else, up to you.
16

17
00:00:55,170 --> 00:00:55,470
All right.
17

18
00:00:55,470 --> 00:00:56,950
Download from here.
18

19
00:00:57,210 --> 00:01:02,340
And now let's place the image in Figma. You can drag the image directly in Figma, if you want
19

20
00:01:02,340 --> 00:01:05,430
or you can use a Place Image option from here.
20

21
00:01:07,400 --> 00:01:12,440
Select your file and then once you get this thumbnail on your cursor, click somewhere on the frame and
21

22
00:01:12,440 --> 00:01:13,520
it will place the image.
22

23
00:01:13,520 --> 00:01:17,510
The image has been inserted in its original dimensions, so it's super zoomed in.
23

24
00:01:17,530 --> 00:01:23,030
Let's shrink it. Zoom out so we can see the handles of the image. And then just grab the handles to
24

25
00:01:23,030 --> 00:01:27,980
reseize the photo. You'll see Figma doesn't distort the photo, if you shrink it weirdly. Which is really
25

26
00:01:27,980 --> 00:01:28,340
nice.
26

27
00:01:28,340 --> 00:01:32,170
You don't get this in most other design software, or any other software usually.
27

28
00:01:32,330 --> 00:01:33,970
But this means some parts are being cropped.
28

29
00:01:33,980 --> 00:01:39,470
If you don't want any of the parts to get cropped, then hold shift while you shrink the image that's going
29

30
00:01:39,470 --> 00:01:41,010
to lock the aspect ratio.
30

31
00:01:41,160 --> 00:01:45,550
Okay, now we need to send the image layer back, so it's behind the content.
31

32
00:01:45,560 --> 00:01:53,150
Two options: either use a keyboard shortcut of Control or Command+a Square bracket. The left square
32

33
00:01:53,150 --> 00:01:57,010
brackets sends it backward, and the right bracket brings it forward.
33

34
00:01:59,920 --> 00:02:03,170
One little thing you might get stuck with: when you click on the image,
34

35
00:02:03,180 --> 00:02:06,050
Figma selects the whole frame instead of the image,
35

36
00:02:06,060 --> 00:02:11,040
so use Control or Command-click to select the photo directly. And second option,
36

37
00:02:11,040 --> 00:02:17,340
Right-click the image then select Send to Back and that's going to put it behind in one single move.
37

38
00:02:17,340 --> 00:02:23,420
Same goes here, you gotta select image first with a control-click and then press right-click.
38

39
00:02:23,430 --> 00:02:25,070
Control+right click is not going to work.
39

40
00:02:25,080 --> 00:02:26,490
I really got lucky with the image,
40

41
00:02:26,490 --> 00:02:29,750
looks great, but as you can see, the content is very hard to read.
41

42
00:02:29,760 --> 00:02:34,470
So let's apply our overlay. So select the image layer and under fill options,
42

43
00:02:34,500 --> 00:02:37,340
add another fill, by clicking the + icon.
43

44
00:02:37,380 --> 00:02:42,390
Make sure you have that image layer selected and not the frame, or it won't do the job. By default, it's going
44

45
00:02:42,390 --> 00:02:43,750
to add this white gradient.
45

46
00:02:43,770 --> 00:02:49,360
We need to change this. So click on that new fill and change Linear to Solid.
46

47
00:02:49,380 --> 00:02:54,930
That's changing the fill from gradient to a regular solid fill. Move the handle on the color map, to make
47

48
00:02:54,930 --> 00:03:00,200
the color black. And then start playing with the opacity control. How much transparency we need is
48

49
00:03:00,210 --> 00:03:02,490
going to depend on the image itself.
49

50
00:03:02,490 --> 00:03:08,460
Ideally, we want as transparent, as we can get, until the point when any of the content becomes hard to
50

51
00:03:08,460 --> 00:03:08,860
read.
51

52
00:03:08,880 --> 00:03:14,460
I think somewhere around 30% is working fine with this photo. And that's all you need to do for
52

53
00:03:14,460 --> 00:03:15,240
each frame.
53

54
00:03:15,240 --> 00:03:18,840
Now I'm going to show you the tinting option, so you can use it on one of the frames.
54

55
00:03:18,840 --> 00:03:20,420
So first step in tinting,
55

56
00:03:20,430 --> 00:03:22,870
we need to make the photo black and white.
56

57
00:03:22,890 --> 00:03:28,530
This is super simple to do in Figma, just click on the image fill and decrease saturation all the
57

58
00:03:28,530 --> 00:03:29,450
way down.
58

59
00:03:29,610 --> 00:03:36,000
Remember from the color lessons? Saturation is the amount of hue in the color. 0% means the hue
59

60
00:03:36,000 --> 00:03:36,840
is completely gone.
60

61
00:03:36,840 --> 00:03:38,250
So no colors.
61

62
00:03:38,250 --> 00:03:40,210
That's what's happening here.
62

63
00:03:40,230 --> 00:03:46,460
The next step is to add a color tint. That's going to be added to that overlay fill. We will change black
63

64
00:03:46,470 --> 00:03:50,740
color to something else.
64

65
00:03:50,960 --> 00:03:58,370
You can play with opacity too, so you get the best result.
65

66
00:03:58,520 --> 00:04:03,770
You can also adjust other content on the page, if they are not working well. For example, that sign up button
66

67
00:04:03,800 --> 00:04:06,970
on top is too pale, so I'd increase the opacity a little bit.
67

68
00:04:10,110 --> 00:04:12,120
Also on tinted overlays like that,
68

69
00:04:12,120 --> 00:04:14,850
a common practice is to use brand colors.
69

70
00:04:14,940 --> 00:04:17,270
That's where tinting really comes in play.
70

71
00:04:17,310 --> 00:04:22,050
Otherwise, there is really no point and it's better to use the original photo with its vibrant colors.
71

72
00:04:22,110 --> 00:04:23,820
For example, whatever the brand colors are,
72

73
00:04:23,820 --> 00:04:27,300
we would use them as a tint and as a button color maybe.
73

74
00:04:31,700 --> 00:04:35,840
If you need to move the content around on the page, on those frames, you can do that. Because sometimes
74

75
00:04:35,840 --> 00:04:40,910
you have something on the background image that is sort of in interacting with the content, right?
75

76
00:04:40,940 --> 00:04:46,080
So if you need to, let's say, take that content and make a center alignment,  you can do that.
76

77
00:04:46,090 --> 00:04:50,210
Or if you need to like shrink a line or make it bigger, or smaller, you can do that.
77

78
00:04:50,360 --> 00:04:51,140
It's up to you.
78

79
00:04:51,140 --> 00:04:51,730
Definitely.
79

80
00:04:51,770 --> 00:04:57,370
Now, finish the job with other 2 frames. And submit your results of all the 3 frames in the assignment.
80

81
00:04:57,380 --> 00:04:57,790
After this.