Hi guys! My name is Aksonvady
from Design plus Code. We are going to build a dark mode. From scratch and Figma. Oh, and teach you. How to create a modal bottom
sheet glassmorphism like this one with neon light effects. We will build also a segmented
control with 2 controllers. Hourly forecast And I will show you
how to transform this modal Into this. same. In this tutorial, we won't
focus on create this widget. From scratch. We are going to use a component
that I already created. And we will also create this page. We will a custom do a
custom shape for the widget. Very simple to do. This design is inspired
by Apple's weather app. All right. Let's get started. Before we start designing, please make
sure that you download the resource file from the Figma community. You can search for my name Aksonvady
Phomhome or the Weather App's UI Design. I will also give you the
link for the resource. What you have to do is click
on this button to duplicate. Once it's duplicated it
will open directly on your draft section. To follow my tutorial, you will
need these components that I already created for you guys. And they have text styles and
Colors styles that we used a lot. Of label colour. And you will find the
components on your assets here. What you have to do is click
on this plus to add a new page. And from here, you start a new frame. Let's start with creating a frame. Press on A key. Set the size for 1600, 1200. Let's go to the design page, let's
change the color for Radial color. First color, set it to F7CB FD. The second color changes it to 7758D1. Change it to 100%. Change the direction,
something, like this. Now, add a frame and press on
A key, you will see the list of iPhones on your inspector panel. For me, I will use the iPhone 13 Pro. I will drag inside the frame. Set the radius to 46 and click
on this icon, click on corner smoothing, change this value to 70. Add effects, choose drop shadow,
change the X value to - 40. Y change it 60 and the blur, I
will change the value to 150. Change the HEX color to 3B267B. with the opacity of 70%. Now I will add a linear color. First color is 2 E 3 3 5 A. Second colour is 1 C 1 B 3 3, 100%. So I will move a little bit
from the left and right. All right, so far so good. Now we will more focus on create
a modal with glassmorphism Now, I will import the image. Choose from the assets,
I will add my background. Or youcan use Unplash
plugin for you project. Your can also search the image
on their website Unsplash.com. In this section I will use 3D the
Christmas Illustration by Iconfinder. I like this home. It's cute. I also use. Weatherly 3D icon by Piqo? Okay, let's drag the image here. Center horizontal and vertical and I will
add Home, I will align from the center. Change the Y position 304. Now, I will add a rectangle. Change the size to 390 to 500. Position from the bottom,
move it inside my iPhone. I will place it behind the house. So let's change for linear color. The first color, I will set it to 3 A 3 F
5 4 with the opacity of 0% and the second color is the same color so I will just
copy and paste and change it for 100%. Let's name it Home. Set the position to Center Vertical. So far so good, let's go to assets. This part, I will not going
to recreate from scratch. I'm just going to use the component. Align horizontal center. Now, let's add a status bar. Let's position from the top and center
and this text spacing will use 54. All right, so far so good. Now, we will focus on create a modal
bottom sheets with glassmorphism. Let's add a rectangle press
on A to draw a rectangle. Now, go to the design panel, I will
change the size to 390 by 3 25. I will align from the bottom center. Click on this icon to
add different corners. The top left, I will change it to 44. Top right, 44 and the bottom
we don't need to add it. Now, let's add linear color. The first color, let's
change it to 2 E 3 3 5 A. Second color change it to 100% and
change the color to 1 C 1 B 3 3. Now I will change the
position a little bit. I move from the left and right. I will change the opacity to 20%. Now, I will add effects and
choose the background blur. Change the value to 50 and then,
I will add an inner shadow. Change the Y value to 1. And blur I will set it to 0. Color to white to 100% and
I will add a blending mode. I like to use overlay it gives a very
nice effect of lights and it blends well with the background color. Select this rectangle, you can right-click
on your mouse and choose, Frame Selection, or you can use a short code. Option Command+G to create a frame and
then your rectangle is inside the frame. Let's call it Modal. Now, inside this modal,
I will add an ellipse. Press on O to draw ellipse and hold
on Shift to create a perfect circle. I will change the size to 250. X position to 271. Y position to 65. So I will add a angular for this one. I will use 4 colors. The first one, it's going
to be 6 1 2 F A B, 0%. For this angular I will use the
same HEX color, Command C to copy. The second is the same color, paste here. It's going to 100%. Third color, it's the
same color with 0 opacity. Fourth it's the same color with 100. I'm just going to move here a little bit. Now let's add effects
Layer blur, set it for 140. Let's add second ellipse, I can
just duplicate this ellipse, I can press on Option key. When you see two arrows that mean you
can drag and duplicate like this. Change the size to make it smaller so
uncheck this constraint proportions, change the size to 286 by 32. Change the X position to 48, Y -33. So I will change for solid color. Layer blur, change the value to 60. Now let's add a second ellipse. I'm just going to duplicate this
one, I will change the height for 10. The HEX color is C 4 2 7 F B with
the opacity of 50%, Y position I will change it for minus 10. I select this ellipse and click on
return key to edit with the second point, change it for minus seven. So let's change the HEX color
it's going to be E 0 D 9 F F, 100% and layer blur change it for 10. Select in the modal frame, go to
design's page, the inspector, you can check this clip content and it will
create a mask for you and now we see a lights effect at the top of the modal. So now let's create a
segmented control at the top. I will add frame inside the modal. So let's change the
dimension to 390 by 49. Let's position from center horizontal
and align from the top and inside I will add an indicator I will add a
rectangle, change the size to 48 by 5. X position 171. I will set the corner radius to 10
and change the color to black, 30% opacity and now I will add a separator. Create a line you can hold on
Shift and drag, I will change for 390, align from the center. Color to white with 50%,
1 thickness and center. Y position it's 49. For stroke, I will use blending mode. Let's choose overlay and then
I will add effect, drop shadow. Set the Y value to 1. Black color is fine so I will
use 20% opacity and use overlay. For this frame, let's uncheck Clip
content because I don't want masking. So this one, we will, name it Indicator. Let's name it Separator. Let's duplicate this layer. So I will change to Underline. I want to create a light then let's
go to the inspector, let's change the stroke thickness to 3 and
it's going to be from the outside. So I will change to linear color. Let's add a third color. First color, I will set for
white and with 0% opacity and second color white, a 100%. Third color is white with 0% opacity
and blending mode overlay is fine. Now, I will add another frame. Set the size for 390, 16, and it's
going to be from the bottom center. Let's add text press, on
T, write Hourly Forecast. Let's center from the left, center. So I will change the text style. In order to use the components, go
to assets, click on Team Library and for the weather app just click
on Publish and then you Publish. Okay now let's change the text
style, bold subheadline is fine. So let's change the label
color to dark secondary. So spacing left, press on Option
key to create a red guide. I want this padding from the left 32
and my text is aligned from the left. Let's duplicate this text. It's going to be aligned from the right. I will Align Right,
padding right 32 also. I will change the text to Weekly Forecast. The padding from the bottom eight. All right, now it's better. For this one I will set for 100%. I will change a little bit from
the center here, much better. Now let's add a weather column. Set a frame to 60 by 146. So I will set the
spacing Top and Right 20. Press on Option to see the red line. Let's add fill color. Change the HEX color to 4
8 3 1 9 D, opacity of 20%. Let's add stroke, set the color to
white, 20% also, 1 thickness and inside. Let's add a corner radius of 30. Let's add effects, inner shadow,
change the X value to 1, Y to 1, there's no blur and change the color
to white, twenty-five percent it's okay with the blending mode overlay
and then let's add a drop shadow. Change the X value to 5, 4
it's fine, blur change to 10. Color it's black, 25% is okay. Now let's add hours. Press on T, 12:00 AM, text alignment
center and let's align from the center, bold subheadline is
fine and label color is primary. Let's use spacing 16 from the top. Now I will add another
frame for my 3D icon. The size is going to be 44 by 38, center. Now we will go to assets, search
for 3D icon, let's choose this one. Let's position center top. Now, I will add another text,
30%, alignment from the bottom. Text style it's bold footnote
and hex color is 4 0 C B D 8, aligment from the bottom, center. This frame 4, I will uncheck clip
content, just going to move the icon up a little bit by four pixels. Spacing 12 here. Now, let's add another text for degrees,
press on Option and copy this text. It's align from the center,
change the number 19 degrees. Let's change the text
style to regular title 3. So the spacing is 16 from the top, 16
from to the bottom and the degrees is 16 from the bottom, here 16 from the top. All right, so let's call this frame
Icon and this one, I call it Hours. Now let's duplicate this frame. I will add a spacing 12 and this
one I want to change the style when it's active . It's the same color
we just going to put back to 100% and stroke we can change it to 50% opacity. I will add blending mode with the
outline, it's going to be overlay. Drop shadow is the same,
inner shadow is the same. I'm going to change this text for now. This I don't need, just hide. So let's duplicate more columns. What you can do is duplicate this column
and change text, change the icon but for me just to save time, I'm just going to
search from the assets and drag it here. Use the one that I
created with the variant. What we can do is select those 3
together and then let's add auto-layout. Go to the inspector, add auto-layout,
spacing between is 12 and the spacing from here, 20 is fine. So this one that I created a variant,
so it can choose the hours that I want. For now it's 2:00 PM. This one, I will change for
3:00 PM and this one for 4:00 PM and this one for 5:00 PM. So here, I can decide that
it's raining a lot like 50%. So this frame let's name it Hourly. This frame let's name
it's Segmented Control. All right, let's get started. First, let's create a rectangle press
on the R key and draw a rectangle. I will set the size to 390 by 88. Position align bottom Center Vertical. Now let's custom this rectangle. Select this rectangle, press on the
Return key to edit or just go to the top center option here to edit
and when you see points here, that means that you can edit the point. So you can press on P to use a pen tool. Add one here and use escape and
I will just add new points here. Now let's select the
points that we created. X position changes it to 262. Now let's select these two
points, and drag them like this. Now let's move down by 20 pixels. You can press Shift and click
two times on the arrow-down. Then switch back to the pen tool. Press on Command to bend
this point, like this. Or I can use a move tool. Select points and press on
the Command key then click. Now it's bent, it creates a curve. This is the way we want
so it's fine, like this. Now let's add a linear colour. The first colour is 3 8 3 8 6 A. Second colour is 2 5 2 4 4 C. Change it for 26% opacity
and then I will add a stroke. Change HEX colour to 7 5 8 2
F 4 with an opacity of 50%. Thickness for 0.5 and
it's from the outside. Now I will add effects, choose
Background blur, and set the value to 50. I will add a frame, Option
Command G to create a frame my rectangle is inside the frame. For this frame, I will name it Back. Now I will add an icon. I will choose from the assets the
one that I created as a component. I will use this one and this one. I use Option to help
me guide our position. So padding from the right
it's going to be 32. From the bottom, it's going to be 24. Same thing here. Padding from the left it's
32 and 24 from the bottom. Okay like this. Add a frame. Option Command G. I will use the constraints
for top, right and bottom. Back frame, left, right, bottom. Now I will add another rectangle. Change the size to 258, height is 100. Align vertical center and align bottom. So same thing, I will press
on Return key to edit. At this point I will change the X
position to 122, I will select this point and changed the X position to 216. When I press on Command
you will see the icon. This is a handle so you can move around. I want a straight line
so I can press on Shift. When you see a red, it
means it's straight. So this point, I don't
need it, I can delete it. Click on this point again and
now select this point here. Let's change the X position to 278. Same thing for this one, use Bend
tool, click and move this handle. Make a straight line. Okay. So I will change the X position 142. For this point, just
delete what I don't need. This is 174. This is 1 42. Now let's go to the bottom right. I will use Bend tool. Press on Command. For this one, I will use the
top handle and move to the left this make a straight line. So for this handle, click and delete. Click this point again and
select this anchor point. Let's change the X position to 256. For this bottom left, click
and press on Command to bend. Select the top handle
and move it to the right. Press on Shift to make a
straight line like this. For this one, we just going to delete it. Select this point again and 134. So this one, I will change 112. Okay, now it's better. Let's add a linear color First
color, change it to 2 6 2 C 5 1 Second color to 3 E 3 F 7 4. Click on stroke, change the colour to
7 5 8 2 F 4, Set the opacity to 50%. Thickness I will use 1.5 from the inside. I will add effects, Drop shadow. Set the value to 4. Blur to 4 Change the hex
color to 7 5 8 2 F 4, 100%. Now I notice that this one
have an opacity i don't want. It's going to be 100%. now, I will add a frame, I will
just select this layer and right -click, then chosse frame selection. And my shape just inside the frame. I will name it Front. I will. add an ellipse inside this frame. Press on O, and shift to
create a perfect circle. Change the dimension to 64. Align from the center center. Now, it's more easy
align inside the frame. Spacing from the top. 12th. And boredom 24. let's change the color, select linear. Set the first color too. Black. Second color is white. So 70%. And I will change the direction. I will move a little
bit from left and right. Now, go back to fill
change the opacity to 40. Add effects, layer blur and set it to 1. Press on command D to copy and change the
size to 58 I will align center, center. Padding is 3. Select ellipse 4. I will name it the ellipse 1. Add the frame. press on option command G. Add this ellipse inside
and we name it ellipse 2. Change the property. Who's kind of is. F 5 F 5 5 F 9. Second cut. That is D A D F E 7. Add stroke. First color is white. Second color change. A E A E A E 2 thickness from the inside. For linear is 100 opacity. Okay now, let's add drop shadow. X value 10. Y value 10. Blur set it to 20. Change the hex color to 0 D 1 4 3 1 50%. Add a second drop shadow. I will use the opposite. X is minus 10. Y is minus 10 Blur. 20. And the color is white, 50%. Use, overlay? Really. Now it blends so well with the color. Now let's add inner shadow. X is 1, Y is 1 Blur. It's 1.5. Hex color is white, 100%. now. I will duplicate this ellipse
I will use it as a mask. Right-click, use as mask. I will just keep fill
there rest just delete. You can duplicate ellipse 2. And we can move in in the top of mask. I will change it for mask. Here I can change for ellipse blur. for this one . I will
create a ring blur so. I will use Arc tool, like this one. Once you click in this point. When you move a little bit. You will see a new option here. This is my starting point. And here is the sweep. And this one is for the ratio. To create like, kind of
thickness to create a ring. Sweep, it's like. rotate and starting point. This way, you will rotate. I will play with the numbers here. Set it to 0, here is goint to be 100. I'm here I will use 90% thickness. So, I will use linear. for this ring. The first colour is white with 0 opacity. Second color, I will use. B B B F C 7, 100%. For this one, there is
no stroke, just remove. I just need an option here
and changes to layer blur. Set the value to two. This frame. let's call it button. This are the components that I created. You can use those icon. To follow this tutorials, or you
can choose your own icon from the Figma community or from FS symbol. Now, let's go to assets, I
will search for plus button. How in place It's center from
horizontal and vertical Change the color to 4 8 3 1 9 D. For this button, I will use center bottom. The front, I will use
left, right, bottom. Select those 2 together and add
another frame, option command G. And then I will name it. TabBar. Contraints I will use left, right,
bottom, Let's move inside the top bar. Let's use constraints for rectangle
4, left, right and bottom. Se lect frame 2. Use auto-layout Let's go to the inspector. Add auto-layout I will use
padding as space between. And then when I scale it shrinks together. Okay guys, That will be
all for this section. Now press on the option
key to make a duplicate. On the second screen, we
will keep this status bar. And the bottom sheets. So, I am going to delete the house
and the background behind it. Remove the segmented control. And the forecast. And we don't need the tab bar. Hide for now. All right, this text I will change it, Let's go to the assets search component
that I already created for this one. vertical center It's going
to be 10 from the top. Move these bottom sheets to the top. Spacing between It's 12. Make it large. That's going to the end. All right. Bottom sheets. Let's hide this rectangle. You don't need it. The ellipse 3, change the colour to
9 6 and I will move to minus 16. Change the Height to 13. Now I will add the ellipse
and I will duplicate it. Press on option. Copy and drag here. Then I will change the
position, X, to 43 by 284. Change the dimension to 425. Change the layer blur to 200. Add this frame again. Change the position X to 0. Y 80. For this ellipse, I will put
it outside and behind the modal like this and the Y position. Let's set it to 80. Now it creates a light effect here. Add the same indicator. And then I will add a separator
at the top to create another line. Press on L to create a line. Make it straight press on shift. Let's change the size. 390. From the top, so that we can see. It adds linear colour. Let's make a straight line I will
add a third colour in the center. I set the colour to white and 100%. And the first colour. It's white put around here. And the third colour, it's around here. It's white with 0 opacity
and then I will use overlay. Now it makes a beautiful highlight. At the top. So on the screen. We won't focus on detail. I'm just going to. Replace. we did the component
that I already created. Place it here. Let's align the horizontal
center from the top. Can you 10 spacing. Next card, this one spacing is 10. And padding from the right is 26. left padding is 26. Okay. The space between is 10. This one. We can add an auto layout. And then let's duplicate. select those 2 frames together. And then let's go to the inspector. Let's add another auto layout and
spacing between I will add 10. from here I will change for Wind. Next, I will change it to rainfall. Let's duplicate this selection
in this component and I will change it to humidity. And this one, I will change to Feel Like. All right. From here we will just
change this forecast Details. And let's duplicate. For the third screen, we just
going to delete all of it. This one I will unground. I will name it ellipse 1. Layer blur set it for 200. Yes, this is ellipse 1. Here is fine. Now let's go-to assets. Search for Top navigation
with a search bar. On this tutorial, I won't focus on
doing top navigation because I did a lot of my previous tutorial, so
I'm gonna just skip these steps. Let's aligned from the left and top. Create a rectangle. Change the size to 3 38. 185. Let's align center, horizontal. I will use spacing for the top 20. Alright, now let's go to the inspector. go to a design page. Click on this icon to create. custom corner radius. I will set it for 30, the rest is 22. First I want to add a frame. Press Option Command G. Press on the return key for edit mode. Now, let's select this rectangle. And select on the top right point. I will change the Y value to 80. now escape from edit mode. Let's click on these three dots. I will use the corner smoothing. To 100. Now the shape. It's more interesting. Let's add some. linear colour Let's align
from the horizontal. The first color to 5 9 3 6 B 4
the second colour., Change it to 3 6 2 A 8 4 Set it to 100%. I want dark for the left. Let's Import the 3D icon. I will select the big one. The size is. 1 60 by 1 60. I will position it from the right. And here is going to be minus 12. let's add text. Press On T to add a text. Write 19 degrees. I will use the SF Pro Display regular. And the size is 64. And the colour is fine or we
can use Label Dark Primary. Let's align from the left 20. Top is 5 8. Now let's add another text
high and low temperature. I will chance for 15 for now. Height. 2 4. low 18 degrees. Press on enter the key to create
another other line, I will add Montreal comma Canada. Let's select the first text. I will change it for Regular Footnote. And Montreal select together. Let's change it to Regular Body. Select these line of
text to dark secondary. Let's align from the left 20 bottom 20
left . Add another text on the right. Now let's write Mid Rain. Regular footnote. Padding bottom and right is 20. Text alignment from the right. Alright, we are with the first card. Let's name it Weather widget. So we can duplicate this. And when you spacing 20. And when he can do is change the
icon, change the description here. So for me for save time I will use
the component I already created because We use this same steps. I will just replace by this
one this widget I create the component with variant. So I can choose. my second city is going to be Toronto. Next, I will change to Tokyo. Last, I will change to Tennessee. All right guys. We are done with the design. Congratulations for everyone
that follows into the end. I hope you like it and enjoy and
you learn something new today. And. I will see you on my next video.
