Neon UI Design from scratch in Figma

Hi, everyone! This is Sourasith from Design+Code. Today we're going to create a movie app design in neon style. So are you ready? Let's do it! So this is the movie app design that we're going to do together. So what's neon style?. Neon design is the lighting of brightly, glowing to the darkness. It's like neon glow sticks that we like to use during the party. So what do we need for today? We need a VR image. From Pixabay that you can download for free We will use a different font, Open Sans, So

everything is going to be free. Okay. We need SF Symbols iOS 15 UI kit from Figma in the Figma community. We need movie images that you can find on Google. Search For a new movie 2022 and an upcoming movie 2022. The last thing we need is a photo of the actor for the cast category. So now we have everything so let's do it. I'm going to. Take all my images I'm going to put in another page. Okay. Choose a frame. I'm going to choose. iPhone 13. And 13 pro. Put 50 on the corner radius. The neon styl

e works best with a dark background. Choose a dark background. I'm going to choose this colour. Don't choose pure black colour Choose a dark blue,dark purple or dark gray. We're going to use ellipse. Draw a circle. The dimension is 166. And 166 Draw another circle.The dimension is 200. And 200. Select the smallest circle and. Go to feel solid. I'm going to take this pink colour. And for this one, I'm going to take this light green. And now what we're going to do is add layer blur. Go to effect

layer blur 200. Then we're going do the same thing on this one. Layer blur 200, and now we're going to select. the 2 circles and group them together. Name your layer and you have to put. It into the frame. Now it's inside the frame. Now we're going to add status bar, go to asset. Go to team labrary Click on the iOS, 15. UI KIT for Figma and tape status bar. We're going to use this one. I'm going to zoom. Okay. Put it in the center. allign top. I'm going to. fit my frame . Okay. Now you're going

to change the color to white. I'm going to add dots Put it in the center. Well, the first circle I'm going to change the color to blue. I'm going to zoom it. And for the other i'm going to change to white color. And the opacity I'm going to keep it like that. We are going to use ellipse again, to draw a circle. The dimension is 338 338. Yes. Yeah. Putting in a center. We're going to go to fill solid. Choose the color white and we are going to put. 15%. Opacity Go to blend mode. And choose. ov

erlay We're going to add stroke linear Place.my color diagonal. And you see the background. This is the color pink so I'm going to choose the same color Did the same thing. Choose the color of your background. This is. Light. green Change the number one to four. Going to add Two more colour, but it's going to be zero opacity. Zero. okay. Like this. We're going to add. effect. Background blur 40. We're going to draw another circle that we will use a mask. The dimension is going to be smaller. I

t's still 328. 228. Now I'm going to group them together. Um, we're going to call it avatar. So click on the smallest circle And put it in the center. Okay. So now it's in center. We going to do is. Go back to image. Take your image. Click on the image. Layer. Put it on the top of the smallest circle. Right Click. And click on use as mask. Now my photo, is inside. So you're going to . Place you image. Now let's add a title. Like I said at the beginning, that we are going to change. The font. I

like to use San Francisco. But this time is going to be open. Sans The size is going to be 34. And choose bold. Okay. And now I'm going to select. Auto height I'm going to add a susbtitle the size going to be 16. And choose regular. Download and watch offline wherever you are. I'm going to choose again, auto height. Put it in the center Now let's create a neon sign up button. Use a rectangle. And draw a rectangle. The dimension is. 160. And 38. Put it in the center And we're going put 20 on the

corner radius. Go to fill color white put. 15% opacity. Go to blend mode and choose overlay. Go to, effect. Add backgtound blur to 40 i'm going to add stroke you going to do the same thing like we do. with the avatar. So Place your color diagonally. Change the number 1 to. three instead okay. What we are going to do ? We're going to duplicate the same rectangle. I'm going to. delete the background blur delete stroke Go to fill linear place your colour diagonally and choose the same color. Cha

nge. Opacity to 100. Go back to blend more. Don't forget to put it back to normal it's not like this. You're going to put your layer. At the bottom. of the other rectangle. You're going to add a effect, layer blur to 60 yeah. I think it's too bright. I'm going to reduce the opacity to 50. So now we're going to write sign up. The size is 14. Sign up. We're going to click on Auto height. I'm going to select everything and group them together Select my text and put it in the center. dots is too hig

h, so I'm going to put it lower a little. Don't forget to name your layer by Sign up button. Select the sign up button, the subtitle and the title together, we're going to put him into auto layout. Right. Click. Add auto layout. or, you can just click shift+A. So what you are going to do? padding. Put it in the center. And you can change the number of spacing between them. 30. I'm going to move my avatar a litle bit on top Go back to the backgrounds and I select the two circles and are you goi

ng to place it? The night. More of a little bit. And to put. At the bottom of the avatar so we can see more alive. Like this. Select your title,we are going to reduce the opacity to 85 percent. Select the substitle going to reduce to 75 We're going to keep the sign up text to 100. So now we're going duplicate. Frame. You're going to delete everything except the status bar and the background. On this second. Screen page. The hero will be the movie. So we're going to play with the background. We'

re going to reduce the opacity to 50. I'm going to add another circle. I am going to change the color to this light blue. And it changed it. Play with your background and reduce the opacity. To reduce the lighting. We want to keep the focus only on the film. Okay. Let's create an original shape. That we're fill with movies images. Use a rectangle. Draw a rectangle, and the dimension is going to be 130. And 160. I'm going to duplicate. I want to have. Tree. Go to edit Select the top right corner

point and move a little bit on the right.. Done. Put 20 on the corner radius. Select the top two corners points. Move a little bit on the right. And the line must be parallel to the first rectangle. If you're not sure, put your rectangle beside the first one. And you can see that it's not parallel. Select again the top two corner and move a little bit on the left. And put 20. And the corner radius. Select the bottom left corner and move a little bit on the left. Again, the line must be parallel.

To the other rectangle. If you are not sure. Just. Put your rectangle beside the other one. Put. 20 on the corner. Radius. Go back to image page, So we have everything ready. And now I'm going to choose a new movie. so I'm going to bring this 3 images bring them here. Bring your image in the frame. Select the first rectangle. And this is you image. Put on top. The rectangle. And we going to group them together. So. Click on command G . or right Click. And group selection. And name you later. S

pider-Man. Select the rectangle. Right click and use a mask. And now what you're going to do is Try to fit the image inside the shape. So click on K. When you resize is going to keep the same porpotion. Try a different shape. Sometimes it's hard to. To fit your image in. So try to choose. a Image that we can still see the title. What's happening when I don't click K and I want to resize. It's Cut my image. I don't want that. So when I click on K, it's Keep the same porpotion. When I want to resi

ze. So it's very important. Now we're going to do the same thing. Bring. The other photo. Put On the top of the second rectangle. You're going to put them together. And Name your layer. Matrix Right click and use as a mask. And now try to fit my photo inside the shape. What. You're going to do this. Same thing. Select Group them together. Name you layer. Select your rectangle and use as a mask. Try to fit the image inside the shape. So if you don't see anything. But eternal layer outside the fr

ame. So now you can see what you're doing. And now don't forget to put. Back inside the frame. So, what are you going to do? Select these tree movie layer and you're going to put into auto layout. Shift+A. or Right click Add auto layout So go to allignment and padding and put it in the center. And what you're going to do is duplicate. And you are going to change it for the upcoming movie. Go back to image page and choose upcoming movie. Okay, now I'm going to choose Aquaman. rename you layer. Uh

, this one is going to be Aquaman. Put it inside. So the photo is here. And then deleted. This one. do the same thing This one the matrix I'm going to replace to Batman. My images here, I'm going to drag inside and delete this old one. And try to fit again. My photo. Delete this one When you don't see anything. Just put outside the frame. . I decided to change the image because it's not fitting well with my shape. I again, I'm going to go back to Google. Okay, I'm going to choose Sony. Let me

see. put back in the frame. Name your layer. For this one, we're going to name new movie. And for this one. cupcoming films Let's add a title. ' We're going to use open sans. The size is going to be 28 and choose bold. Okay. Click on auto height. You going to put it in the center. now I'm going to write new movies. So the say you must be smaller. So 17. Now movie. Again auto width, So I'm going to copy past and i'm going to change to Upcoming movie. I'm going to align my text. now go to as

set. And tape search Detach style And change the color to white. So we're going to keep the capacity to 60. Now we're going to place. Everything. Last step for this second screen page it's to create a tab bar. Use a rectangle and draw a rectangle. The dimension is 390. And 90. Go to edit. Select The two. Bottom corner and put 50 on the corner radius Use ellipse. And the dimension is 68 and 68. Place the circle in the center. I'm going to change the colour just for you to see what I'm going to

do. I'm going to select these two together and go to subtract selection. we're going to draw another circle. The dimension is 60 and 60. And now you're going to put. Inside the hole. So now. we're going to select the two and we're going to group them together. We're going to call the layer by tab bar. . Place your tab bar layer in the frame. Um allign bottom, Put it in th center. So, Select the subtract rectangle Choose the colour white. Put 15%. Go to blend mode. To overlay So go to stroke. Lin

ear. Chose the color white put 15%. And for here is going to be zero. Go to blend mode Choose overlay. Uh,Go to effect and choose background blur. 40. You're going to add inner shadow and put 1 and 1. The colour is white And I put 50%. Go to blend mode and choose overlay. Copy propreties the rectangle and go to the circle. We are going to past propreties. Okay. now we need a symbol. So. go to SF Symbols 3. So we need house symbol. How The play. The play TV. We need Plus We need rectangle. Stra

ck. And we need arrow down circle. Okay. I have everything. So what I'm going to do, I'm going to duplicate the, this one, the plus symbol. I'm gonna select each symbol. I'm going to put. in auto layout. SHIFT+A Okay. I'm going to select everything. I'm going to put them into auto layout. And a place. And you can see it's not alligning. Go to alligment and padding. Put them in the center. put it in the center. I'm going to prevent. I'm going to change. This number of the space in between. Put it

in the center again. Okay, what I'm gonna do is I'm going to hide this one. So you're going to click on the eye. But don't click the frame because if you click the frame. What's going to do is remove the symbol. You don't want that. You want to keep the same spacing. But you don't want to see this symbol. So you click in the fame layer and click on the symbol and click on the eye. So we're going to take this. Plus symbol. You going to put it in this circle. So. So rename the symbol. I'm going

to call it. Symbol. Put it in the. Frame. And so like does circle. And the plus symbol. We're going to group them together. Who's back in the tub. Name, please. I'm going to add a home. go to asset. Change the color. So the patch. Time change the color to white. Good. Again, and a frame. Hello. Let's take the plus button. We're going to do the same thing as the sign-up with that. No. Select an ellipse. Go to stroke. Linear. Place your colour diagonal We're going to use this pink colour. This one

we're going to take. This light green. Go to blend mode. Select normal. change the number one to 3 instead. Then, change the opacity to 100% And now we're gonna click on the same ellipse. We're going to duplicate. So this is the copy. I'm going to. Put ' At the bottom. So I'm going to delete the stroke. I'm going to delete everything. Go to fill linear. We're going to place the colour diagonal. Now I'm going to use the same colour. The light pink. Light green. Change to normal. The opacity to 1

00% Go to effect Layer blur 40 is too light begin to reduce. Two 50. So select your title. We're going to reduce the opacity to 85% Select your subtitle we're going to reduce the opacity to 75. Select another subtitle and reduce the opacity to. 75. And for the rest, I'm going to keep it like that. We going to duplicate right. We're going to delete everything, except the status bar. So on this page is going to be about a description of a movie that you choose. So choose a movie. So go to this web

site, it's all about the movie that you can find all the information. that you need. So I choose Eternal from Marvel I have all the information that I need. The storyline. The rating,the year, the time,the director,the category. And. The star. So first choose a image of you movie. Go back to images page and choose you. Image. And bring them. Here. you're going to place your image. And to startus bar must be. On top of everything. Draw a rectangle. So use rectangle. The dimension is going to be 3

90. And. 422. Bring your rectangle inside the frame. So the image must be on top of the rectangle. So, selet the image and your rectangle. We're going to Group them together. Select the rectangle. And click on use as a mask. Click on the frame. Go to fill linear. Put your color vertical. Raise the line. Choose a color black. The opacity is going to be 100 and for this color is going to be the color of the background that you choose at the beginning. We going to write a title Choose bold. And thi

s side is going to be 24. So choose. auto height Put in a center. And choose the color white. I'm going to reduce to. 85%. Now we're going to write the year. of the movie release. ,thE category and the time. Choose regular and the size is going to be 13. Okay. So you're going to put more spacing between the year and the category, because we're going to. put a circle we're going to put dots between them. Okay, so I need a spacing. We're going to choose auto widht. and put it. And the center. We'

re going to add dots. The size is 4 to 4. Change the color to white. I'm going to duplicate. So I'm going to select everything and group them together. And put it in the center. Let's create the rating. Click on Star. The dimension is. 14 You're going to duplicate. We need. Five. So i add the rating star color is going to be yellow. if you go back to the website, You Can see. That it's only 6.4, to 10. So I'm going to put it three star. So I'm going to choose this color. And for the rest is goi

ng to be white you're going to select every star and group them together. Rename by rating. Put it in the center. now we are going to add the storyline. So I'm going to copy So I'm going to change the size 14. Choose regular. I'm going to take. auto height. put it in the center. Okay. Now that it's aligning. Add a separator. Use Rectangle. The dimension it's going to be. 219. And two. Put it in the center. The colour is going to be white. go to fill. I'm going to put the opacity to 15. I'm going

to change the opacity of my text color.I'm going to changes to 75. 75. It's okay for the stars I'm going to keep it like this. So now we're going to do the cast categorie Use rectangle. The size is 1 51 to 50 go to edit. Select the top and the bottom corners point of the right side. Put 20 on the corner radius. So we're going to draw a circle. So use ellipse and the dimension is going to be. 68 and 68. Let me change the colour. Place it In the center what you see the red line means that you

r circle is in the center. So you're going to place. Next to the rectangle. So, select the circle and rectangle together. Go to substrate selection. And now we're going to draw another circle. The dimension is 60 to 60. You going to put it in the center. Place the circle Next to the rectangle. And fit it in the curved corner. You're going to group them together. so it's not in the frame, so we have to bring them in the frame. So select, the substrate rectangle. Go to fill solid. Choose the colou

r white. We going to reduce the opacity to 15. We're going to add stroke. Go to fill linear and the color of the top is going to white and you're going to reduce the opacity to 20. And the color of the bottom is going to be black. Reduce the opacity to 20% Now we're going to do the avatar. Select The circle. God to fill solid. Choose the color.white Reduce the opacity to 15%. You're going to add stroke. Choose a color white. We going to. Reduce the to 15. So we're going to draw. A smaller circ

le. I'm going to do a duplicate. M frame is outside. So I'm going to put it back inside. So I'm going to remove the stroke. I'm going to change the dimension to 58 and 58. We're going to select the 2 circles. And we're going to group them together. I'm going to call it Avatar. Select the smallest circle and put it and the center. Let's go to the image page again. Bring all the photos that you need. So I'm going to start with Angelina. So my images is here. I'm going to drag insides my avatar. I

'm going to select the smaller circle. Right-click and click on use as a mask. And we're going to change the opacity to 100%. Click on the photo and we're going to place the photo. Now I'm going to write her name. Choose regular. And the size is going to be 13. Angelina. Jolie. So choose that. Well, two eight packs. Aling. So I'm going to bring my techs. And side my group. So I'm going to grow with the substrata rectangle. So with them to get. And I click again on the techs. And I'm going to put

it in the center. What else? And I'm going to tell them my layers, like. Angelina Chile. So, what I'm going to do is. At duplicate come and see. And I'm going to escalate it to. And then the seat and come and then put. Next. And I'm going to give it to them. I'm going to group them together. Let me call. Cast. I'm going to put everything in the center. So what'd you going to do? Is to change the email age and change the name. So. As well, and it's going to be. Jane much. This. Going to be Russi

a. The And this one was going to be. It is email. CIMA. Change. Oops. Uh, yes. Sure. So we're going to add. Title. So. As. And the size is going to be 20. Then I choose bold. Then I choose to auto width. I'm going to aling with my task category. I'm going to slate the story line. so I'm going to insulate the. I think, uh, we, at the time. And my title. We going to put it and auto. So she is a. Good to adding my Patty. Put anything into center. I'm going to keep it like that. So the space, the nu

mbers space in between. It's going to be. 20. Put everything in the center. So moving. Bid. Okay. So let's create a play button and navigation button. So we need to go at the sample. Cisco Semantria again. so we need arrow left. The mute line tree. Arisen pal and play. Oh, I did. Change. Okay. So like all the symbol. We're going to change the color to. Right. So I'm going to take. This assemble first. I'm going to place and the top. /We going to put an out or delay. Layout. She please. A. Go to

fill. Reduce the opacity to 15% so the dimension is 44 and 44. Put 50 on the corner radius. We're going to add stroke choose the color white.Change the number 1 to 4 so go back to stroke, go to blend mode and choose overlay I'm going to add effect. Background blur put 40. I'm going to duplicate. We are going to select the 2 symbols frame. We are going to put in auto layout again. Shift+A You're going to rename navigation button. Mania. So this one's going to menu button. And this one's going to

be. Arrow left button Go to spacing between item. So. Change the number. 260. replace the symbol. Delete the arrow left button. So. We going to do the play button. i'm going to place it Select the play symbol. We're going to put it in auto layout. Shift+A. So the dimension is going to be 60 to 60. Go to fill and reduce the opacity to 50%. Go to allignment and padding. Put it in the center. Now we're going to put 50. On the corner. Radius. Go back to fill solid and go to blend mode and choose ov

erlay Choose linear. So we're going to do like the plus button, Place your colour diagonal. So I'm going to choose the same color. choose the same color. Place your colour diagonal. We're going to change the number 1 to 3 instead. We're going to add effect, background blur, it's going to be 40. So we're going to add drop shadow. We are going to choose the same pink colour. So it's going to be negative 2. And four. We're going to reduce the opacity to 25% we're going to add drop shadow. It's go

ing to be 2 and then choose the same color. We're going to reduce the opacity to 25%. We're going to draw a another circle with the same dimension. Go to fill linear choose the same color. Place your color diagonal. We're going to add effect layer blur to 40. I'm going to put under my play button. it's true bright. We're going to reduce the opacity to 50% We are done for today. So thank you so much for watching. If you liked the video, don't forget to like, and subscribe. Thank you and see you n

ext time. Buh-bye. Bye.