Hi, everyone, welcome back to Design+Code. My name is Sourasith, I'm back
with another design course. Today, we're going to design
this beautiful cab booking app from scratch in Figma. We're going to use Neumorphism style
with a mix of dark and light mode. To make the design more unique. We going to create a curved shape
for the layout, a different style for the button and a custom Tab Bar. To follow this course, you will need
the SF symbol browser pluggin in Figma, the iOS 16 UI kit for Figma by
Joey Banks, the Montserrat font from Google fonts and my Figma file so
you have the design and the assets. Are you ready to get started? So let's do it. Before starting the video, I want to say
thank you Rive for sponsoring this video. Rive is an animation and design tool
that lets you create interactive assets, integrate rich animation
into any platform, whether it is a website, app or game. You can design directly in the
visual editor and import content from your favourite design
tool like Figma or Sketch. You can collaborate in
real time with your team. With the state machine, you can
define how animation are triggering based on interaction and state. You have access to a large library of free
animated asset created by the community. If you want to learn something new. It's a great opportunity for you. it's free to try. create an account and have fun. Now we're going to click on the plus
and we're going to design on this page. We need a frame, so click
on F, iPhone 13 and 13 Pro. Set 50 on the corner radius
and we need a status bar. Go to asset, team Library and you have
to activate the iOS 16 UI kit for Figma. You can simply go to the
page and click on component. Go to the asset page and take status bar
for the dark mode and the home indicator. So, select the status bar, align
horizontal center and align top. For the Home Indicator, align
bottom and horizontal center. Now we're going to add background
color, go to fill, choose linear. The first color is going to be Second
color is going to be Don't forget to put the opacity to 100 and I'm going to move
my color like this and the reason why I do that because the first color it's
more darker, it's going to be the shadow. On top of the background, we're
going to create a curved shape. Create a rectangle, the
size is 3 9 0 and 6 2 0. Make sure that is in the center. Set 30 on the corner radius. Now go to edit object, we're going to add
a point and we going to move 50 pixel. I'm going to add another point
here and I'm going to align and stop where is the red line. Let me zoom in. I'm going to do the same thing,
add another point, align and stop where is the red line. After that, we're going
to create a custom button. Let's create an oval, the
size is going to be 54 and 54. I'm going to change the color. I'm going to place it in the middle. Select the rectangle, we're
going to edit and now we're going to play with the shape. So we're going to select bend tool. We going to play until I get the
perfect shape that I want like this. And now make sure that
the shape is perfect. Name the layer by Base. We're going to add a
color, go to fill linear. So we're going to add 3 colors. We're going to place it horizontal. The first color is going to
be Copy the color, the third color is going to be the same. Add another color in the middle,
it's going to be a lighter blue. and now don't forget to put
100 for all the colors. We're going to add stroke, choose linear. We're going to place in horizontal
and we're going to add one, two, three and four and all
the color is going to be white. Now we're going to play with the opacity. First is going to be 0%, second 30%, the
middle 40%, the fourth 30% the last 0%. We going to choose blend mode, overlay. Now we're going to add effect,
drop shadow, Y -1, Blur 1, color black, 25% and choose overlay. So you can see it add more
definition on the shape. The next step, you will
need the SF symbol. So you're going to right click, click
on plugins, select SF symbol browser. You will see this window. So we're going to search for
chevron left, change to bold. And of course you can go to the
asset, all the icon is here. Take the chevron the plus and the
person and bring in the page five. I'm going to change the size
to 17, the color to white. Now we're going to create a top navigation
to make the app functional so we don't have a tab bar for this screen so we
need an action button to go to the previous screen which means this one. Also, we will add a Plus button
where we can choose the ride. And the last an account so user
can click to go on their account. Now we're going to create the button. Let's take the circle. We're going to change the
color of course it's not red. So the first color is going to be. And the second color. Duplicate, we're going to change the size. So click on constraint proposition,
change to 44, put in the middle. I just realized a mistake, I'm
going to hide the smallest circle. Take back the first circle, go back to
fill linear, I forget to change to 100%. Now select the smallest
circle, change the color. So first color is Second, I'm going to
change it right now, before I forget. The second color is We want
to add more contrast and more definition so I'm going to select
the bigger circle, choose linear. First color is black, 20% and the color
at the bottom is going to be white, 20 %. I'm going to change the width to 0.5. Go back to blend more and choose overlay. Now we're going to select the smaller,
we're going to add stroke, linear. First color it's white, at the bottom
it's going to be black, change it to 20% and we're going to change the size
of the width to 0.2 and choose overlay. So now you have more definition. Select the two circles with the plus
icon, we're going to group them. Click on Command + G or you can
just right click and click on group selection and we're going
to name the layer by Plus Button. And now select the chevron
icon, you're going to add an auto layout, so SHIFT + A. We're going to click on fixed width
and fixed height and change the size of 44 by 44, center alignment. We going to do the same
thing for the person icon. Change the size to 44
and 44, align center. Name the layer by Account Button. Arrow Back Button. So I'm going to place on the X
position 30 and Y position 59. Select the account, I'm going
to change the X position to 316 and the Y position to 59. Now we're going to select Account,
Plus and Arrow Back, going to put in a group and name Top Navigation. Now we need a map, go to asset
and bring the custom line. If you don't want to use my map, you
can take a screenshot of your map. There's a lot of map plugin in Figma. I want the map to stay within the shape. I'm going to put it on top of the base. We have to duplicate the base. We call it Base used as mask. Select line and the two
bases, add in another group. I'm going to select the base used as mask,
right click and click on Use as mask. So you can see that the
map inside the shape. So now we have to create the
custom current location icon. So we're going to create a circle. The size is going to be. 15 and 15 and the color is going
to be add stroke, color white. I'm going to create a bigger circle. I'm going to duplicate and make it bigger. 22 to 22. So the bigger you have to put
below the smaller, like this. It's the same color, reduce the
opacity to 40%, delete stroke. Add effect, background blur to 10. Okay, now we're going to duplicate again. Make sure that is at
the bottom, 44 and 44. It's going to be the same
color, reduce the opacity to 10. Select the three circles and right-click,
we're going to put in a frame selection and name it by Current location icon. Make sure that everything is in
the center so we have to click horizontal and vertical center. Now we're going to create a
floating layout for the direction. So we going to trace the
direction using the line. Click on T, write My location. We're going to use Montserrat and the
size is gonna be 13, medium, color white, auto width and align left Okay, now we're
going to add auto layout, shift + A. Now we're going to change
again the size of the content. It's gonna be 1 2 0 and 44. We're going to change it to location. Now select location and
current location icon. Add auto layout, the
spacing between item is 0. You're going to add fill, color
white, 30%, corner radius, 50. Add stroke, color white, 30%. We're going to add background blur, 10. We want to make the layout floating
so we're going to add drop shadow. Y 30, Blur 30. The color is going to be black, 25%. I think it's too light, I'm going to
reduce to 10% and for the stroke, go to blend mode and change it to overlay. Okay, now it's better. Name the layer by My Location. Select the location and we're
going to change the horizontal padding to 20 instead of 10. Now we're going to duplicate My
location frame, change it to My Destination and change the text. So you can see that the
size is not changing. Click on hug content. Now. we're going to trace the direction. I'm going to change the direction of the
icon so click on the current location and we're going to move it from the left. So use line. So it's black, we don't see anything. We're going to take the
same color of the icon. Change the width to 2. Again, we're going to go to edit. So the line layer is in
the current location. So we're going to put it on
the top, below the layout. Go to advance stroke Setting,
we're going to click the end point, change it to round. So we can put destination, location
and line inside the map group. So we're going to create a curved
shape for the bottom sheet. So we're going to use rectangle, the
size is 390 and 320, corner radius 30. Add linear, the first
color is going to be. second color is going to be. We're going to add another linear. So it's going to be. Second color. zero percent. When you want to add another
color it's automatically 20% so we have to change that. So we're going to add stroke, linear. The color is going to be white,
at the bottom is going to be white and it's going to be zero. So I'm going to move up and stop here. So I'm going to change the opacity
to 50% and we going to choose overlay and we going to change it to inside. Now we going to add the modal
home indicator from the asset. And by the way, we have to change
the home indicator color to white. Okay, we're going to change the
position to 4, 6, 3 like this. I'm going to move my rectangle to 4, 6, 3. I'm going to name it by Base. so I need space at the bottom because
we going to add a book now button. Go to edit, we're going to add a
point in the middle, we're going to move up and you're going to click on
the bend tool and click on the point. We're going to create an oval. click on O. The size is going to be 255 and 50. The button touch the home indicator
frame so we have to put in more up. Okay, now we're going to
create a curved layout. Use rectangle 1 0 6 by 1 4 0. Go to independent corners, 20
on the top left and right, 10 on the bottom left and right. Fill color is going to
be Go to stroke, linear. The color is going to be white. So at the top is going to be 60%, at the
bottom is going to be white again, 20. Now we need illustration, go to asset. So I find these cute illustration
from Figma community. It's from Free Vector
Car illustration pack. So, thank you so much. So select the frame but I don't want to
have the fill so I'm going to remove. Now we gonna align with the shape. You're going to click on T. We gonna write, Compact, bold
and the size is going to be 15. The color is going to be black and
the spacing is going to be 16 from the left and 26 from the bottom. Now we're going to duplicate the text
and we going to add a random price and we're going to change the size to 13. Change the opacity to 60. Spacing is going to be 16 from
the left and 16 from the bottom. So we're going to group the base, the
car and the text, name it by Compact. We have to duplicate two more. Select the two groups, add auto layout. Spacing between item is going
to be 16, horizontal center. You're going to change
the image and the text. Now we need a title on top of that. Click on T. Always click on auto width and align left. The size is going to be 17. Name the layer Car. So select the text and the
car, we're going to add another auto layout, spacing is 16. Keep the aligment to the top left. So we have to move down. The spacing from the model home
indicator is 8 and for the selected layout, we will make it more
prominent, more obvious and floating. Take the Premium, so select
the group, we're going to add effect, drop shadow, 20 and 20. Change the opacity to 100. Select the base, we're going
to change the color to. Okay, now we're going to
create a payment layout. So, in the asset, you can see
that we have the logo of visa. Make sure that the icon is on top. Name the layer by Choose a Ride. Now we're going to create dots, 3
by 3 The color is going to be black. Duplicate, we need four. Put in auto layout and now we're
going to click on horizontal direction and the spacing is going to be 2. We going to write a random number. Click on T, the size is going to be 15. Select the number, the dot and the visa
logo together, add another auto layout. The spacing between items is 6. Go to plugins SF Symbol, chevron
right, change the size to 15, bold. Okay we're going to select the chevron
and the frame, add another auto layout, spacing between items is going to
be 219, horizontal padding is 10. Vertical padding is going to be 20. Change the fixed height to
44 and the fixed width 3 5 0. Select one of the base layout, we're
going to copy properties and we gonna click on the frame and paste properties. Corner radius 10. Select Choose a ride, spacing
is going to be 24 and between the payment is going to be 16. Okay, now let's do the book
now button, go to fill linear. The first color is going to be 100% opacity. Inside, I'm going to write Book Now, 15. Select the text and the oval,
group them together and name the layer by Book Now Button. Click on the text and make
sure is in the center. I'm going to add a drop shadow,
20 and 30 and we're going to name the frame by Chosen Ride. We are done with the first screen. So now we can go to the next step. In this section, we will design the
Destination screen, which is the homepage. First thing, you're going to
duplicate the Chosen Ride frame. To make the design more interesting,
we're going to do the light mode. So we're going to delete everything
except the top navigation, the status bar and the home indicator. Delete destination, location and the line. Click on the eye to
hide it for the moment. So now we going to change
the color background. So first color is going to be. . So the top color is more lighter. Now we have to change the status bar. Go to asset, choose the status bar for
light mode and we're going to replace it. And for this home indicator
just change the color. Click on the base, we're going to
change the color and this time you're going to place the color vertical. Top color is going to be and the second
color, I'm going to remove this one. I only need two colors. Hide the line because I
don't need it anymore. Go to drop shadow, overlay. I'm going to change the capacity to 10%. We're going to turn the plus
button into a light mode. Select the smaller circle, we're going
to change the color so the first color is going to be at the bottom is going to be In stroke, we're going to change it to
solid black color, 30%, overlay and it's going to be inside and the width is 0.2. Okay, now we're going to add effect,
inner shadow, X - 2, Y -2, blur 4. The color is going to be 100. We going to add another inner shadow
this time for the light color, X 2, Y 2, blur 4, white, 100%. Now we're going to select the
bigger, change the first color bottom color is going to be For
the stroke is going to be 30, white but I'm going to change to 60. Now we're going to add a drop
shadow, X 4, Y 4, blur 20. The color is 25%. Select the 3 icons, we going to
change the color to Duplicate, we're going to use for the third
screen for the driver information. Select the map, we're going to ungroup. Delete line base used as mask. Click on top navigation. You're going to hide
account and the arrow back. We're going to create
the destination layout. Create a rectangle, the size is
278 and 44, set the corner to 30. Go to fill linear, you're
going to place it vertical. The color is The second color is 100%. We're going to add effect, inner
shadow, X -2, Y -2 and blur 4, the color is white, 100%. Add another inner shadow, this time is
going to be for the dark color, X 2, Y 2 and blur 4 and the color is 100
%. And now we're going to name by Base. The spacing is going
to be 20 from the left. So now we're going to create a
different style for the button. click on O, 40 and 40. Fill linear, top color is white. Second color is Stroke linear,
at the top is going to be 20%, at the bottom 0% and we're going
to select outside and width 0.2. Create a smaller circle so
duplicate and the smaller circle must be on the top of the bigger. The size is 34, change the color. First color second color is
Right-click and click on plugin. We need a location icon and we're going
to change the size to 17 and I'm going to change the color to We're going to add
in a group and name it by Location Icon. Okay now, we're going to do a
different button for the right side. Create a rectangle and
the is size 34 and 34. Here we're going to choose
linear, the first color is B6B8CD. Second color. 100%. Now I'm going to duplicate for
a smaller circle, 28 by 28. Place at the middle, change the color. Second color. We're going to add stroke, top
color white, bottom black, 100, overlay, inside and width 1.5. So right-click, Plugins, we
going to change the size to 17. Change the color. and we're going to group them together. Make sure that everything
is in the center. Now we're going to
select the bigger circle. I'm going to add more
definition on my button. So we're going to add drop
shadow, Y 1, and blur 0.2. So we're going to see a fine line here
at the bottom, 20 %. I'm going to add another drop shadow, X 4, Y 4, blur
18, color black, 100% and overlay. Okay, I'm going to add another
drop shadow but this time is going to be the lighter color. X -4, Y -4, and blur 10. The color is going to be white, 50%. We're going to select my location,
location icon and the base, we're going to put in a group and more button
we're going to place inside a frame and the frame is going to be 44 by 44. Make sure to center everything,
and name the layer by More Button. Now select more button and the group,
add auto layout, spacing between item is going to be 8 and make sure to hug to
horizontal resizing and vertical resizing. Name it by my Location Now we're going to duplicate so Command C
and Command V, change to My Destination. Add Add another auto layout,
spacing it's going to be 16. and this time we're going to
fixed width and fixed height, 350 and 124, set corner radius 30. The color it's going to be I'm going
to add stroke, linear, color white. At the top is going to be 60, at
the bottom 20, choose overlay. And now we're going to add drop
shadow, color black, 10% and it's going to be Y 30 and blur 30 Okay, now it's missing the title
at the top, auto width, align left. Change the font extrabold. The size is 17, spacing from the
frame is 16, 20 from the left. Create a rectangle, the
size is going to be 491. Filll linear, Second color,
100%, Set corner radius to 30. We're going to add stroke. So the color is black on
the top 30, at the bottom 0. and we're going to name the layer by Base. So now we're going to write a
location, change to bold, size 15. Now we're going to duplicate. Write a City, I'm going to
change medium, 60 opacity. I'm going to group together. spacing 0. We're going to create
a separator, use line. The rotation is zero and the size
is 350, color white and we going to reduce the opacity to 30%. The spacing is going to be 16. Now we're going to create another button. Create a circle, the size is 34 and 34. Go to fill linear, first color is. at the bottom is going to be white. Make sure to put 100 on opacity. Create a bigger circle Duplicate and
don't forget to put at the bottom. The size is 40, change the color. First color is white, at the bottom is. make sure to align it. Now we're going to create
another circle, size 44 and 44. Change to solid, the color
is add effect drop shadow, X 3, Y 3, blur 10, color is black 5%. So now we need the location
icon so I'm going to take this one and I'm going to paste here. So I'm going to group everything
and name it by Location. Make sure that everything
is in the center. I'm going to select the location icon
and the frame of the text, add auto layout, spacing between is going to be
16 and then I'm going to select with the line, add another auto layout. 16 spacing between items and
make sure to left alignment. And now we're going to click
on align horizontal center. On top of that, I'm going to
write title, extraBold Now what we have to do is duplicate. So we have 6. So we going to select everything. Add auto layout, spacing 16. My separator is to light,
click on each, overlay. add another auto layout
and the spacing 16. Top 16 and 20 from the left and right. And the last step we will
create the custom tab bar. So UBER app is my reference and
their tab bar only have two actions. The home page for choosing
your ride and the activity that show you recent destination. Now create a rectangle of
390 and 90, align bottom. Change the color, first
color second color 100. The home indicator, you have to
place it at the top so we can see it. We're going to edit object. So add a point and we're going to stop
where is the frame of the home indicator. So you can see that we crossed the
line so I have to move up a little bit. You can use a ruler, go to ruler, add
a red line and stop where is the line. So it's going to be more precise
Okay, now I'm going to add another point and I'm going to align with this point. So stop when you see the red line. We're going to do the same thing. Now click on the bend tool and
I'm going to click on this point but before that for these two
points, I'm going to put it to 50. Okay, now we're going to play with
the tool, we're going add stroke. The color is going to be all white,
we're going to place horizontal. first color, zero, second color, 60, third
color, 100, and this, 60 and 0, overlay. We need icons, so we need person
and this for the activity. Okay, we're going to select each icon,
put them in a frame of 44 and 44. place it in the center. We're going to do the same thing. we're going to group activity, account. So the spacing from the left is going to
be 40 and the spacing from the top is 12. You're going to do the same thing. Voilà! Select everything, put them in
a frame, name it by Tab Bar. And for this, name it
by Recent Destination. I'm going to add in another frame and for
this one, I'm going to group everything. And voilà! We're done with the second screen. So, in the next step, we're
going to design the last screen. Let's design the third screen. Take the frame that we
duplicate in the last part. We're going to change
the color of the shape. Click on the base, choose solid instead
and the color is going to be We're going to open the eye of the line. Change the color. Okay. Now we're going to duplicate the
current location icon and the line. Now The icon is inside the line
so we have to move at the top and we're going to change the color. The color is too light for the light
version so we're going to change to Copy the color, select the bigger circle
and paste the color and do the same thing paste the color to the other circle. We're going to change
the color for the line. Now, we're going to
select the line and edit. We're going to shorten the line. Click on the first point
and delete on your keyboard. Click on this point and delete. Now we need a car, go to
asset, select this one. I don't want the color. Make sure to put on top and place
the car at the point of the line. Now we're going to
create a floating layout. Click on T and write Your
driver arrives in 3 min. The size is going to be 15, color
is black, align left and auto width. Add auto layout. Press Shift + A, horizontal padding is
going to be 20, vertical padding 10. Fill, the color is going
to be black and opacity 60. Go to blend mode overlay. Go to stroke, the color
is going to be black, 10%. Set 20 on the corner radius. Go back to stroke, choose overlay. I like to use overlay because it
blend very well with the background. Okay, now we're going to make it
floating, add effect drop shadow. The color is 60%, Y 30
and background blur 20. Use rectangle, and the size 390 and 3
0 0, align bottom and vertical center. We're going to set 50
on the corner radius. Go to Fill, choose linear, top color is. second color is Don't forget to put 100. Go to effect, drop shadow,
color 25%, Y: -20 and blur: 60. So we need information about the driver. So the first thing is we're
going to write a random name. Choose bold, size 15, color white. Okay. Now we're going to create a dot, 4 by 4. Color white. We're going to name the layer by
Dots and the rectangle is the Base. Okay now we need a icon star. We're going to do the rating. Right-click, go to
plugins, SF symbol browser. Star fill. Change the color to white, size 15. Change the color to Now, we're going to
write a rating so let's say 5.0, medium. We're going to select everything,
add auto layout, spacing is going to be 8, center alignment. Okay, now we're going to write
the car information, medium and the color is going to be 16. Reduce the opacity to 60 and we're
going to duplicate the text and now we going to write the license. You're going to duplicate the same
dots and change the opacity to 60. Select together, add auto
layout, spacing 8. Make sure to center. Make sure that everything
is inside a frame. I'm going to select the two
frames, add auto layout, spacing is 8 and click on center alignment. I'm going to place this at the center. Now we're going to create the avatar. Create 2 circles, the first is 86
and 86 and we're going to duplicate and we need a smaller, 76 by 76. So select the bigger, we
going to change the color to. and go to portrait so I'm going
to select a random person and I'm going to select a guy. Select the two circles,
group them, name Avatar. This frame, I'm going to name
it by Driver information. Okay, now we're going to take the tab
bar, we going to change it to dark mode. Duplicate and paste. Go to fill, we're going
to change the color. First color is and the
bottom is going to be Select the home indicator
and change white color, 60%. So we need to change the icons. So, in the asset bring message and phone
and we going to paste to replace and we going to change the color to white. Change the opacity to 60. Now it's missing something, we going
to go back to the asset, we're going to take this car, remove the fill. The spacing is going to
be 24 from the avatar. Okay and the avatar,
make sure to align it. Okay, I'm going to zoom it. When you see the red line, you
stop and the driver information, spacing is going to be 24. Okay, let's do a last checkup. Can you see something's wrong in here? Yes, I forget to add background blur. Select the frame and add
background blur, put 10. We can still see the line,
we're going to try 20. Okay. It's better. I think is lack contrast. Go to stroke, we gonna
change overlay to normal. Let me try something if I
put 100 and choose overlay. Let me change the opacity to 60. So finally, we're going to keep
overlay and reduce the opacity to 60%. Okay, now let me do another checkup
and now can you see something's wrong? I just want to do everything faster and
I just realized that I didn't change. So I'm going to hide at that bar and
now I'm going to do it faster so I'm going to add some music and we're
going to change all the direction. So congratulations! You have completed the course so
don't forget to share your work and tag me on Instagram and Twitter. Thank you so much for watching, I
hope that you like the video and don't forget to like and subscribe. See you next time, bye!
