Hi everyone, this is Sourasith
from Design+Code team. Today, I'm going to show you how to create Easy
UI design, but before we get started, I want to wish you all a happy new year may
all you wish come true. So let's do it!
Before we get started, I just want to show
you some resources. If you want to find idea, I suggest you to go on this website. You can find
a lot of illustration, inspiration. I need you to download some template on this website, Apple
Design Ressouces, it's free. Today, I'm going to use this font. So you have to download SF Pro,
this is what I'm gonna use for today and Figma UI kit. You can have it for free. Today, I will use
Design+Code UI kit.
Okay, now that you have your frame, go to asset. And we're gonna add status
bar. And then, home indicator. I'm gonna add dots. Now, you need a title. I'm going to use San
Francisco Pro Display. And for the title, it must be 34. Now that you got your title,
you need a illustration. So go to Community, you can find a lot in Figma community.
I'm going to use this one from Sally. I'm going to take the first one. Okay. I used this
one because I need an illustration that showed that my service is fast. And I think this one
fits very well. You should keep your design simple but never let a blank page. I will go with blob
design and I will play with color gradients. We're going to start with ellipse. And go with solid.
I'm going to take this color, I already prepared all my colors. Go to effects, add layer blur and
put 200.
I have to put your background the back. Okay. I'm gonna draw a blob. I'm
gonna make it bigger because I want to use angular. And I'm going to add
my four colors. I'm going to put it 30. And again, I gonna put it in the back, like
this. I'm going to create another blob. You can use a plugin in Figma but I like to
do my own. Make it bigger. I'm gonna copy properties, the last blob that I did. Copy
properties and I paste properties like this. Add another blob, go to angular again,
and I'm gonna add all these four colors. I'm going to add effect, layer blur, you're
going to put all your blobs together, group together, and rename it Background.
Like this. I just want to put my frame, 30 on the corner radius, like this.
We
finished with the first screen. So you duplicate. Delete everything except the status bar and
the home indicator. I suggest you to move a little bit the design just to make it a
little bit different than the first one. If you see the point, you
have to make you shape bigger. So you not gonna see the point.
I'm going to have something more. Now that I've modified my second screen,
this screen is going to be the sign up page. Click on "T" to write your text,
San Francisco Pro Display... Text, sorry, 17, semi bold. Select the label and
click on shif+A to add an auto-layout. If you see this, it's an auto-layout.
So you can a fill too
and the colors that I'm going to add is this one. Put it the center, radius 30. And go here,
Alignment and padding. So place in the center. Okay, now we're going to add stroke.
Gonna take the color white. Go to linear. This one is going to be zero. This one's going
to be 16. We're gonna add, effects, drop shadow. We're gonna add another background blur, I
put it 60. So now what are you going to do is to duplicate. And I'm gonna change the
color, black and put it 5%. And gonna change the color of my text. I'm going to put
it 70%.
You can add an icon like a lock. So you have to change the place, on you
left. Now I'm going to duplicate again. We're gonna write email address. Change
it to regular. If you want to put an icon, find a mail. like this this one. I think I'm going
to make it simple, I'm not going to add icon. So I decided to keep it simple. So let's move
to the next step. I'm going to add Sign Up. I'm going to use San Francisco Pro Display, bold,
34. So align your text with all the labels.
We're gonna create auto-layout, so shift+ A. So now it's
an auto-layout but I'm not going to add a feel. Now you need a separator. Draw a line or
you can go to assets and find separator. Already have an account? Sign In. Take regular. Now I'm going to do the same
thing, I'm going to put into an auto-layout, shift+A. You're going to select
everything and we gonna make it an auto-layout. Make sure that you select everything.
And then shift + A. You're gonna fill like this, center. Now you're going
to put here 30 and left and a side, put it 16. The number I'm going to put it 20.
We're going to put 30 on the corner radius. So now we need a tittle and some illustration. So
again, I'm going to find it in Figma community, 3D food illustration. Okay. I don't have
a lot of choice, I only have two. And then I'm going to take this one. Okay, now I find my
illustration and I need a title for this. Order food at your door. Okay, now let's move to the
next step.
Again, you're going to duplicate and remove everything except the status bar
and home indicator. And we're gonna modify a little bit just to change the design. On this
third screen, I'm going to add a food category. I'm going to add another blob I'm going to
use linear, I'm going to add three colors. On this third screen, I'm going to add a
category of food so you need food photos. So I will take my personal photos. Draw a cube,
155 to 155 and put 10 on the corner radius. And what I'm going to do. I'm going to
copy properties on this sign up card. So go to image, choose your image. I have my
first photo so this category gonna be pasta. I'm going to use San Francisco Display, 18, bold.
I select, I'm going to put an auto-layout.Liar. Gonna add fill, color white, gonna put opacity
80%. Like this.
And I want my dimension of the label to be 127 to 24. I'm gonna go here and put
my text center. What I'm going to do, I'm going to select everything here and I'm going to group them
together. So command+ G, I'm going to rename my layer pasta. So, what are you going to do, I need
six category. So I have to duplicate five more. Now that I have my 6 category. Change the image
and change your text.
Okay now that you have all you category. Just to mention you that I put 10
on the corner of the . radius. So now I think it's better. So now I'm gonna group them together and
don't forget to change the name of your layers. Something missing on this screen and it is the
title. What you gonna do, you can duplicate this and just change the title. Categories. And I'm
going to add something. Go to asset and find search.
So we are done for today.
Thank you so much for watching, I hope this video is helpful.
See you next time guys.
