hi, everyone. Welcome back to designCode. My name is Sourasith. I'm back for another course. Today, we're going to
create a wallet app design. So are you ready? Let's do it This is the design that we will create
together a colourful and glowing wallet app design using flat style and dark mode
This design took me an hour and a half For simplicity. I decided to create a component
page for you to use instead of sharing all my ressource. So what we need for today is
all on the component page. Today, we're going to use poppins font. For, my avatar. I use plugins. Unsplash That's it. So we already let's do it. Click on F. choose iPhone 13 and 13 Pro frame. Pro frame Put 50. on the corner radius. Fill the background
with a dark blue colour. I'm going to choose this colour. Click on Control. C. To have the eye drop. Add a status bar. So make sure to align the
horizontal center and align top . Let's create an avatar. So draw a circle. Click on. O. The dimension is going to be. 44 and 44. Fill with an image. I'm going to use an image from Unsplash. So plugins. Click on Unsplash. I'm going to select the first image. Add stroke. Select outside. And three. Pixel. You're going to fill with. A colourful gradient. So this is my colour palette. I'm going to select this colour color. For the bottom, i'm going with this blue. So I'm going to place my colour diagonal. Okay. Now let's write. Welcome back. change the font so I'm
going to choose poppins. Select medium. And the size is 15 select text align left. Okay Click on enter. And write. A name. Select the name. We're going to change to regular and
we're going to change the size to. 13. I'm going to change the text color. to this. Light blue. And I'm going to select welcome back. I'm going to reduce the opacity to 87%. And I'm going to select the text
and I'm going to choose auto height Now,we're going to do the spacing. The spacing is going to be 10. Did you see the red line? So because we add stroke
of 3 pixels outside. From the Avatar. So the spacing must be 13. And now add. Notification icon and menu icon. Select the icons. And add an auto layout. So right. Click. Add auto layout or for the
shortcut click on SHIFT + A. And the spacing is going to be 10. Okay, now I'm going to select. My avatar. And my text. I'm going to add an auto layout. So you can see the spacing that we did. is 13 Okay, now I'm going to select this. Frame. And the frame with the icons. And we're going to add an auto layout. Click on center alignment. And click on align horizontal center. So we're going to change the number
of the spacing between items to 118. So click on the option. To see this spacing. Is 15. And now we go to. Do the spacing between the status bar. So this spacing is going to be 20. Select rectangle. Draw a rectangle with the dimension of. 390. And 798. We're going to use an ellipse to draw
a circle with the dimension of 259 and 259. I'm going to change the colour. I'm going to change the colour so
we can see the red lines better, So I'm going to place it Center. Can you see the two-line? Vertical and horizontal. So I'm going to place my circle. Like this. Then. Select the circle and the rectangle. Go to boolean groups. Go to Subtract selection. So now I have my shape. Put inside my frame. So you can unclip content. To see the rest. So select the subtract shape. Right. Click and click on flatten. So now it's become one shape. And one layer. So I'm going to fill with a lighter blue. Control C. So, this blue is lighter
than the background. We're going to add stroke. Choose linear. The color is going to be white. I'm going to place my colour like this. I'm going to reduce the opacity to 50%. Go to blend mode and choose overlay. I like to use overlay
because it blend very well. with the background. Okay. You go to the Y position. And the position is going to be to 226. Use rectangle. Draw a rectangle. With the dimension of 350. And 80. click on align horizontal center. Put 50 on the corner radius. So we're going to fill with the
same color as the background. So click on control. C We're going to add stroke. Choose linear. It's going to be the color white. Go to blend mode. I'm going to select overlay. Okay, I'm going to
place my color diagonal. Okay, I'm going to reduce
the opacity to 50%. I'm going to change it to 80%. Okay, now I need icon. I'm going to go back to
my componen Click on T. So write Amazon. Make sure. To choose poppins font. The size is going to be 15. Choose medium. I'm going to reduce the opacity to 87. Now click on center on your key bar. And write. A date. Select the date. Choose regular. And the size is going to be 13. I'm going to take my secondary color. Make sure to select text Align left and we are going to choose auto height oh, Click on the option. Move 2 pixels .
Select the text and the icon. And add an auto layout. Click on center alignment. And the Spacing. Is 10. So I'm going to move
one pixel on the left. Okay. Now the spacing between the rectangle is. 16. Now let's add amount Click on T. I select auto width
Reduce the opacity to 87. And then we going to change the dimension. It's going to be. 90 And. 44. So I'm going to add a stroke. Select the colour white Go
back to the corner radius. we're going to put 20. Go to center. alignment Go to blend mode. And I'm going to choose overlay. so I'm going to select. The amount and, the other frame. I'm Going to add an auto layout
go to the spacing between. and change the number to 83
Click on center aligment voilà. Okay, don't forget to name you layer. the rectangle I'm going to call it
base So Select the frame and the base. We're going to add a frame So right
Click And click On frame selection So duplicate five more And the spacing I
want it to be 20 Now write a title. The size is going to be 17. Choose semibold And select auto witdh We're going
to reduce the opacity to 87 So now. What you have to do. Is to change. the icons And change. The text, the date and amount. okay. Now clique on the frame. And And click content So select all the
frames And the text and the base. Put them in a frame call it. Cards Use ellipse. Draw a circle of 200 and 200
Draw a smaller circle we're going to change the colour for
you to see what I'm going to do. So the dimension is 143 and 143 you're going to put. at the center. So you've to stop when
you see the red line. Um, I'm going to change the colour, Okay. So when you see. the red lines So it means
that you are in the center. Okay. Select The two circles go-to substrate
selection Right Click And click on flatten Go to fill Choose linear Let
me see the color So put 100 on the opacity I'm going to play my color. Like this. And then name. The layer by base So
I'm going to duplicate. So this one is going to be use as use. Line. Click on L. Draw a line of. 30 Pixel. And we're going to change. The witdh To 93. Okay. Go here. And select round We're going to rotate the line, so put -34 Go to edit Add. a point. click on Bend tool And click on the point. And drag it down. I'm going to change the number of
the height to 15 click On the mask And click use as mask So now my line. Is inside. The shape. I'm going to add a
colorful gradient color. I'm going to select this
color and this color. .
Duplicate The same line We're going
to change the number rotation. To 27. Your shape. We're going to change the number of
the width 102 Change the color. I So duplicate the line
Make sure it's at the bottom. And we changed a number
of the rotation to 87. So we're going to change the
number of the witdh To 80 I'm going to change the color. So instead of the blue. I Choose this color Okay It's better Voila Okay. Now we gonna put the line. And the shape in a group So click
On command Plus G Or you can right click and click on group selection. I'm going to name it. Now I want to add some glow So
I'm going to duplicate three line. The glow group must be
below the balance groups. So we're going to place the glow group. Between the two shape below the mask. And I think it's too lights. I'm going to reduce the
opacity For the purple color. I'm going to keep To 100 But for
the other I'm going to reduce to 50. Select the base. We're going to add a stroke. Choose the colour white. Select outside. Reduce the opacity to 15%. Choose auto width. And the size is going to be 20. . The size is going to be 13. Um, Choose auto width. Choose regular. I'm going to choose the. secondary colour. .
.
So it's Biggers. So I'm going to select San Francisco
pro display just for the number. Select the texts and numbers. We're going to add an auto layout. Click on center alignment And the
spacing between is going to be. Zero. Select the frame and the group. Right Click. We gonna put in a frame. .
.
.
Select the frame. And click on align horizontal let's go to the component page. And we're going to select this Tab bar. And bring it inside the frame. We're going to select align horizontal
center We are done with the first screen. So let's go to the next step. So let's create The second screen. Click on F. Choose iPhone 13 Pro. Frame. Put 50 on the corner radius. I'm going to choose—the same
dark blue for my background. So I'm going to. Duplicate my status bar. .
So I'm going to hide this. I'm going to write wallet. This is my title. Select Poppins Font. The size is 20. Choose bold. Choose auto width. Reduce the opacity to 87%. Click on align horizontal center. Now I need an icon. Go back to the component. So I need an arrow icon and then menu icon. So bring it. So the. Select the two icons and the text. Add an auto layout. Center alignment. And I'm going to change
the spacing between item. to 118. Again, click align horizontal center. Click On option. . So the spacing between
items is going to be 20. And now let's do the spacing
between the status bar. It's going to be 20. Well, We're going to add, some highlights on the background Click on O to Use an ellipse. Draw a circle. The dimensions it's going to 300 and 300. And I'm going to select this light blue. I'm going to reduce the opacity to 30. We're going to add effect. Layer blur to 100. Put it in the corner. I'm going to call my
layer by Top Navigation. So I'm going to select ellipse. I'm going to put in a group And
name it by BG for background. And then place it below. We going to do a slide. Use. Rectangle. The dimension is 350. and 3. Put 1 in the corner radius. Align horizontal center. Click on option . So the spacing is 20. We going to fill with the color white
and we going to reduce the to 50%. Name the layer by base. Go back to fill. Go to blend mode and choose overlay to blend. With the background. Duplicate. And name by slide left. We're going to change the color. To this light blue Go back to blend mode and
we"re going to choose normal. Duplicate the slide. Select, The below layer. Name by glow. We're going to reduce the capacity
to 60% We're going to add effect. Layer blur and the
number is going to be 10. select the slide and the glow. Put them in a group. Click on Command+G. And name the layer by slide left. Select the slide left group and
the base and put them in a group. And named the layer by cards. And account. Write Cards and Account on top the slide. .
Choose auto width. Change to medium. And the size is 15. Reduce the opacity to 87%. Duplicate the text and change to account. Change the color to the secondary color. Select account and cards. Add auto layout. So Click on SHIFT+A. I'm going to put. 100. On this spacing between items. And now we are going to click
on align horizontal center. So make sure that the text is inside
the cards and the sccount group. Okay. So the spacing is going to be 10
between the slide and the title. Select the group. The spacing between The title
and the slides going to be 30. we need a bank cards. That you can find in Figma community. But I'm going to choose mine so
I'm going to go to component. So I'm going to select this card first. Align horizontal center. Click on Option. The spacing is going to be 20. And for here is going to be 30. I'm going to name the layer
by credit card number one. And now I'm going to
select the second cards. put it smaller. So click on. K When you resize to
keep the same porpotion. And the number of width Must be so
the spacing is supposed to be 40. Let's try it. Click on Option to see the spacing. So name by credit card. Number two. And put it Below the credit card. Number one. We are going to do the same thing. We're gonna resize this
third card put it's Smaller. so the number must be 270. So the spacing between the
frame is supposed to be 60. Let me try it. .
Name by credit card number 3. Put it below. Put behind the second cards. Like this. Now, select the 3 cards. Right. Click and click on frame selection. And name the layer by cards. Now, let's see the
spacing between the slide. .
Add dots. So I'm going to go to assets. Put in the center. So I forget to put that and my
components I'm going to do it right now. So I don't want to forget. So now you can use it. So I'm going to select the first dot. Change to this light blue. for the rest, we're going to. change the color to white. Again, the spacing is going to be 30. Okay, now we need glass
icon, go to component page. Okay. Now select the menu. We're going to do the spacing
between the dots is going to be 30. We're going to create an add more cards. select rectangle. Okay. I'm just going to select my frame
and I'm going to click clip content. After that I'm going to unclip content. The dimension is. 250. And. 378. Put it in the center. The spacing between the menu is 30. Put 30 on the corner radius. You're going to fill it
with the color white. Reduce the opacity to 30% Go to blend mode. And choose overlay. Add effect. Background blur, And it's gonna be 100. We going to add. stroke. Choose a color white. Reduce the opacity to 50. And again, I'm going to choose overlay. Select rectangle. And draw a rectangle. The dimension is going to be. 310. And 44. Put it in the center. Put 15 on the corner radius. We're going to fill With the dark blue. We are going to reduce the opacity to 50%. We're going to add stroke. Choose the color white. Choose overlay. And reduce the capacity to 60. .
' I'm going to zoom it
Inside, we gonna write. Part numbers. Select auto width. So the size is going to be 13. Choose Regular. For the Color text. We're going to choose the secondary color. So select the texts and the rectangle. And put them in a group. And then name the layer. Click on the texts again Click
on align horizontal center. And vertical center. And I want my spacing to be 10. Click on the option to see the numbers. Okay. You know what? It's going to be 8. So the spacing is 8, 8, 8. Duplicate the group. The spacing is going to be 10. .
Yeah. So we're going to change
the number of the width. Reduce the width. so the, number is 160. I'm going to duplicate. Change the number to 140. Let's create the next button. So I'm going to duplicate. The security code. I'm going to put it. In the center. The spacing is going to be 30. Change my text to next .
Click on align horizontal
and vertical center. Medium. Change to the Color white. Reduce the capacity to 87% now. I'm going to fill with colorful
gradient, but before that, Go back to blend mode and choose normal and put the opacity to 100. Select linear. Select this. Blue color. And this blue color. I'm going to place like this. Now I have to rename all my layer. So surname. Everything. And move down. I want the spacing to be. 20. from the bottom. Perfect. So I need the plus icon. .
Select auto width. The size is going to be 20. Choose bold. Click ENTER on your keyboard. Change the size to 15. Choose regular. .
So select text-align left. and then I'm going to select
the text and the icon. we're going to add an auto layout. So top left alignment. And this spacing is going to be 10. Click on option. I want my spacing. Between the frame is 20. .
from the top. I want my spacing to be 30. So the spacing. It's going to be 30 Now I'm going to select my next
button I want to see the spacing. Okay. So I have to change The size of my cards. So the rectangle, we're
going to name it by base. .
. Select the base, right. Click and click on frame selection. Name it by cards and put
everything inside the frame. the frame and click on click content. We are done with the second screen. Now let's go to the next step, This is the last part. We're going to create The statistic page. I'm going to select the
iPhone 13 pro frame. Put 50. on the corner radius. This time, I'm going to
select a lighter blue colour. .
Add status bar. I need the arrow icon. I'm going to take the top
navigation From the second screen. The spacing is going to be. 20. Put it in the center. Select the menu. I'm going to delete it. I don't need it anymore. Go back to that navigation and we going
to change the number of the spacing between items is going to be 10. And we're going to change the title .
. .
So draw a rectangle. The dimension is 350. And 44. Select align horizontal center. The spacing is going to be 30. The spacing is going to be 20. Put 15 on the corner radius. filll with this. dark Blue. Name by base. I'm going to hide the other screens. Duplicate the base we're going to change. The number of the, which. 116. Select he second screen. And unclip content. I'm going to copy. The Same colour gradient so right. Click and go to. Copy properties. And select my rectangle, right click. and past propreties So now I'm going to click content I am going to choose medium
and the size is going to be. 15. Yes. reduce the opacity to 87% select the text and the base. Click on command G. Don't forget to click on auto width. Now, put it in the center. So I'm going to duplicate. .
.
So remove the base. Select the text. Select the secondary color. Delete the base. Change the text to month. We're going to select. The same color. Select the text again. I'm going to choose regular. Select Year,Month ,Week and the base. Put them in a group. And named the layer by. By slide Select Weak. The base. We're going to add glow. Duplicate. Reduce the opacity to 50% remove stroke. Add effect. Layer Blur. And it's going to be 10. And make sure the glow layer is
below the base Use rectangle again. And the dimension is going to be 390. And. 552. Go to independent corner. I'm going to select this dark blue. And I'm going to reduce
the opacity to 60%. We're going to add Stroke. Choose the color white. We're going to reduce opacity to 50. I'm going to choose overlay. We going to change the
text to income and Outcome. I'm gonna take the slide left. I'm going to change to slide right. .
.
Change the text color to white. Reduce the opacity to 87%. Select Income. And select regular. And choose the secondary color. Rename the layer by Income and outcome. Okay. Let's do The dashboard The number in the rotation
must be negative 90. The number is gonna be 260
Select the color white. Choose overlay. Reduce the opacity to 50%. Go to advanced stroke settings. Choose dash. .
And tap. Four. Six more. Select the seven. Line. Add auto layout. Click on Shift+A. On vertical center. And the spacing between items is 50. Right. Click. And click on flatten. So now all the lines
is become in one layer. use ellipse. And the size is going to be six and six. So place. The point on the line. Now select pen. now select bend tool
and click on each point. I'm going to change the color to this. Light blue. And the pixel. I'm going to change to two. So make sure that the
wave is inside the frame. The curve is not perfect. What we have to do is
to play with the toll. . Click on the wave. Go to fill choose linear. So we're going to choose
again, this light blue. So the number at the bottom. It's going to be zero. .
.
.
.
Select the mask layer. Right-click. Click on use as mask. So now the line inside the shape,
Select the line, the mask and the wave. We gonna put them in a group. Name it by dashboard. Now click on T. So the size is going to be 13. Choose regular. Choose auto width. Select all the date. Add in an auto layout.. The spacing between
items is going to be 25. click on align horizontal center. .
I'm going to select saturday. Choose Medium. And we're going to select this light blue. Draw another rectangle. The size is going to be. 350. And 80 Put 30 on the corner radius. Put it in the center. Fill with the color white. reduce the opacity to 20. Choose overlay. We going to add stroke. Choose the color white. Reduce the opacity to 50. Again, I'm going to choose. Overlay Add effect.Background blur. the number is going to be 60. Now. Inside we gonna to write a text. Regular. Select auto height. Select the text and the rectangle. . Put it in the center. .
Choose auto width and the size is to big. I'm going to change it to 15. I'm going to select this secondary color. Now I'm going to add a amount. Select auto width. And the size is going to be 20. .
the spacing is going to be zero. And now I'm going to create like
a bubble . Draw a rectangle. So the size is going to be 74 and 46. Go to edit. . Select these two points. Move up. Select the two points. Move up. The tree. We're going to put. I'm going to put tree. You're gonna fill with the color white. Choose overlay. Reduce the capacity to 20. You gonna add stroke. Choose the color white and choose overlay. Reduce the opacity to 50%. Okay. I'm not gonna add background blur. It's unnecessary. We're going to create a frame, Whoops. Choose or the weight. The site is going to be Turkey. And put it in the center. Select the frame and a rectangle. Add in another frame. Name by bubble. And now we gonna align with this line. Okay. The last step, we're going to add the
tab bar, we're going to select this one. .
So select the week name
the layer by week. I want the space in
between the tab bar is 20. so we are done for today. Congratulations for your new design. So, thank you so much for watching. I hope that you like the video. If you like it. Don't forget to Like and subscribe. See you next time. Bye.
