Hi, everyone. Is Sourany from Design+Code. Welcome back for an
another UI design with iOS! Today, I have prepared for you
a map app with a mix of dark mode and Glassmorphism style. Let's have a look on what
we will build together. In this tutorial, I will show you
the second screen with the map, the direction navigation, this, bottom sheet
with the direction status and we will do the third screen such as the saved screen. So I will show you how to create
this date picker, the mileage chart and the custom tap bar. I will show you also how to create this
custom navigation button with 3D effect. So are you ready? Let's get started. On this tutorial, you will
need the SF Symbols from Apple. SF Symbols is a library of
iconography designed to integrate seamlessly with San Francisco, the
system font for Apple platforms. Symbols come in nine weights and
three scales, and automatically align with text labels or you can
download the icons on the community. For example, I need a lot of
directional symbols, so I can just duplicate from Lauren HERDA or you
can download the plugin and type Icon so you can download any icon plugin
that can save you a lot of time. So far, I downloaded a lot of plugin
because I need different free icon. And then you will need the basic
component that you can duplicate the iOS 15 UI kit from Joey Banks. All right, I think that's
it for the resources. So let's begin! So we're going to do the top part such
as we're going to do from the status bar to the steps for the direction. So let's begin with the top navigation. Let's create a new screen. So press A,from your keyboard
shortcut and take the iPhone 13 - 13 pro and bring here. So for the corner radius for this
screen is going to be 40 degree. And we're going to add the
linear gradient with two colors. So instead of the solid,
we're going to select linear. So the top color is going to be
this light gray, and the bottom is going to be this dark gray. There you go. Let's bring the basic components such as
the status bar and the home indicator. I created the components for you that
you can reuse from my Figma file or you can go get the component directly un the
iOS 15 UI kit for Figma from Joey Banks. But I recommend you to duplicate
yourself and copy and paste instead. So take the Status Bar and we're
going to paste right there. So align horizontal center and align top. There you go. Let's bring the home indicator. I'm going to paste here and
align horizontal and align bottom and change for Home Indicator. Let's align bottom. There you go. The basic component is added. Now let's create the lightening
effect on the background. So press O on your keyboard
shortcut or you can take the shape tool here and take the ellipse. So create an ellipse 200 by 200 pixel
and bring a little bit at the top. So, and we going to add the
color, this red color, take the dropper and take this color. Let's decrease the opacity to 40% and
add on effect, layer blur to 200. There you go. Duplicate or you can option and
drag and bring at the bottom right and change the color for this blue. Do the same thing, decrease
the opacity to 40%. There you go. Let's bring a little bit. Let's create another ellipse, but
we going to do the stroke instead. Let's create 300 by 300 pixel. Add the stroke, take off the fill
color and change for the red and maybe put on the top right corner,
decrease the opacity to 30% like this. Duplicate another stroke. Let's bring at the left a little bit
and we're going to resize this one. So increase the size a little bit. So press K on your keyboard shortcut
and drag the corner and make it bigger a little bit like this. So you can play with the stroke of
course, maybe something like this. So the background is done. Now let's create a top navigation with
this beautiful shape for the button. So let's begin with this triangle
so you can take the polygon on the shape tool and create a triangle. For the size is going to be 146 by 118. Let's rotate to minus 90. Okay we going to put manually. Bring at the right for now. So we're going to put the
radius on this right corner. So to edit, press enter. Take this middle point and we going to
change the corner radius to 28 degree. When you done click on done. So when you change the corner
radius, the size change. So let's bring back to the
146 by 180, there you go. So it placed automatically for
me . Now let's add the linear gradient with two colors. For the left color is going to
be this dark gray and the right is going to be this light gray. We're going to add the
inner shadow on effect. So for the color is going to
be white for the Y position is going to be 1 and blur 1. Let's add Overlay on the
blending mode . There you go. Now, next step we're going
to add this left chevron. So let's bring the left chevron You can search You can search on
the search panel chevron . I'm going to take this one. So Command+C, bring here. So to paste the symbol, you need to
press T first, like when you want to write a text label, so click
and Command+V, paste the symbol. There we go. We're going to add a
frame for this symbols. So option+command+G there we go. The frame is added. For the frame is going to be 44 by
44, so you can see it's not aligned. So take this Chevron and
center properly, there you go. We're going to bring inside of this shape. I'm going to name this left Chevron. So select this polygon and this
chevron together an option+command+G to add a frame so we can center again
to make sure it's aligned center. Bring maybe a little bit at the left. Maybe with 20 spacing, so
I can name Back b button. So duplicate this layer,
Command+D to duplicate. Right-click, flip
horizontal and align right. There you go. All we need to do is change the symbol. So I'm going to take
this one to make it fast. So Command+C and Command+V, there you go. For the color style is
going to be secondary color. So select this Chevron. I'm going to go on the color style
and select label secondary or manually it's this color with 60% of opacity? For the text style is SF pro
Display 17 and dark secondary color. You can put manually the color you can
put white, for example and set the opacity to 60 to make like a secondary color. So the top navigation is done. Now let's create the waypoints navigation
system with the steps description . So let's begin with the text label first. So type T from your keyboard shortcut,
we're going to copy the address so to make it fast, I'm going to
just copy paste from this one. Command+V there we go. Option and drag for the second text,
I'm going to copy again, Command+V. So for the secondary text label, is
this light gray and opacity, it's 60%. For the first one, it's white. So add vertical auto-layout together. Select the two text and Shift+A
from your keyboard shortcut, or you can go there and add on the plus. So Shift+A, the auto layout is added. So for the spacing is going
to be 4, padding zero. Now, let's add this icon. So for the directional
symbol, I go on the community and I took from Lauren Herda. So you can just duplicate
and take this icon. So Command+C and go back to your work. Paste here and we're going to
change the color for this blue. I'm going to create the round icon. So I'm going to change the
corner radius to 4 degree. Select this arrow. So enter, take the two bottom points
and set to 4 degree as well and done. Now we going to add the Horizontal
auto-layout between the icon and the text label, so select both and
Shift+A, add auto-layout again. So for the spacing is 28 with
10 padding and I'm going to resize manually to 330 and center. Let's add the fill color
to see the contrast. So I'm going to select this
gray and decreased to 35%. Now I'm going to add the
independent corners on this3 corners , except this one. I'm going to let rectangle. For the top left corner is 15
degree, for the top right corner is going to be 15 as well. And for the bottom right corner
radius, it's going to be 15 degree like this, center. So now let's create this step-by-step
description for the direction. We're going to go back and
take the turn left icon. So Command+C, bring here. I'm going to decrease
the size to 24 by 24. So you can lock the Constrain
proportions and change for 24. There you go and for the color I'm
going to change for white instead. Now let's add the text, I'm going to t
pe T and write " Then", so for the text style is the same thing as this one. So we're going to add the horizontal
between this icon and the text. So Shift+A, for the spacing is going
to be 2, padding 10 and center. Now let's add Fill color to see the
contrast is going to be the same dark gray, but this time with 100% of opacity. So I'm going to bring at the bottom
and we going to change the corner radius at the two bottom corners. So do the same thing, go
to the independent corner. So I need the 2 bottom. So for the left bottom is going to
be 15 and same thing for the bottom. There you go. So we're going to add the
final vertical auto layout. So I'm just going to name this
layer Waypoints and this one is going to be next steps. So add vertical auto-layout shift+A
So the auto-layout is added. Why I added the auto-layout?, because if
I want to add the next step, I can just duplicate and change the corner radius. For example, I can set this
one is going to be zero. Same thing for this one. I'm going to make it fast, it
should be something like this. All right, the top part is done. So let's continue the design We're going to add the map image. You can take the screenshot
from your phone on your Google's map or any navigation app. For my design, I took the
screenshot on my application Google maps and I bring on the design. So let's do it. So I'm going to Command+C the
map and bring to my design. So make sure that the map is completely
at the bottom and center everything. So let's add the dark color
to make like a dark mode. So select this image and add fill
color, we're going to set to 100% first and add radial gradient . So
for the first color is going to be this gray with zero opacity and this
second color is going to be this gray. So let's play a little bit . It
should looks like this. So let's draw the line
direction using the pen tool. I'm going to follow the line like this. When I'm finished. Click on done. For the stroke is two and for
the color, I take from this red and I add the linear color. So the bottom it should be
100% and for the top right. I had decreased to zero opacity
to make like the smooth line. Next step, I'm going to
do is duplicate this line. So Command+D, the bottom is going to be
Blur and the top is going to be Line. For the blur, I'm going to add
layer blur on the effects and the blur strenght is going to be 16. Like this .
Next we going to create
this current location icon. So I'm going to add a frame. So press A on your keyboard shortcut
and create a frame 58 by 58. There you go. And we're going to add a shape. So press O on your keyboard shortcut,
or you can select the ellipse tool and create ellipse 58 by 58 again and center. I'm going to take this blue and
for the opacity is going to be 10%. So I'm going to duplicate another
ellipse so Command+D, decrease to 33. So you can lock the Constrains proportion
and change the number for 33, increase the opacity to 40% and center it like this. I'm going to duplicate
another ellipse so Command+D. The size is going to be 16 center it
again and I'm going to set 100 % and I'm going to add the stroke with
white color and is going to be 1.5. There we go. I'm going to name current location icon. So normally when you move your
car, this icon will follow you. So I'm going to put here for now. I'm going to add the background
blur on this big ellipse. So go to on the Effects,
background blur and I'm going to change the blur for 10. There we go. So we going to create this location icon. Take the polygon tool and
create the size for 82 by 62. And we're going to flip. So right-click flip vertical, enter,
take the top point and play with the corner radius until it's round. And we're going to take the bottom
point and go to five degree like this. So the first shape is done. when you change the corner radius,
the size change in the same time. Let's bring back to 82 by 62. There you go. I'm going to put more round like this. So the first shape is done. I'm going to add the Linear. So for the top color is going
to be this blue and the bottom is going to be this light blue
let's skew a little bit like this. Now we're going to add a
circle at the middle. So I'm going to create a ellipse. So press O on your keyboard
shortcut and make the size 16 by 16, let's center a little bit and
for the color is going to be white. So we're going to add a frame. So press A on your keyboard
shortcut and make the size 78 by 78 and bring everything inside. There we go. Let's center again. So we're going to duplicate this
shape, Command+D on the polygon. So the bottom layer you can increase
the size so press K on your keyboard shortcut, and you will see two arrows. So drag a little bit and center. We're going to change the linear for
solid and decrease the opacity to 20 degree I'm going to resize a little
bit more, maybe something like this. So center again . So there you go. My location icon is done. So I'm going to name, location
icon and I'm going to bring here. I'm going to add the
background blur like this one. So go on Effects, background
blur, and change for 10. There you go. The map is done. Next we're going to create this
side setting with the 3 icons. So to create these icons , we need
the icon from a plugin, so go to the community, go to plugin and type icon. You can download the Iconscout. It's free for the basic icons. But if you want to have all style icons,
you have to subscribe to pro member. So I'm going to right-click and Iconscout. Normally you need to login on
the original website first. So here are all the price. All you need to do is select
free and for the style select line or flat whatever you want. So search for the icon. For example, I'm going
to search for Search. So I have a lot of style. I'm going to take this one. So just select and it's downloads
so we can see it appear here. We need to add a frame first, a frame
24 by 24 and bring this icon here. Center it. Next, we're going to add another
frame or you can create ellipse for the background, 44 by 44. Bring the icon on this circle , select
and add another frame, so Option Command+G and the frame is added. I'm going to name Search. I'm going to center again, there you go. For the color is going to be
white with 8% of opacity. We're going to add background blur
on the Effects to make it nice. Let's say 10. There we go. My first icon is done. So I'm going to duplicate
or option and drag 3 times. I'm going to do the same thing. I'm going to search for volume and this one is current location. So to make it fast, I'm
going to just copy paste. So Shift+Option Command+V+ to paste. So I'm going to take this one. Command+C, Shift option
command V to paste over there. There you go. I'm going to name properly the icons. So this one is going to be Volume and this
one is going to be current location, then we're going to add vertical auto-layout. So Shift+A from your keyboard shortcut. So for the spacing is going to be 20. Okay, I'm going to align
with the 30 spacing. So you can just press on Option when
you press on Option, you can see the spacing between the screen edge. So I'm going to go at the
right a little bit. So at 30 like this, because I want
to align with the Direction steps. So there you go. My side setting is done. Let's bring at a top a little bit
something like this and I'm going to bring a little bit at the top. There you go. For the map section is done. So in this section, and we will
do this bottom sheet with the Status navigation and we're going
to create this drag handle, the description and this action button. So let's begin with the text label first. We're going to start with
a primary text label. So type T from your keyboard shortcut
and write the custom number as you want. So for the text style is SF pro displays
semi bold 20 and for the color style is already set to white by default. So we're going to let like that. Next we going to write the secondary text. This time is going to be 17 and the
color is going to be the secondary color. Normally I used the color system because
I have a pro account so I can use the asset easily, but for you guys for those,
don't have a pro account, is better you enter the number of this color manually. So I'm going to show you like this. So for the secondary is going to
be this color and for the opacity is going to be 60% like this. So we're going to add the vertical
auto layout between the two texts. So select and Shift+A together. For the spacing is going to be zero. So I'm going to change
the text for Arrival The first row is the total
estimated time you will travel. The second row is the time you have left
to get to your destination and the third row is the kilometers you have left to go. So let's option and drag 3 times and add horizontal auto-layout and for the
spacing is going to be 100 and center. All I need to do is change the text. So I'm going to copy and
paste to make it fast. So for this one is going to be
minutes or hour is depend of your time of your destination. By the way, is a random description. Next we're going to
create this drag handle. What you can do is duplicate
this home indicator. So I'm going to option and drag. So to edit, you need to detach instance. So right click, Detach Instance
and we going to resize manually this rectangle to 36 and center. There you go. The drag handle is done. I'm going to name drag handle. There we go. Next, we're going to
create this action button. So press T and write " End". I'm going to add auto-layout
on this text label. So Shift+A, there we go. So for this spacing is going to be 10. I'm going to set manually padding. So for the left and right, padding is
going to be 20 and for the top and bottom is going to be 8 padding and center. So I'm going to add the
fill color on the plus. And I'm going to set the linear gradient. For the top color is going
to be this red and the bottom is going to be this dark red. Let's drag manually to maybe 112. And for the corner
radius is going to be 40. There we go. I'm going to add a stroke to add
the reflection like this one. So go to the stroke and click on the plus,
I'm going to change for linear gradient. So the two colors is going to be white. So the top, we're going to
keep 100% and the bottom it's going to be zero % of opacity. Now let's add the blend mode,
and go to Overlay to blend with the color of this button. Now we're going to add the
vertical auto-layout to make, like a bottom model sheet. So select the 3 layers and
Shift+A, add auto-layout. Let's center it. So I'm going to add manually the padding. So for the left, right, and bottom
padding is going to be 30, 30 bottom and 30 for the right Align
horizontal centers and align bottom. I'm going to drag manually to fit
with the screen edge and I'm going to change the "Parked" to Space
between and I'm going to drag manually the height to 220 like this. And I'm going to add the fill color and
decrease the opacity to 45 % and add the blend mode and change for Overlay. And for the corner radius
is going to be 40 degree. Now we're going to add the
stroke with linear gradient. So the two colors is going to
be white both and I'm going to change for Overlay as well. So there you go. Next last thing we need to do is
add the background blur on Effect. Change drop shadow to Background blur. So blur is going to be 40. There you go. The bottom part is now done. Now that we created the whole
screen, we can move to the second screen such as the saved screen,
which contains the timeline history. So first thing we going to do
is duplicate the first screen, Command+D, we're going to keep the
basic components, the top navigation and we're going to add the title. We're going to keep this bottom
sheet and the rest we can delete. So delete this one, but for now I'm
going to high the bottom sheet for now. So what I can do is change the symbols. So to make it fast, I'm
going to copy paste. So Command+C and Command+V,
I'm going to add a title and I'm going to write " Timeline". So for the font is SF pro display
Semibold 17 with primary color. Is already set to white color, 94. So let's bring inside of this layout. So the title is done. Next, we're going to
create this date picker. So first thing we're going
to do is create this icon. You can do it by yourself. You can use the pen tool and
create yourself a triangle. So type P on your keyboard shortcut and
create a triangle to 12 by 6 pixel. There we go. I'm going to add the color
fill and take off the stroke. There you go. My dropdown icon is done. If you want to be sure that
it's proportional, it can use the pixel grid or you can use the
ruler to make sure that the middle point is at the middle like this. So we're going to create this text label. So for the first colum, is
going is going to be the year. I'm going to write 2022 is a custom date,
so you can choose whatever you want. So for the font, I'm going to change
for display regular15 There we go. So let's add auto-layout together with
this icon, but first of all, I'm going to add a frame first, a frame for this icon. So press A on your keyboard shortcut,
you can create manually the rectangle like this and for this size is going to
be 44 pixel by 44 and bring your icon inside of this frame and center it. Now, I'm going to name it Dropdown
icon and bring next to this text label and add auto-layout together. So shift+A and for the spacing
is zero and zero padding. I'm going to option and drag . The
middle is going to be the month. So you can write anything you want. So I'm going to write April and for
the third column is going to going to be the date, for example, 15. I'm going to add another
auto-layout together. First of all, I'm going
to name this "Year". This one is going to be "Month" and
this one is going to be " Date". So select and shift A to add auto-layout. Spacing is going to be 2 and the
padding is going to be 14 and center. So for the third column, we're going
going to add a fill color to make a Hover effect when the mouse is enter. So I'm going to add the fill color with
white, and I'm going to decrease to 8 % and I'm going to add inner shadow. For the Y position it's going to be 1
and blur 1 and I'm going to add Overlay and for the color is going to be white. There we go. So for the top part is done. Next, we're going to create the chart. To create this chart, we will
need to add the Layout Grid here, you can just click on the plus. We're going to change the size
for 20 pixel to help me to align properly my elements. So for this one, I'm going to
show you with the 20 pixel. So let's begin to create
the text label first. For the first line is going to be 20 Km. For the font is SF Pro Display Semibold
12 for the primary text label and for the second text label is going to be regular. Okay. So I'm going to option and drag. I'm going to add vertical
auto-layout together. For the spacing is going to be 20. So let me to duplicate first. I'm going to change the number. For this one is going to be 15, this
one 10, this one 5 and this one is zero. So let's align a little bit. So for the rest of the texts
is going to be secondary color. So I'm going to set this color
manually for secondary, and it's going to be regular. There you go and I'm going to
decrease the opacity to 60%. There we go. So for the text lebel is done. Now, we going to create the chart. I'm going to create a rectangle. For example, you can follow the line. For the width, it's going to be 20 and
for the corner radius is going to be 40. So to make sure if you're on the
line, you can zoom in and make sure it's aligned with the pixel grid. So I'm going to duplicate this one. I'm going to bring at the second column. This time I'm going to change the height. So I'm going to add horizontal auto-layout
together, and I'm going to align bottom and I'm going to duplicate again, so you
can play with the height, same thing. So maybe like this, maybe so maybe like
this and this one I'm going to change for I'm going to change for this one. Make a little bit different. And for the color, I will use linear
gradient with two tone of red. So I'm going to add linear gradients. So for the top color is going to be
this red and the bottom is going to be this dark red, but I will decrease the
opacity to zero . I'm going to add the stroke, do the same thing, add linear. The color is going to be white
for both and I'm going to add the blend mode to Overlay. I'm going to decrease the opacity
to 50% to make it blend a little bit with the background. I'm going to copy properties or you can
just option command C to make it fast. So I'm going to select all
the layers that I need. So I'm with option command
V to pass properties. And for this one, is
going to be another color. It's going to be the blue. So I'm going to add linear color. For the top is going to be this
blue and the bottom it's going to be this blue, but with 0%. Do the same thing with
the stroke, linear gradient. Change for white, I'm
going to add Overlay. The vibrant gradient means the
currrent day that's why the color is different from the others. So for this one is going
to be, for example, Monday, Tuesday, Wednesday, Thursday. So for example, I want to see the history. of my mileage chart. I want to know what is the activity
on the April 15 okay missing one. I'm going to duplicate another one. We're going to put at the middle a
little bit like this, so for this one is going to be maybe like this, by
the way, a pro 15 is on the Friday. You can just switch. Okay next, we're going to add the
bottom text label with the days. Do the same thing. I'm going to write for example, Monday. So it's the same font. So I'm going to put at
the bottom of the chart. I'm going to add auto-layout again
with 20 spacing and 0 padding. So I'm going to duplicate for now. I'm going to change for
Tuesday, Wednesday, Thursday, Friday, Saturday, and Sunday. I'm going to name "Chart" and this
one I'm going to name Kilometers. Next, I'm going to add vertical between
the chart and the days category. So shift A. For the days width I'm going
to fit with the chart size. So the width is 260, so I'm going to
drag manually to 260 and I'm going to change for space between on the padding. So I'm going to align bottom. So space between. It's going to hug all the empty spaces. So I'm going to keep the Friday
with the primary color and the rest is going to be secondary color. So to make it fast, I'm going to option
Command+C and I select all the texts and I'm going to option Command+V. There we go. So this line is going to be main
date that I choose to see the history. Let's add a frame together. I'm going to take off the layout grid
first, and I'm going to add auto-layout and I'm going to align bottom. There you go. So let's name it M Mileage Chart and
center .It of course you can play with the spacing between item to make, got a
little bit small or big it's your choice. So for the chart is done. We will do the bottom sheet with
the map lists using the background blur and we will add the separator. First thing that we're going to do, we
going to add some lightening effect. I'm going to move this one and bring here. You can play with the shape as you want. I'm going to duplicate another
one and bring here at the bottom. Next, we're going to copy this bottom
sheet and paste to the second screen. All we need to do is change the
icons and the text and then we will create this r separator between
the subhead and the map lists. So you will need the SF Symbols. So we going to search for this symbol
that you can use like for the kilometers. So Command+C. So I'm going to change the top text
label, and we're going to paste and I'm going to change for Km like this. So to make it fast, I'm
going to copy and paste. There we go. and this one is going to be map. So as can see I have four column. So I'm going to duplicate one more and I'm
going to change for space between instead. Let's drag manually, or you
can change the width to 390. I'm going to add extra
frame on this symbol. Option Command+G then change the
size for 44 by 44 and center. I'm going to add the left
and right p dding to 10. So left padding is going to be 10 and
the right padding is going to be 10. So I'm going to change
the text for kilometer. What I can do, I can just
duplicate to make it fast. So I'm going to duplicate 4 times. So I'm going to delete the rest. So I'm going to change for space
between instead and I'm going to fit the width with the screen edge. So I'm going to change for 390. All I need to do is change
the icons and the texts. To make it fast, I'm going to just
copy and paste like this and for this one is going to be following,
this one map and this one safe. There you go. For the size it's not finalized yet
because we going to add another element. We will need this symbol. We're going to create separately
because it's inside of the auto-layout so is going to be
hard to work inside of this frame. I'm going to duplicate this left
arrow and I'm going to bring here for now, so do the same thing. Option and drag. So I'm going to change the icon or you
can just flip horizontal to make it fast. So I'm going to write
the text at the middle. To make it fast, I'm going
to copy again and paste. There you go and I will bring
this drop down icon and I'm going to put next to my text here. So I'm going to add horizontal
auto-layout between this icon and my text. So shift A, I'm going to center
and next I'm going to add another auto-layout between the text
label and the arrow buttons. So I'm going to name. This one it's going to be right. This one is going to be date. So I'm going to select all of the 3 items
and shift A, I'm going to add a padding, center it and add the left and right. Padding to 20 and I'm going to change
for space between instead and for the width is going to be 390 to fit
with this screen center and then I'm going to add this separator. Let's create a rectangle from 290 by
1 pixel to create a separator, then add the vertical auto-layout with this
one end the separator to get her. So shift A for the spacing
is going to be zero. There you go, the separator is done. We're going to insert this sub
head and say of this layout. And we going to put below of
the drag handle component. So let's bring this inside of this
auto-layout and make sure to bring at the bottom of this drag handle. And I'm going to add another
auto-layout together between the header and the drag handle. So Shift A. So for the spacing and padding I will
keep it zero and then I'm going to add the padding at the left and the right. So we're going to change the padding
and the spacing on this layout. Okay. Normally on the first screen the padding
is 30 for the left, right and bottom. But for this one, I'm going to
change 20 minutes there and I will keep 30 for the bottom padding. So for the alignment is center. So let's maybe resize the height to 340. So for this screen, we don't need this
button, so we can take it off and I'm going to change the color for separator. I'm going to change the
color for this gray. There you go. So manually the code for this color
is this dark gray and for the spacing, I'm going to change for 20 instead. So for this tab, I'm going to resize
for 342 instead for the width. So there you go. Now it looks similar. Okay next we're going to
create this bottom tabbar. So we going to create this bottom tap
bar with the neon light effect using layer blur, and we're going to create
this action button . So let's begin! You will need to add the
layout grid first to help you. So click on the plus on the Layout Grid. Keep the grid with 10 pixels. Now let's create a rectangle. So press R on your keyboard shortcut. Create the rectangle 390 by 90 pixel. So align bottom. We're going to add the
middle point handles. So enter, click on this point
to activate the point handles. So we're going to add another point,
take this one and drag about 4 pixels and half from the left and do
the same thing for the right side. By the way is 4 pixels. We going to take this middle point
and we're going to go down around five to six pixels from the bottom 1 to 5. So for the middle points, we going to
add the corner radius to 10 and the point here the radius is going to be 30 degree. There we go. We're going to do the same
thing for the bottom point. So click on this point. We're going to add the second point. This time it's going to be 1 pixel from
the left and 1 pixel from the right. So we're going to take this middle
point and go to the top with 1 pixel. There we go. So for the middle point, it's going
to be 8 degree and for the two bottom point is going to be 16 degree. Now let's select all the 4 corners
it's going to be 25 degree. There we go. Now we're going to add
the linear gradient. So on the fill pallette, we're going to
add the linear color for the top color is going to be This blue and the bottom is
going to be a little bit dark like this. we're going to add
Inner shadow on Effects. We're going to change the Y position
to 1, for the blur is going to be 0. There you go. Next we're going to duplicate this shape. So Command+D, makes sure to select the
bottom layer and this time we're going to change the color for solid color. This time is going to be this red. So enter the layer. We're going to go up for 1
pixel this time and for this point, I'm going to put back and. I'm going to add the background. For the blur is going to be
38 or 40 like you want and the opacity it's going to be 30%. Next, we're going to add
this neon light effect. We're going to create an ellipse
at the middle and make sure to put between the two shapes. So for the color is going to be this
pink red, and I'm going to add the layer blur to 16 something like this. Now we're going to create this
action button with the same location icon from the first screen. I'm going to copy this one, put
at the middle a little bit. Make sure it's outside of the frame. Center, go down a little bit like
this, we're going to change the color. Copy properties and I'm
going to paste properties. So option command V. There we go . Is the same
color as this button. The different, I just changed
for radial gradient instead. So I'm going to change the icon for the
plus icon so you can use the plugin. So right click go to the Iconscout. Select free and for the style,
I'm going to select line and I'm going to search for plus. I'm going to take this one. So Command+X, I'm going
to paste over there. So shift option command V. So it's going to replace automatically. Let's center a little bit and I'm
going to change the stroke color. So it's going to be white with 10
percent of opacity and I'm going to add the background blur to maybe 10. And I'm going to add the
stroke with linear gradient. So for the top color is going to
be white and white for the bottom. And I'm going to change for Overlay. I'm going to decrease the
opacity to 50 percent. And for this plus I'm
going to change the white. And make sure that this action
button it's in front of this tab. I'm going to put this layer at
the top so we can see the shape of the neon light effect at the back. So let's take off the grid for now so we
can see the contrast, maybe the stroke. I'm going to put 0.5 instead like this. So we're going to create a small circle. So press O on your keyboard shortcut
and we're going to create an ellipse. 2 pixel by 2 pixel and center. For the color, we're
going to take this blue. So there you go. You can keep this a little point or
you can take off it's like you want. So next let's add the tab with the icons. So for the tab, you can take the
symbols from SF Symbols, or you can go get the icons on the community
or The icon from the plugin. It's your choice. For example, here is from Iconscout. So I'm going to make it simple. So we going to use the
Iconscout plugin like this one. So first of all, what I need
to do is to have my icons. Normally by default, the size of the
frame of the icon is all 24 by 24. For example, I want to have
the icon from Iconscout. So I'm going to select
free and for the style. I'm going to select line,
I'm going to search for plus. We going to put this icon inside
of a frame from 44 by 44 pixel, insert and bring it inside. Center it , set the corner radius
to 30 degree Take off the fill color. We're going to change for linear gradient
and for the top color is going to be this red and the bottom is going to be this
dark red . So I'm going to select this color and decrease the opacity to 60. So my first icon is done. What you need to do is just duplicate
or you can option and drag and select auto-layout together. So shift A, there you go and you
can just duplicate five times because the middle, we're to hide
and let a space in the middle. What you need to do is just change the
icon and the stroke is for the main page. For example, this screen is saved screen. So the color will be
different from the others. So to make it fast, I'm
going to copy and paste. So for the first icon is
going to be "Explore" screen. The second is going to be " Go" , normally
we have the Saved screen at the middle and we have "Contribute" and we have "Update"
if I follow the real app from Google app on my phone is exactly the same icon. So I'm going to hide the Contribute icon,
I will put the Saved screen here instead. For copy paste, I can just
shift option command V. There we go. Same thing. So Command+C, shift Option Command V. I'm going to copy this bell icon,
Command+C shift Option Command V. There we go. So for this screen, we'll keep
this Saved screen as a main page. So we will keep this stroke. For the others, you can take
off the stroke like this. There you go. Let me change the color for every icons. It should be the secondary color. And for this one is going to
be white as a primary color. You can add this little circle if
you want or you can take it off. It's optional if you want
to make like more fancy. You only need to create a small
circle here 3 by 3 . So I'm going to add auto-layout together. For this one, I'm going to align center. There you go. And for this pacing is four. We can keep the same
red color as this one. So this is optional. You can take off or
you can add the circle. So we're going to add
auto-layout together. So shift A center and we're
going to add the padding. So for the left and right padding is going
to be 20 each and for the top is going to be 10, 10, and I'm going to set to space
between and the size is going to be the same size to fit with the screen edge. So is 390 and we going to
bring inside of this frame. So let's bring there center. So don't forget to hide this one. You can just decrease the opacity
to zero like this, then we're going to add a frame together and
Option+Command+G there you go. Let's center again. This first icon is about Explore , the
second is about Go where you want to go. This one is Saved and you can
find a timeline, the history and this one is about Updates. So for my tab bar is done. You were able to follow on the steps from
screen 1 to screen 2 then congratulations. You just created an entire
map app from scratch. I hope you enjoyed this
tutorial and find it useful. Now, go ahead and build your
amazing map app with Figma . Don't forget to like, subscribe and
See you for the next tutorial. Bye guys!
