Hello everyone, my name is
Aksonvady from Design+Code. Today, we are going to
do something different, We are going to create a dark
mode, Web App scratch and Figma. It's a new concept that I make. As you can see it's inspired by Discord. Discord is a community
games, music, and more. Before we get started, I want to
introduce our video sponsor rive. Rive is a great animation tool
for making interactive assets for apps, sites, and games. It has a visual editor where you
can collaborate with your teammates. You can import from your favourite
design tools like Figma and Sketch. They have a community with hundreds
of free assets that you can open, edit and use for your next project. Rive lets you create multiple art boards,
animations and you can compose you states by using their state machine. Give it a try. It's free to create an account and
even have a lot of fun with it. Now, back to the project. In this video, I will show you
how to create a sidebar menu. We will create a custom shape,
build this selected button. And list of categories. Then we will build this action
bar icon with the voice pattern to add some fancy to the design. Afterwards. We will focus on the main content mainly
we will make different types of cards. Last part, we will create the
inspector for action bar icon, user profile and notification. This is what it looked like when you
duplicate my project in Figma community. It will open directly
on your draft section. Let's create a new your
page click on plus. Let's call it draft. Let's add a frame you can press
on A key and drag a rectangle and then you can click on a
frame, you can search for desktop. So I will use 20 for the corner radius. So, I will add another
frame, and press on A. This time, I will search for iMac. I will position it to the horizontal
center and vertical center. For this frame, I want a height of 844. Center horizontal and vertical. I will use the corner radius 16. Let's go to the inspector,
let's use linear color. So I will incline a little bit like this. The first color is 7 7 5 8 D 1. The second color is F 7 C B
F D, with an opacity of 100%. All right, when we do dark mode it's
good to have light background so that it can contrast well with your design. So I will name my layer Desktop
and here's going to be my apps. I will call it Daccord. It's just a random name,
Daccord means I agree in French. Now let's create a first section
that's going to be a Sidebar menu. So let's start with a frame. Press on A, the dimension
is going to be 320 by 844. All right, let's position
it from the left and top. Separate this section, so this
frame is going to be Side Menu and let's create another frame. Add different color to see the difference. The size going to be 844, width is 716. Align from the top and let's
align here so that we don't see the red line, so it's fine. And then let's add another frame again. The height's 844. The width aligned it's 244. and it's going to be aligned
from the top and right. We can add another color. They have to be inside Daccord. Align from left and top and
let's call it Inspector. So for this section, we're just
going to focus on the side menu. So this one we just hide for now
and this Daccord I will hide this. Now, let's work on this. I will add another frame inside this fame. This is going to be the side bar
the size is going to be 76 by 844. This one, let's change the hex color to
1 D 2 0 3 E with the opacity of 30%. I will use effects, choose
Background blur, set the value to 20. Align from the left and top. Now I will add another frame,
I know it's a lot of frames. The height it's 844. Width is 244. It's going to be aligned from the top and
I will use another color that we can see. We're just going to fit this so
we don't see a line here. Now. I'm just going to change the color to
2 C 2 F 4 8 with the opacity of 50%. Let's go to the layer. Click on Side Menu, I'm not going to
use this fill so let's hide it because I want to use a background blur. You know, like it's glassmorphism. For a Mac app it's common
to have background blur. Inside the side menu, this frame
let's call it Side Bar and this frame let's call it Categories. All right, inside the Side
Bar, I will create the Minimize maximize and close button First, let's create an ellipse. Let's change the dimension to 12. When it's locked, it
keeps the proportions. The first color going to be E D 6 9 5 E. I will use the smart guide. Press on Option key on your keyboard. So you will see a red number. I want a spacing from the top
12 and spacing from the left 12. So let's duplicate this circle. Press on Shift and arrow key, 1, 2,
spacing from 8 it's okay Let's duplicate again Press on Command D to duplicate
and this one it do automatic for you because it organize your previous action. Okay, the second circle, let's
change the color F 4 B F 4 F. Third color, 6 1 C 5 5 4. The alignment is already good for me. All right, now we can group
those 3 circles together and we can call it Browser Button. For me, I will add the
logo of the app here. So I will go in the assets, search for
the logo that I created for this app. Just drag in here. For you guys, if you want to create
Mac app similar to this one, going to have to choose your own logo. Press on Option key to help
me guide for distances. I select on the logo, press on
Option key to see this smart guide. I want 32, from the top, 16 from
the left, 20 from the right. All right, I will create a
custom shape for my Side Bar. It's going to be inside
the Side Bar frame. I'm going to start with a
rectangle, align from the top. Alright, now press on Return key to edit
or you can just go in the top center and click on this icon for edit object. So from here, you can add new points
here or press on P key to add a Pen tool. So, I will add a point here
and I don't want to create a line, so let's press on escape. I will also add a new point here. Press on escape and I will add another
point around here and press on escape and then press around here, escape. I will select those top two points
together and move from this line. I can just zoom in to see
better from this line. And those two, let's move from here too. All right, and then press
on Return key again. I'm just going to select this point
and we're going to move from 10 pixels. Press on Shift and left
arrow key like this. Spacing 8 it's fine. And now let's move those two points
and let's move from the bottom. So I'm just going to
select one individual. Just select this point. Let's go to the right
inspector to change the value. Use the corner radius 44. And click on this point, let's change
the Y value to 108 and the corner radius, I will change it to 44. So this one also I will change the
corner radius to 44 and Y value to 447. Let's click on this one and I will change
the Y position to 497 . All right, so it's going to be 44 for the radius. Now let's change the hex color to 1
D 2 0 3 E with the opacity of 30%. So I will add effects, choose
background, blur, set it to 30. Alright, now let's create, icon or a logo
for company or a avatar for a group here. I will add ellipse, press on O. You can press on Shift to
create a perfect ellipse. The size is going to be 40. The spacing is going to be 20 from
the left and 16 from the right. The top is going to be 132. All right, I will show
you how I add an icon here. For my project, I use this
beautiful diamond icon. What you have to do is click on duplicate. For my first icon, I
will use this diamond. I'm just going to select the
group with the reflection also. Just copy and go back to my
project and from here, I'm just going to paste but it's very big. I'm just going to make it smaller. Press on K, when you see this icon,
it scale and keep the proportion. All right, for the ellipse we don't use
the reflection just going to use this. Now this is center. For the ellipse, let's add a gradient. I will move a little bit left and right. First color is 7 0 B 4 E 5 Second
color, I will change it to 100% and the hex color is C 4 1 7 E 0. So I will set this icon and this
ellipse together and right-click on your mouse, choose the option to frame
selection and it's inside of this frame. Let's call it Group Logo. So next, you can just duplicate
and drag here and the spacing between it's going to be 24. 20, 20. So for me, I'm going to search
the icon that I already created. It's going to be this one and this one. So this one, I will show you
how to do it from scratch. But first, I'm just going
to duplicate this one. This one, we going to create a new
one, just going to delete this. So let's create ellipse, 40 by
40 and the spacing it's 20 by 24. All right, so I want to
create an icon for explore. I will use the same style as this one. This time we use black
color of 20% opacity. I will use this icon for explore. Command C for copy, let's go
back to my design to paste here. So this one, I'm just going to
change the color for white and then I'm going to use the overlay. Just change it to 100 percent. So let's add blending mode overlay. Let's select this layer,
duplicate and select the bottom. I will change the name for Blur. Fill, I don't need just delete it. For stroke, I will change the
first color to C 3 2 2 F F. Second color to 0 0 B A E 1, overlay
is fine, thickness 1 is fine, it's going to be from outside. Let's add effects, select
layer blur and 4 is fine. So Let's change this, I wanted
my icon to be like this one. I didn't find the one that I liked. I prefer this one. It look weird like this in my design. So what we can do is create ourself. I will show how to create
this icon from scratch. Let's create ellipse, 20, center,
center, and then I will add polygon, set 4, 10 and the width is going to be
6 and change another color that we can see better and let's add corner 1. So this, I will make
it bigger, 22, center. 18. Okay, it's better, this 8, align center. Now add circle, 4 is better. Now I will select the first ellipse
with the diamond and with this polygon and then let's go to the top center,
click on this icon and use subtract. So those two, we can group
together and let's use union. For this shape, I want to do
a minus 45 degrees like this. Or what we can do, you can
flatten, Command E to flatten and it become his original. All right, so now I can select,
my new icon, just change the color for white and use overlay. Oh, I notice I don't like
this, it's too sharp. I will use 2 instead. This one too is 2. Okay, now it's better. So select I like this union,
so let's call it Compass. And then let's change it to
white, use blending mode, overlay. Okay, I'm happy so this
one just delete it. All right, let's create a light
effect when my icon is selected. I would use the polygon. Let's go to the top left
menu and choose Polygon. Press on Shift for the
perfect proportions. So it's going to be 72 by 72. It's going to have six sides. Set the corner radius to 16 and
I will add fill color, linear. I will move like here a little bit. First color is C 4 4 1 F 4. The second color is 0 0 D A
E A with density of 100%. Let's add a stroke, I will use white. I will use blending mode overlay. It's 1 thickness and it's inside. Change the X position to 0
and the Y position to 311. And for this polygon, let's
move it behind the shape. It will be here. Let's duplicate this polygon. In the bottom, I will change it for Blur. For the blur, I will change
the poverty of the stroke. Instead of white let's use linear. The direction is going to be vertical. The first color is going to be C
6 1 8 F F Second color change to density of 100% and the color is 0
0 C 3 F B and the thickness is 2 and it's going to be from the outside. And I will add effects, choose
layer blur and 4 is fine. We're not going to use
overlay just normal. From here I want to add a rectangle. Add some opacity so
that I can see through. From here, select your rectangle,
you can go at the center top menu, click on edit object. So to add points, with your mouse you
can see a dot, so you can click on plus, it will create a new point for you. They always find the center
point for you so it's the center. Press on Return key to edit. Select the center point, let's move
it by five pixel 1, 2, 3, 4, 5. . Add the corner radius to 20. And this one, let's say 20. All right, I want only this shape, I
don't want this rectangle so what we are going to do, we're going to use subtract. Duplicate the polygon 12 and
this rectangle let's move side to side with the Polygon 13. Those 2 together and then go to the top
center menu click on this icon, choose subtract It's behind so we don't see
much, so let's move it in front like this. So I notice that the stroke is too
strong, so let's change it to 40%. For this shape, I will change color for
3 8 3 A 5 7 with the opacity of 50%. Let's add a drop shadow, X position
it's - 1, 0 blur, 0 Y and use white color with the opacity of 20%. So I change linear to
radial for my background. So when we move, it's
going to be like this. Okay let's change this rectangle for
Bar Select those two layers together. Then call it selected. and then let's call it Selected
Let's call it Selected Effect. I did like this because if I
planning to do a prototype later on. It's going to be easy for me to have
controlled and move them together. That will be all for today's section. Now, add another frame inside. The width is 244 by 44. So let's add colour so we
can see what we're doing. Let's align from the top , like this. So for this header, I'm
not going to use white. I'm just going to use 0.1 and let's
add effect because if I don't use fill, I cannot use inner shadow. It's going to be minus one,
0 blurs and the colour is white with an opacity of 10%. You guys can just use the divider. just create a line here, it will do the same work. Let's write Explore, my text
I will use Lato, bold, 17. Let's use the option key. To see a smart guide Okay Spacing from the left
is 16, from the top is 12. Now I will add another frame. I create button categories. Size it's 212 by 40 and
let's add fill colour. So for this one, it's going to be
a selected section so I will use black colour, and opacity of 50% and
I will use a blending mode Overlay. Let's add a corner radius for 5. Let's align the horizontal center,
from the top it's going to be 12. All right now let's
import the icon with text. For me, I use SF Symbols for my design. For those who are not Mac users, you can
use the icon from the Figma community. They have so many kinds of icons
that you can download like this one. What you have to do is
search in the community. You will see a list of icons. Search for your icon, choose what
you like So to save time, I already created my icon in the component. I'm going to use Explore, It's going
to be 12 and then let's add text. Let's write Home, regular, size 15. I will use an auto-layout that can help me
organize the spacing between the elements. Okay, let's select Home and the
icon and then let's go to the right inspector, let's add auto-layout
the spacing I will use 8. It's a space between the element
and the padding I will use 8. Align from the left. The icon. I will change the
color intensity to 100%. For the spacing, I will
use the left center. This one, I will call it selected Now
let's duplicate At this This button I will drag here, I will use spacing of 8
What you have to do is to change the icon and change the text So for me I'm going
to use auto layout to help me organize. I'll get those layers together
And let's add an auto layout. For the spacing, I will use
8 Select the layer below then go to the right inspector. Go to fill then hide these eyes because
we don't want to do a selected button. This one, let's call it Music. There's no background selected. and then just going to change text
Music So I'm going to repeat the steps. This one. I will change for gaming Science and tech. Let's change this for Entertainment. Then add student hubs. Now I want to change the icon,
I will choose from the assets. Music here Okay I mean gaming Is
it Christian Okay All right He's missing the Education cagetory let's duplicate this. Write education all right, Don
for this section, so far so good. Now, what we have to do is
the bottom action button, we're going to do the toolbar. So I will add frame at the bottom. Let's move it on the
top of the Categories. The width is 320 by 72,
align from the bottom. Now let's change the color to 1 D 2 0 3
E and for this I will add inner shadow. X is -1, and blur is 0,
Y is 0, color is white. The opacity is 10. It's here, I created a separator here. Now, I want to add avatar of my user. This one we do like on Slack and
Discord I'm going to have your name and your profile and some action
here for communication, for chat. So I will add a polygon. Change the size for 32. Add a corner radius to 4. All right, I will add an image
I like to choose from fill and choose image and then click on this
button to search on your Finder. So I have my images saved
here so I will use this one. Those are the images that I downloaded
from Unsplash.com or you can duplicate on the Figma community. They have Unsplash avatars that
you can use for your design. Now, we don't see her face so I will
use Tile and then I will scale up. I want to see her face, okay like this. So I will add more
contrast, let's add stroke. I like to use a lot of gradient linear. So let's move a little
bit from left and right. All right the first color is A 7 3 E E 7. Second color is 0 0 3 B F F. Change the density to 100%. It's going to be 1 thickness and center. Now let's add text. So I noticed that this color is not good. so it's this color. All right, much better. Let's change this, Profile. Select those 2 layers together and
let's add auto-layout, padding left center and spacing between let's set
4 and let's align vertical center. So the spacing here, I will use 12. All right, now I will
add the icon action here. So let's go to assets and drag the
mic, headphone and add some friend. Okay, I will just use auto-layout
to help me organize, align my icons. So I will just select those 3 together
ah, it's not working because I select more than 2, I cannot
see the auto-layout option here. So I have to group them. Command G to group and now on my
inspector, I can see auto-layout up there. Okay let's add the space between,
align from the vertical center. Let's call it User and here
it's going to be Icons. Spacing between is 36 is fine,
align from the vertical center. For this icon. I use this for selected so for this one,
I don't need, I'm just going to hide this polygon for now because we don't need .
And now I would like to add a voice
effect like an animation voice when you talk here, a movement like music. All right, let's add
frame, it's 320 by 84. Okay let's move this rectangle
at the top of frame 6. All right. Let's move until it stick together. Okay, like this. All right, let's change the color for
1 0 2 0 3 E with the opacity of 50%. And now I will use the background
blur effects, change the value to 50. I will add some color, some life. Right now it's boring, I will
add some color a little bit. So let's add a polygon,
I will use 4 sides. Let's change the size to 316 by 56. Let's move from the top. Okay. I want to add those 2 inside a frame
so you can select, on your mouse. Click on frame selection. Create a frame for you and now
it's more easy to alignment my element inside the frame. It's going to be alignment
center, horizontal and vertical. I will add linear color
for this one, like this. The first color is 0 0 D A E A,
second color change the density to 100, 1 D 1 3 8 B, density to 100. The third color is C 4 4 1 F 4. Now we use layer blur, so I will use 40%. What we have to do is create a
line like noise, music, voice. You know like for music. So we're going to create music noise. So let's start with line here. Use 36, we can just duplicate this
line and I will use auto-layout so spacing 8 and the thickness let's
use 1.5, okay I think spacing is 4. Okay. So let's duplicate, for example
the first one let's say I want 2. It's going to be a padding
aligned from the left center. This one, let's say 4 and this one
let's say 8, 16, this one is going to be 24 and the 7th let's say 20 and
duplicate again, 8th line let's say 18. This one, let's say 12. 10th it's 6 and duplicate again, this
one I will use 2, those I will use 2. Okay something like that. So we can just duplicate
those line, duplicate, okay let's group them like this. Okay. So I'm just going to repeat those steps. I will do about 64 lines in total. Just going to move here, align
center from the vertical. Spacing from the left 36,
group and duplicate okay. All right, so usually I will use
a copy just in case I want to change my mind, I want to redo,
just make a copy just in case. So let's hide this one. So I'm going to select those
line together and then merge. Command E to merge. It becomes a vector line but you
can still edit like this when you press on Return key but of course
you have to remove auto-layout. Notice that those lines too sharp I
want to add corners 4 for example. Click on the three dots for advanced. Now let's click on end
points, choose Round. So this fill just delete. So we're going to add
linear color on stroke. I will use a straight line. Okay the first color is 0 0 E 9
F F, The second color is F F 0 0 D 8, change the density to 100. All right, here in the background
I will incline a little bit. All right, I think I prefer this one. Let's search for the center around here. So I will use this ruler. You see 2 arrows. So let's click and drag it will create
a red line, small guide for you just on the center of this polygon. Say like this rectangle. Press on Return key to edit or just go at
the top center click on this icon to edit. So I'm just going to press
on P to add a new point. It's going to be here,
Escape to remove this line. So will add new point here, escape
and add another point here, Escape so switch back to V. I will just going to move a round number. Use 20 pixels, 1, 2. No 2 is too much. Okay let's use 10 pixels. Press on Shift and click left
arrow, move by 10 pixels. Okay. Now let's select this point, let's
move from six pixel on the bottom. 1, 2, 3, 4, 5, 6. So this Add corner radius 4. I will select those 2 points. Let's say 12 radius. This one is missing it's 12. All right, it's done. So far so good. What we need in this section. In my project, I use Metaverse Icon
Set by llliyin Studio Most of my work I use pictures from Unsplash.com. Like this one I use for my design, space,
some diamond, game and this one I use as my user avatar because I like the
color and it fit the theme or my design.. All right, let's get started. From the previous section we
completed this side menu. Now let's open the frame main content
that we created from the last section. Just open the eye. I'm just going to leave the green. Okay select main component and
press on A to add a new frame. The size is 716 by 44 and it's going
to be aligned from the top and right. I will add fill color to 2 C 2
F 4 8 Now let's add a rectangle. Press on R to draw a rectangle, change
the size to 442 by 24, align center horizontal and vertical. I will set the corner radius to 4. Now let's add linear color. The first color is 2 E 3 3 5 A,
let's change the density to 100%. The second HEX color is 1 C 1
B 3 3, set the opacity to 30%. Let's add stroke, I will use white
colour and set the opacity to 20%. It's 1 thickness and it's from inside. Now I will add a text, Explore. Let's align center horizontal and vertical
and my text, alignment is from the center. The font is Lato and the size is 13. Now it's missing the search icon. You can search the icon
from the Figma community. For me, I will search in the
assets that I already created. It's this one, I will drag here. I can group those 2 together
and let's add auto-layout. Click on Plus and alignment is
going to be from the left center. Let's align horizontal
center and vertical. The spacing between is 4. This frame let's call it Search Bar. I will add another frame
for my main content. The width is 716 by 800, alignment
from the bottom and left. Now let's add fill, change
the color to 1 D 2 0 3 E. Let's call this frame Container. Inside this, I will add frame,
I want to create a banner here. Let's change the size to 668 by 180. Add fill so that we can see. The spacing is going to be
align center horizontal. The margin it's 24 from
the left, top and right. I will use corner radius to 20. Let's call this frame Banner and
then I will add a background so I will search on the assets. It's going to be this one. Let's align center, center. Now I add text. Daccord is the name of this app. It's going to be SF Compact
Rounded, I will use Semibold, 24. Let's align center
horizontal and vertical. Let's create a new section
called Featured Community. First, lets' add a title and the
text it's aligned from the left. I will press on Option key to
see the smart guide So I will use spacing 24 and the top is 32. The font is SF Compact Round,
semibold and the size is going to be 22 and the color is white it's okay. All right, now let's
create the first card. I will start with frame, press on A. Let's change the size to 320 by 208,
corner radius to 20 and let's add fill Change the HEX color to 2 C 2 F 4 8
I will add a corner smoothing to 100. Now let's add stroke, linear color. First color is 0 1 B 7 C 5 The
second color change the density to 100 and the hex color is 7 8 2
C 9 6 Now set the opacity to 70%, it's 1 thickness and it's outside. I will change the direction
of my gradient like this. All right. Next let's add a drop shadow, click
on Effects and click on this icon. Change the Y value to 10 and
the blur change it to 20. Color is black and set it to 50%. This frame let's call it Featured Card 1. Now let's search image for this community. Most of the images that I use is
from this website call unsplash.com. You can search for beautiful images for
your project and it's free of course. As for me, I will use this
one that I already downloaded. I will use this one for my first card. So I'm going to paste here. Press on K to scale. by keeping the proportion All right,
now let's create a rectangle inside. Change the size 320 by 142. It's inside Featured Card, from the
bottom and align center horizontal. From here, I will use a custom
shape, let's click on this icon for edit When your mouse over your
rectangle, you will see points in the center so let's add, click. Alright, now we added a new point. Let's move it at 20 pixels, press
on Shift and arrow down 1, 2. Hold on Command key
you will see this icon. You can see the size of the
anchor point and you click to bend and click on this anchor point. Let's go to the Inspector, for the
vector section, X position change it 96 and now click on the right anchor point. X position change it 224. I can select the top left and
the top right at the same time. I will add a corner radius for 24. Corner smoothing to 100. Alright Click on fill, I will
change it to Angular color. The third one it's
going to be around here. This one is going to be around here. First color, I will set to 100,
change the HEX color to F 4 4 9 F 4, second color to 0 0 1 9 C 0, third
color, 7 9 7 6 E 8, I put it 100%. So back to Fill, I will
set the opacity to 30%. Then let's add a effects, it's
going to be background blur. Set the value to 50 then I
will add add a second color. So I will change it to radial. Change the first color to 3 1 3 7 6 F,
the second color change the density to 100% and the color it's 8 9 4 B 8 2. The second color, I will
set the opacity to 0. All right, this is to hide this point, I
just don't like it or I can just move here to hide, And now I will add a third color
it's going to be black with 30% opacity. Now let's create a polygon for the avatar. Search for polygon, Press on
Shift to create a perfect polygon. I will change the size for 64 and
the corner radius set it to 12. Align center horizontal,
it's going to be around here. Press on Option key to guide you. Spacing from the top set it for 50. All right, I will select this
triangle and let's add image. Search for image. So those are the images that I exported
as PNG from the Figma community. Select this one, I will add a
background white, 100% density and now I move the image at the top. I duplicated the polygon and
added the 4 thickness outline. Okay before I create an union
let's copy properties, select this rectangle, right-click on your
mouse, click on copy properties. Select on this polygon, I will
right-click, let's use outline Stroke. Going to use this stroke and going to
select the stroke and the rectangle and let's use bullion, I will
right-click and , paste properties. Now, click on Eye for the avatar. Now, it should be like this. This one, I don't need to just delete. This one, I can use Avatar
This will be Shape. All right, now let's add content. I will start with a title. The font is SF Compact
Round, semibold, 22. I will use smart guide, press on Option. So the margin from the left is
12, marging from the top it's 108. Now, let's add description. All right, let's change the font for Lato,
it's going to be regular, the size going to be 13, use fixed size for the text. So I will use Height, let's
change the width to 296 and the spacing it's 12, the top 8. Okay now, I will add another text. The font it's Lato, regular and
the size is 12 and the spacing 8 and it's going to be 12. Now I will add the icon here for members. So again, you guys can search
your icons on the Figma community or on the SF Symbols. For me, to save time, I'm
going to choose from my assets. So I will choose this one for
Members and and I will use this one for Online Members. Command C to copy, add a new text I can
duplicate this text and move this one. Command V to paste. We have to use Apple fonts. So let's use SF Compact. I'm just going to group
this symbol and this text. So let's go to the inspector,
let's add auto-layout. Spacing, I will change it at 4. Align center and I will
change the opacity to 25%. For the description, I will
change the color density to 55. Spacing for the top it's 8. Okay this frame, let's call it Members. Let's call it Description,
this one call it Title. This one we can change it for Group Image. All right, this one I'm
just going to duplicate. I want to use those two together,
I want to use auto-layout. The alignment is going to
be from the horizontal. Just click on the three dots here. Use the fixed size, it's
going to be Space Between. I will change the SF Symbols here So
we are done with the first card. What you have to do is duplicate
this card and move here. So press on option key to use
the smart guide, space is 24. say alignment as this one. What you have to do is to change the
background, change your avatar, change your texts and change the number here. To save time, I will
search from the assets. All right, I'm going to use this one. So this one, I'm going
to hide, same spacing. And now we're going to
create the second section. Just click on this text, press on Option
to duplicate, when you see a double arrow, that means you can drag and release. So the spacing is fine, here it's fine. Let's change the text to Popular Right Now All right, let's add another text
here that will say See all when you select this button, you will
see all the featured community. I can press on Option key and drag here. So let's change the text for See all, text
alignment is going to be from the right. It's going to be regular, the
size is going to be 15 and the color density is going to be. 55. It's going to be 24 from the right. Spacing between text and card is 12. Select this text and
press Option, it's 32. All right. Let's start with The second
card We'll start with a frame. Let's change this size to 320 by 1 52. Let's add a corner radius of 20. Add fill okay let's change
the color to 2 C 2 F 4 8. Okay, we can start position now. So it's going to be 12 and here
the margin from the left is 24. Alright Now we will add a stroke
and the color I'll use linear color. First color is 0 1 B 7 C 5 the second
color Change the density to 100%. Change the color to 7 8 2 C 9
6 Set fill color to 70% opacity. Move like this. So the thickness is 1, it's from outside. Now I will use drop shadow. Click on this icon. Y change it to 10 and
change the blur for 20. The color is black and
change the opacity to 50%. All right. Let's call this frame po pular card1. Inside this frame, I
will add another frame. Let's change the size to 220 by 152. Alignment from the right and top. So I'll set corner radius for 20. Now let's add fill linear. First color is 5 B F D 6 Second color is. It's just going to change it to 100. color is 1 B B 1 D 0. So I will change the position
of those lines around this. Add the stroke. Change the color for white
with the opacity of 40%. It's 1 thickness and from the center. I use Overlay. Now, inside this frame
let's add a rectangle. Okay. Let's change this size here. Okay. It's 224 by 152. Alignment from the bottom right. Now that's custom this shape. Let's go to the top center to
click on this edit object and when your is mouse over this layer,
you will see a point at center. So click and click to add point. I want to move this point by
40 pixels from your right. I will hold on Shift and click on right
arrow to move by 10 pixels 1 2 3 4. Okay, now let's press on
command key to ben this point. All right. So for this, let's select
the top left and bottom left. Let's change the corner radius for 8. About this rectangle. I want to move inside this frame. So I don't like this part. So in width I'll add 1 pixel more 25. Let's align from the right. Okay. Alright now let's change
the color to 3 9 3 D 5 E. Next drop shadow, go on effect. Okay. change Y value to minus 1. Blur It's 20, color is black opacity 50%. Now I want to add a polygon. Let's go to the top left. Search polygon. Let's draw a perfect polygon
hold on shift and drag .So let's go change the size here. Change it for 64 and add six for exagon. Add a corner radius 12. So it's gonna be align vertical
center and margin from the left it's 68 let's search for image. Click on fill and search
the image from my desktop. I will add a second
color and use white 100. So I'm just gonna move
the image from the top. All right. So let's add a drop shadow. Y is 7. Blur change it to 10 and color
it's black and the opacity of 10%. Let's add the stroke. You can add from here. Me, I'm just going to duplicate
this polygon and remove image. Remove fill . Use stroke
outside, 2 thickness. I want to use a angular color
Add 3 colors First color. Let's set the density to 100. The hex color is F 4 4 9 F 4
Second color is 0 0 1 9 C 0. Third color, change the density to 100. Change the hex color to 7 9 7 6
E 8 and with the opacity of 80%. Now I want to add a background here. So I will search on my finder. Move the image below frame 1,293. Press on k when you see this
icon, that means you can scale and keep the proportion. It's around here. Now let's add content. We will start with a title. Name with 3D art. Text alignment from the left
and font is SF compact rounded. Semi bold 22. The size from the top is 20. The margin from the left it's 48. Okay let's add a text again. Let's add description. Place to discuss. Ah, the font it's lato, regu lar 13. All right. So let's select this text. let's check color density to 55%. Spacing from Here it's 48. All right. Press on option to see the guideline. It's 8 and then we add, how many
members we have on this group? So we just come to. Duplicate this. This same. And then we move it here. We will use the same spacing. 48. Let's do 12. From the bottom. All right. We are done with the second cards. What you have to do is duplicate
This card Spacing between, press on option key to see a smart guide It's. 28. So What you have to do is change
the background change the text For the second card I'm just going to
choose from my assets It's gonna be this one Let's delete the own one. Click Back to layer 28. All right. I'm just going to. Duplicate, press on option key. And drag here Use Option
Key to see the guideline. It's 24. And spacing between is 12. Select those two text together and
presse on option key to duplicate and drag it at the bottom. The margin left is 24. Margin from the top is 32. Now let's create a third card Add frame. So add fill that we can see. You don't see because it's clip inside. So click On Daccord and then uncheck
clip content so that we can see. Then click on a container
uncheck clip content. And then on container
Click uncheck clip content. Okay. Again, On desktop UnCheck clip content. Change the Size. It's going to be 200 by 200. Change to hex color to. 2 C 2 F 4 8 Corner radius 20. Add the stroke. I will use linear color. The first color is 0 1 B 7 C 5 The
second color change the density to 100. Change the color to. 7 8 2 C 9 6 with the opacity of 70%. Use 1 thickness and it's from the outside. All right. Change the direction. This Oh, here it's not 70% is 100. From here is 70 percent. All right you can click on this popular
card 1 right click on your mouse. Copy properties and you go back select
this frame Click on your mouse and click on paste properties now we have the same
properties Let's add a rectangle inside. Okay. change the size here. It's 200 by. 1 36. It's align from the bottom okay. Add corner radius, 20. Let's change the color 3 5 3 D 5 E
Okay now I will Add a hexagon We can copy in this one and drag it here. The size is 44 zoom in. Move the avatar around here. it's 40 from the top. And it's duplicate this hexagon Stroke,
use thickness 4 from the outside. Select the rectangle and the polygon 16. Let'use bolean select union. So let's duplicate this one and move
outside the union It's going to delete. The stroke. Sorry, is this not working? I'm just going to play
with the size Like 48. So Now will see this change
colour for 3 9 3 D 5 E. So let's move this polygon. I'm just going to delete this image. So we are going to hide this image. Change this image. Choose this one. All right now, I will add a
Background group for this one. Going to be this one Click on this frame
and Command V to paste So let's press on. K to scale the image Proportion Move
this image behind the rectangle. I will make this hexagon
bigger add two more. All right. No, it's better. Position is Margin left is 189. Top is 40. Right is 18. I will move this one here too. All right. Much better. I this one name shape. Now let's add content. The title is Movie. The margin left is 12. Top margin is two. Now add a description. Discuss your favorite movie. Change the font TO LATO
It's going to be regular 13. And I use fixed size. 126 by. 48. I use spacing 12 from the left. 8 from the top. for member I'm just going
to use the same as this one. Just copy Option Command C for copy. Press on option to use a
smart guide Margin left is 12. Bottom it's going to be 10. Select the description and I
will change the density to 55%. So I will change title it's. Recent Add Now what we have to do
is the same, Select the card and duplicate And the spacing is 34. What you have to do is
to change the background. Change the avatar and
change the texts All right. So I will use the same step. I will choose from the assets Let's
change the number here because is new. So we don't have a lot of members. So I will set the value
for tree for example. From the previous frame called inspector. So let's click on the eyes. So we will continue on this one. Go back to click on main content. So This green colour,
I don't need it anymore. I'm just going to delete it. Now the inspector is red. The dimension is 244 by 844. Let's change the colour 2 C 2 F 4 8. Now let's add effects,
choose inner shadow. X, it's 1, zero blur, zero Y. Colour is white with an opacity of 10%. As you see. Here we are creating a separator. Now, I will add a new frame. I create a bar here for my action. The size is going to be 244 by 44. It's going to be alignment
from the top and right I notice this it's outside the frame. So it has to be inside the inspector. And now, I will align right And top. Now add fill. I want to add an inner shadow but
I have to add filll otherwise, I cannot use an inner shadow. I would change the color to 0.1% opacity. And add inner shadow. Then the Y change it to minus one. Blur is zero. The color is white with the opacity
of 10% like this or you can just use a line to create a separator. Now, let's add an icon action here. For this part, you can search
your icon in Figma community. Like one of those set. For me, I use, from the SF Symbol. This library is for Mac users only. I will search from the assets. Okay.I will drag this icon here. Okay. Let's zoom in. The first alignment is 12. Margin left is 12, margin top is 8. Okay! Go back, select layers. I can do it. Select those 4 together. And let's add an auto layout in order to use an auto layout, I have
to group them or group them as a frame. Otherwise, it won't show the
option to add an auto layout. Press on command G to group. Right inspector. I can choose an auto layout. Then let's go click on the three dots. The spacing mode, I want space between. And, I want to change the order. Mail first one here,
notification, cha and setting. Fine. Next, let's create an user profile. I will start with polygon. Go to the top left. Click on polygon. So create a polygon around here
. Hold on shift to creat a perfect. And then let's go to the inspector. I will change the size to 124. And let's add a hexagon. Let's try horizontal center. Press on option to use a smart guide. Okay So the Y position,
let's change it to 84. Add corner radius. 22. Add the image, I will click on fill. Click on image. From here I can choose
image from my finder. Okay. Oh, those avatar. I download it From the
website called "unsplash.com". Choose her. I will use tile. That you can see her face. Search from Figma community,
they have an avatar. You can duplicate and use it. for your project. now let's add a stroke. I will use a linear. So the first color is A 7
3 E E 7 The second color. I will change the density to 100%. And the color set it to 0 0 E B F F. So it's going to be form the outside
and it's going to be two thickness. I will change the, the position of color. Okay, around here. Let's add some nice effects. So let's go back to Figma community. for my project, I use this Futuristic stroke pattern by Sajid. You can duplicate this project. One it's duplicate. It will install and you draft section. for my project I use this one. So I'm just going to copy this. Command C to copy. Now go back to my project. Here it's my user profile. Let's changed it. Paste looper here. It's Press on K key. When you see this icon it means that you
can scale and it keeps the proportion. I want to change the size from here. So I have to check the
constraint, click on this icon. So when I change. The width and height, it's
gonna keep the same proportion. 220. Let's zoom in. I don't like this number, so I'm
just going to uncheck this link. So I haven't changed it to 220. Set the corner radius for 18. Let's go to stroke,
change the thickness to 1. the X position is 12 and
the Y position is 38. Now, I will change the linear color. Add a third color. It's going to be around here,
the first color is 8 7 6 C F 5. It's 0%. The second color is 1 F D B
F A with the opacity of 60%. Third color change it to 8 7 6 C F 5. Change it to 36%. I think I will change, the
corner radius to 10 instead. All right. Now let's add the name. It's Sophie Fortune. Change the font to Lato. Let's use bold. 17. It's center. Let's align horizontal center
and the spacing between. The name and the user. This polygon 30. I'm just going to copy this text. Press on option. And drag. For example. sophie. Sophie . Change, The density
of this color too 25%. Font is white color and it's. 15. And the spacing between,
I will use 4 All right. For a notification,
let's create a section. I want to create a list like when this
user have new member on her group. Okay. Let's start with a rectangle. Let's add a frame. Let's go to the inspector to
change the size too 212 by 60. Add a title, new member. So the text is Lato regulay. It's going to be 15. Margin left is 16 and then
let's duplicate this texts. I will press on option and drag here. The text is going to be from the right. Margin right 16. I will change this text to see all. So let's go to the Inspector I will
change the density to 25% And for new member I will changed the density to 55%. So I'm going to add auto
layout for those texts. I I will add another frame. Let's go to inspector and change the size. It's 212 by 60. Add the corner radius to 5. Add fill. Use white and change the opacity to 30%. And use overlay like this. Now let's add a user avatar. Use the polygon. So let's go to the top left. Use a polygon Hold on shift
to create a perfect polygon. back to inspector, I will
change the dimension to 44. Six sides. Corner radius 12. From here, I will click on
fill and choose the image. I will use her. So I will add some outline. I mean use white. 100% and let's use overlay. It's going to be from center, 1 thickness. So the margin's gonna be 8 from the top
,8 from the bottom, 8 from the left. Add text. Okay. That's fine. Then press on return key to change row. Write Five minutes ago. And then lest's select this line of text. Let's go back to inspector. Change the size for 13. Set the opacity to 25%. Set the line height to 50%. Back to layer section. Let's call this user profile. This let's call Label. Okay. I will select those 2 together
and then add auto layout. It's align center for me
and space between I want 8. Let's call it title. For this layer just leave as frame. Select those two together then
we will add an auto layout. Let's use spacing 8. Call it new member and this
frame let's duplicate 3 time. Press on command D 1 2 3. Title, I will add a padding inside. It's going to be 8 from top and
bottom So like the fav new member. Set the margin top two 20. From here, you can change the image,
change the name and change a time. Then What you can do is duplicate
this section and drag here. Spacing, it's going to be 20. And Change this text for Recent activity. activity. Text alignment from the left to save time. I'm just going to search from the assets. For you guys, you have to change the
image, change the text, change the time. For me, I'm just going to search
from my assets to save time. Can you see me? CBT two. All right. Member too. Yes. All right, I'm just going
to delete, but I don't need. So in change G odder. This same thing here. Just did it. But I don't. Oh, all right. All right guys. We are done. Congratulations for those
who follow until the end. So what we can do is close. Going to clip content and back here. Select container and check clip content. Like this. And for the Daccord I will
click on check clip content. All right Congratulation everyone for those who
follow this tutorial until the end. I hope that you learn
something new and useful. Thank you very much for watching
and I'll see you on my next video. Bye!
