Design a simple UI from scratch for a Food App in Figma - For beginners

In Web design

Design a simple UI from scratch for a Food App in Figma - For beginners - read the full article about Figma, Web design and from DesignCode on Qualified.One
Youtube Blogger

Hi everyone, this is Sourasith  from Design+Code team. Today, Im 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 lets 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, its free. Today, Im going to use this font. So you have to download SF Pro,  this is what Im 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 were gonna add status  bar. And then, home indicator. Im gonna add dots. Now, you need a title. Im 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.  Im going to use this one from Sally. Im 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. Were going to start with ellipse. And go with solid.  Im 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. Im gonna draw a blob. Im  gonna make it bigger because I want to use angular. And Im going to add  my four colors. Im going to put it 30. And again, I gonna put it in the back, like  this. Im going to create another blob. You can use a plugin in Figma but I like to  do my own. Make it bigger. Im 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 Im gonna add all these four colors. Im going to add effect, layer blur, youre  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.  Im going to have something more. Now that Ive 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, its an auto-layout. So you can a fill too  and the colors that Im 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 were going to add stroke.  Gonna take the color white. Go to linear. This one is going to be zero. This ones going  to be 16. Were gonna add, effects, drop shadow. Were gonna add another background blur, I  put it 60. So now what are you going to do is to duplicate. And Im gonna change the  color, black and put it 5%. And gonna change the color of my text. Im going to put  it 70%. You can add an icon like a lock. So you have to change the place, on you  left. Now Im going to duplicate again. Were gonna write email address. Change  it to regular. If you want to put an icon, find a mail. like this this one. I think Im going  to make it simple, Im not going to add icon. So I decided to keep it simple. So lets move  to the next step. Im going to add Sign Up. Im going to use San Francisco Pro Display, bold,  34. So align your text with all the labels. Were gonna create auto-layout, so shift+ A. So now its  an auto-layout but Im 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 Im going to do the same  thing, Im going to put into an auto-layout, shift+A. Youre going to select  everything and we gonna make it an auto-layout. Make sure that you select everything.  And then shift + A. Youre gonna fill like this, center. Now youre going  to put here 30 and left and a side, put it 16. The number Im going to put it 20.   Were going to put 30 on the corner radius. So now we need a tittle and some illustration. So  again, Im going to find it in Figma community, 3D food illustration. Okay. I dont have  a lot of choice, I only have two. And then Im 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 lets move to the  next step. Again, youre going to duplicate and remove everything except the status bar  and home indicator. And were gonna modify a little bit just to change the design. On this  third screen, Im going to add a food category. Im going to add another blob Im going to  use linear, Im going to add three colors. On this third screen, Im 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 Im going to do. Im 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. Im going to use San Francisco Display, 18, bold.  I select, Im 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. Im gonna go here and put  my text center. What Im going to do, Im going to select everything here and Im going to group them  together. So command+ G, Im 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 its better. So now Im gonna group them together and  dont 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 Im  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.

DesignCode: Design a simple UI from scratch for a Food App in Figma - For beginners - Web design