Hi guys. Welcome back to design+Code. This is Sourasith. I'm here for another step-by-step course. So today we're going to do a
social media app design together. And if you liked the video. Don't forget to like and subscribe. So let's do it. Before we get started. We will talk about tips and resources. Many of you asked me for advice,
what are the tips for the beginner to have inspiration and how to
create a design effortlessly. First, listen to the music. It's helped me a lot to have imagination. you need the imagination to be creative. Find the idea for your app design. So go to Google and do some research. Go to this web site. so my idea is social media. My inspiration is Instagram. I think that everybody knows. Instagram. of course, except for my parents. Every time I go on. I think that design is basic and I got the
idea to make a new design with you guys. So when you find your
idea, you need a reference. Of the real app, So open Instagram. Observe it and study it. Go to dribble, and look for inspiration. Chooses a style for your design. Do you want to do light
mode or dark mode?. Glassmorphism, Claymorphism Neumorphism. There are a lot of style
that you can explore. Choose a theme for you design. My theme is Candy floss. I know it's ridiculous to have a
craving and make it a inspiration, but sometimes small idea can be a big idea. Let's see my previous design. Let's take the Neon UI Design. I think that all of you know, that
my inspiration, was the neon glow stick that we use during the party. It was during the look down, I
did not go out for a long time. I was listening to the music
and the idea came to my mind. You can see the small idea
can make a beautiful design. Now we're going to talk about resources. So go to the Figma community. Go to plugins we will use an image from Unsplash. So we save much time by
finding the perfect image. So, install it. So for today, I will use a
huge Icon from Halal Lab. And Iconly We need the iOS 15 UI Kit. So tape Joey bank. Click on the creator. And this is the one iOS 15 UI Kit. Duplicate. And voila. So the last thing that we need is. We're going to use Poppins Font. So download it, but you are
supposed to have it in Figma. So I think that we have everything. So we are. Ready to get started. Okay, this is an Instagram profile page. This is going to be our guide. So let's do the profile screen. Use iPhone 13, 13 pro one frame Put 50 on the corner radius, Use rectangle. We're going to draw a rectangle. The dimension is 390 and 240. Right-click go to plugins
and click on Unsplash. Go to colourful and choose your image. I'm going to choose this one. We're going to draw another rectangle. The dimension is 390. 650 Align bottom Put 50
on the corner radius. So this is my colour palette. I'm going to choose this light
blue Name your layer by background. I'm going to select the two rectangles
and we're going to put them in a group. Name it Background We're going
to draw another rectangle. The dimension is 390 and 398 Align bottom. we're going to put 50 on the
corner radius and choose the color white We're going to add drops. Go to Effect drop shadow. It's going to be negative four 20. Choose the color black. It's going to be 5% Name your layer by the base. Use Again, rectangle. The dimension is. 211 and 200. Go to the independent corner. and put 40 on the top left corner radius. . Okay. Use again, rectangle. The dimension is 149 9and 95
go to the independent corner, Put 40 on the top right corner. So I'm going to duplicate the
second rectangle doesn't have a corner radios, so it's going to be zero. and make sure the spacing is 10. If you want to know, just
click option on your keyboard. So use rectangle again. The dimension is 115 and 168. Go to an independent corner and put
40 on the bottom left corner radio. And the spacing is going to be 10. Perfect. use again, rectangle. the dimension is. 118 and 168. Make sure the spacing is 10
Let's do the last rectangle. The dimension is 117. And 168, you're going to go to
independent corner and put 50 on the bottom right corner radius and
make sure the spacing number is 10. Now we'll be going to fill
it with beautiful image. So Select the rectangle right click
and go to plugins and select unsplash. Now choose your image. Okay Select all the photos
we gonna put them in a group. Name the layer by photo. Select the photo layer and the
base layer and put them in a frame. Name the layer by cards. Now let's go to the next step. We're going to do the avatar. So use elipse draw a circle The
dimension is 100 and 100. Choose the color white. We're going to draw a smaller circle. The dimension in 90. And 90. Place it in the center. Select the two circles,
put them in a group. name it by Avatar. I go to Unsplash Avatar
and I choose this image. Put the image in the avata group. Select the smallest
circle and use as a mask. So write a random number of follower. Click on enter on your
keyboard and white follower. So click on Auto height and texts align center. Select the number. And we're going to use Poppins Font. Choose bold and the
size is going to be 15. And select follower. well. Select popping again. And the dimension is going to be 13. So duplicate. Change a number. And change the text to following. so we gonna select both. You're going to add an auto layout. Select The two frame and
add another auto layout. we're going to change the number
of spacing between items to 160. And put it in a center. Now we gonna add a name. choose bold the size is going to be 15. Choose auto witdh. We going to put it in a center. We're going to add drop shadow. Go to effect and select drop shadow. It's going to be 10. And 20. Choose the same colour. And reduce the opacity to 50. Percent. Select the message button. Go to affect drop shadow. use the black colour. It's going to be 10 and 20. Now we're going to name the layer. Select the message button
in the follow button. We're going to add an auto layout. Name the layer by Button. Go to the spacing between items. We're going to put 20. And put it. And the center. Now we're going to. write. All. Choose regular. Choose auto width. Draw rectangle. The dimension is 15. And 3. Put 2 on the corner. I'm going to choose this color. This is the same color that I
choose for my description text. So I'm going to select my text
and the rectangle together. We're going to add an auto layout. Go to alignment and padding. put. It and the center. duplicate 2 more We going to change the text. To. Photo. And video. Name the layer. We are going to hide a rectangle. Now I'm going to select video,photo and
all, We're going to add an auto layout. we're going to put 13. On this spacing between items. Put in the center. Now we're going to select everything. Except. The avatar. We're going to add an auto layout. Go to alignment and padding
and put in the center. So we are going to change the number
of spacing between items to 15 and we are going to places it. Now the last step, we are going
to create two buttons, ; there's going to be the top navigation. First, I'm going to
name the layer by cards. So we need an arrow left icon and message. icon, so I'm going to select the icon. I'm going to add an auto layout. I'm going to keep the dimension like this. So 44 and 44 go to fill. We"re going to choose the
same colour as the background. We're going to put 50
on the corner radius. So we are going to duplicate, we are going
to change the icon and delete this one, we are going to select the two icons. We are going to add another auto layout. We're going to bring it there. So the number of spacing between
items is going to be 270. Put it in the center t So we are
all done with the profile page. now let's go to the next step. We're going to create a home. screen. I have this. Homes. Screen from my Instagram. and this is going to be, the
reference Use again, iPhone 13 Pro Put 50 on the corner radius. So we are going to add a status bar. and people are not able to go to an asset. So I'm going to show you
how to take it manually. It's very easy. Just find the status bar. So we'll need The home indicator after. just click on COMMAND C And go
back to your Design COMMAND+V voila Again, just copy and command+V
if is it working go-to asset Team libraries And find the iOS 15 UI kit. Click on it. And go to search home indicator and
status bar I'm going to put it in my frame Align top And align horizontal center. I don't like it. What I'm going to do, I'm
going to select the notch. I'm going to hide it. Perfect. Okay, now we're going to do. Uh, top navigation. We need a camera, icon and notification. Okay. Select the icons and add auto layout
So SHIFT a or right Click on add auto layout Go to fill You gonna use the same
light blue this one Control C to have the eyedrop Put 50 on the corner radius. You're going to change the dimension
Is going to be 44 and 44 Go to aligment and pading click on the
center Duplicate Change The icon and Delete the old icon Okay. Name you layer. Camera button notification
button So we are going to write. Explore in the middle of the
two So choose Poppins Font. The size is going to be 20. Choose. —auto width. Now we're going to select
the text and the two buttons. We're going to put in an auto layout. Go to Alignment and padding. Put it in the center. And. We're going to put 105 on
the spacing between items. I want my spacing to be 10. Use. Ellipse. The dimension is. 70 and 70. choose the colour white. Add stroke. We're going to use this blue. So change the number one to two. Now we are going to draw another
circle, a smaller circle. The dimension is 60 and 60. We are going to put it
on top of the other. Circle. Select Both. Group them. Name the layer by Avatar. Select the smallest circle,
right-click go to plugins. Go to Unsplash. I don't like it. Because it's select randomly
for you, and you cannot choose. I'm going to with. Unsplash. And go to the portrait. So, I'm going to select
a girl looks like her. I don't know. I'm just going to take her. Okay. And We need the plus button, So
bring the icon inside the group. Put it in the center. We are going to change the color. Go to selection Color. Detach style choose the color white. Now we're going to create a frame. So click on F on your keyboard. And the size is going to be 70. 20. Place it below the group. Okay. And like this, and you're
going to align with the avatar, When you see the red line. So it's good. is a good sign. So we're going to write. Make sure that the text
is inside the frame. You gonna change the size to 13.. Choose auto heidht. And now put it in the center. Select the text and the avatar. You going to create a new frame. I Duplicate 4 mores okay. Okay. Now we have to change the
image, the text and the name. So we're going to hide the plus button clicks on the eye. We're going to select each frame. And we're going to add an auto layout. I want to use an auto layout. To do my spacing. We gonna put 20 on the
space in between items. I want my spacing to be 10. So I have to move on the left 1, 2, 3. The spacing on top is going to be 20. we're going to name the layer
by stories you can name the layer by the name of the person. Draw a rectangle. The dimension is 370. And 338 Put in a center. We're going to put 40
on the corner radius. We are going to choose a light blue. We're going to draw a rectangle. We're going to put 30. On the corner radius I want m
y spacing to be 10 So voila! .
click on option. If you want to see the spacing. now, right. Click go to plugins. And go to Unsplash. And find your. Beautiful image. okay. I'm going to take this one. So, this is perfect. I can be going to create a frame. Click on F. The size is going to be. 350. And 47. So align with the smaller rectangle. So it have to fit. at the bottom. Go to fill. Choose the color black. We're going to put 30% .
You're going to add
effect Background blur. Is 20 go on independent in the corner. You gonna put 20 on
the bottom right corner. And 20. On the bottom left corner. Create an avatar and add a name. Use ellipse. The dimension is gonna be 40 and 40. Choose the colour white. Draw a smaller circle. 36 and 36. Put on the to. We're going to group them together. Name the layer by Avatar Select the smaller
circle and go to plugins. And Unsplash and find a person
We're going to write a name. And I nickname. Click on auto height. Select The nickname. Choose regular. We are going to use this
colour for the text. Select the text. Go to the fixed size. Change the height number to 40. I'm going to align with my avatar. And then I'm going to select the
text and the avatar together. Add auto layout. And the number of spacing is 10. Put it in the center. Click OPTION to see the spacing. And I want it to be 10 on top. And 10 at the bottom.. And for the left is going to be 20. So now we're going to select everything. Put them in a frame. Name by cards. So duplicate We got to change the photo. The name and the image. I'm going to click my frame. Um, unclip content. For you to see. So let's change it. It. So, but fail me. Change a number randomly. I think it's too close. So I'm gonna. change the spacing. to 20 instead. Now, let's do a tab bar. Draw rectangle. The size is 390. And 90. Go to an independent corner Put 50. On the bottom left. And right corner radius. Go to edit the object. We're going to add three points like this. So like the middle point
and drop the point down. So I'm going to move. These two points. So I'm going to put 30 on the corner radius. Of the two other points. Go to edit again, and click on bend tool. Click on the middle point. So I'm going to move. So play with the point. We're going to draw a circle. The dimension is 68 and 68. Place it in the middle. So I'm going to modify again. so just play with the bend tool. I'm going to name the layer by background. I'm going to choose this. Blue. And I'm gonna put 60. I'm going to add stroke. linear. 15. On top. And at the bottom is going to be zero. for the circle is going to be white. What is the opacity to 60 Add stroke. linear, On the top is going to be. 15. At the bottom is going to be zero. Yeah. We're going to start with the plus button. choose the same plus icon. That I have here. Change the icon colour to this dark blue. Select the icon and the circle. Put them in a group. Name it by Plus button. So we need home icon, chat
icon, plus icons , profile icons and notification icon. We going to add an auto
layout to each icon. Put them in the center. You're going to put 30
on the spacing between. item. Name your layer by icon. Now we need home indicator. Okay. So we're going to put. The icon. With the top of the background. Okay. And for the whole means you get there. It's going to be. Bhutan on the background. Oh, I'm going to move. And now. PG, it's adding Baton of the background. And now you can see they have two plus. So you're going to go to icon. Well, and the reason why you have
all, we have to name your labor because you have to find it. So like the plus. And click on the, I. So click on the icon. Go. To civic, tion color. Change is too white. And for the home indicator. And I did that Stein. You're going to change the color to white. So I'm going to select everything. I'm going to put in the frame. And name. That bar. So click on. Allyn bottom click on the center. And some things wrong
because I forget to add. Background bills. Like the background. Let's FX. Background blur. 100. For the button click. The circle. Effect background, bro. And there'd be 20. You're going to bring the homemade ticket. And put it. On top Okay, make sure it's any. And in the center. Click the icon, put it in a center. And Bella. And now. Again, see that they
have a problem with the. We just started BARR. Let's me go back to the Figma file. Oh, so. So they have a problem. I don't know. I think that. He have to fix it. So what we gonna do? That's my name. So. Okay, I'm going to click on neon. Duplicate. So go to design. I need to bar. So I just going to click on it. And come and see. You're going to take
this that's about from. On my page. And then did it do Swan. Change the color go. Exxon color. Put it. Black good to end the center and adding up. And one of the all done. With the home, the page,
let's do the chat room. So choose iPhone 13 / 13 Pro frame. Put 50 on the corner radius, Right
Click, go to plugins, go to Unsplash and choose a similarly colourful image
as your background from the profile page. So it looks alike the
background that I choose. On my profile. Hi, Paige. Draw a rectangle. The dimension is 390 and 780. Put 50 on the corner radius. Choose the colour white. Reduce the opacity to 30% go to effect. Add background blur 100. You're going to draw another rectangle. Put 45 on the corner radius. The spacing is going to be 10. The colour. Going to choose the same. Light blue. We are going to create an avatar. Use elipse. The dimension is 44 to 44. Right Click goes to plugins. Go to Unsplash and choose a random person. Now we're going to write a random name and
time that this person has been connected. Choose auto height, so select the name. Change the size to 17. And semi bold and for this one is. Is 15. And we're going to choose
this colour for the text. Okay, go to fix the size. Change a dimension to fifties. I'm going to select the
avatar and the text. Add an auto layout. Go to alignment and padding,
and put it in a center. And the spacing is going to be 10. So we need an exit icon. Add auto layout. We're going to keep the size. 44 and 44. go to fill. And chooses this blue colour. Put 50 on the corner radius. Go to selection colour. Gonna change. Choose a White colour. We going to do a separator. So use rectangle The dimension is. 340 and 1. Choose the colour the black. We're going to reduce the opacity to 15. Select the exit button and the profile. Add another auto layout. And then. So with the separator and a nod. Totally out the spacing is going to be 20. And now select. Open the frame. So like this, this frame. You going to put. I'm going to change a dimension. Okay. 100 just to see. Let me see. Um, can now. Lucky. So book one on dread on the
space in between it, then. So the spacing is going to meet Ella and. In the van and 20. click on the frame, click on this frame. We're going to change this number of
spacing between them to 102 because I want my spacing to be 10 instead of 11. we're going to select this frame
and this rectangle is, is your base. Okay. rename the layer by base. Select both right-click and
frame selection, name it by card. And for this rectangle is
going to be background. Select your frame and put it and click
on adding, always on that center. Now we're going to click on
option on the keyboard and now the space in between is 10 and 20. So now we're going to
create a conversation. But before we going to add status bar
and home indicator, just take this one. Just copy. Do I duplicate. And we're going to take this same on
it, but begin to change the color. To black. Write a random conversation. the size is 15. Just regular. .
Okay. Choose or the wage. And now you're going
to add an auto layout. the height it's going to be 50 and, uh,
whidht depend on how long your text is. Okay. The height will be 50. And the width depends on
the land of your texts. Okay, go to fill. Choose the colour white. put 30 on the corner radius. go-to alignment and padding. And put it in the center. And you put 10 on the
spacing between items. So go to the independent corner. You're going to put 30 everywhere
except the bottom left corner. Radius. So duplicate. So now we're gonna put back 20. On the bottom left corner
and we're going to put zero. On the bottom right corner. Going to choose the same. Blue color. You're going to change the color to white. For the text. Duplicate again. And after we're going
to change, it thinks. Okay, now let's change the text. You're going to put an M. Whoa. Okay. So now We are going to
do the spacing manually. Okay. The spacing on the side is 10. And the spacing between
the conversation is 20. Okay, now we need the camera con and the
sent icon, I'm going to draw a circle. The dimension is 44 and 44. Use the same colour. So bring. Your icon. Put it on top of the circle. Select the icon and the circle. We're going to put them in a group. We're going to name it the camera button. Go to selection colour and
change to white colour. Duplicate. Change the icon. Put it in the center. Go to selection colour. Choose the colour. White. We are going to draw a rectangle. the size is 280 and 44. Put the corner radius to 30 Okay. Don't forget to name your layer. But the rectangle on the
bottom of the sent button. Choose the color white. Now we're going to place this manually. The spacing on the side is 10 now again. So we're going to select. The rectangle and the
sent button together. And the spacing is 10. So we are done for today. So congratulations guys
on your new design. And I hope that you liked the video. So see you in another
tutorial bye-bye guys. Have a good day.
