Hello guys, welcome back. In this video we're going to design the party we screen for application. The party was screen is essentially the main screen of our application. Since it's an access point to many different screens, such as the calendar screen, the ticket screen in the single party screen. The main purpose of the party we screen is to provide the user a list of available parties the given date, so Enough talking and let's get down to business. Firstly, select your Rectangle tool and draw a rectangle across the entire screen.

Change its name to BG for background and move it down in the last color. Let's change its color to 071923. Now let's use an image to enhance our background visually downloaded this image from unsplash.com, which you can do as well for free, select this image and drag it over to a canvas, resize it and position it according to your liking. Now let's move the image down in our layer stack. Great. Okay, let's add another field to this image, which is going to be a linear gradient with the same color as the background.

On both color stops. Select the first gradient point and remove its opacity to zero. adjust this until it blends well with the background. Now we're going to add a header to our screen. Later, we're going to convert this to a component. FEMA allows us to create components and reuse them across multiple screens.

That will ease our job a lot. Plus when we make a change, it will reflect on all the components copies. Select the rectangle tool again and draw a rectangle that's full width, but change its height 140 pixels. rename this to BG for background and move the layer down in layer Step. Click this eyeball next to it to hide the layers background. Group this using Ctrl G on your keyboard and rename this group to Heather.

Now select the type tool and typing parties in Berlin. Change the font to personally the font size to 30 pixels. The font weight to bold the letter spacing to 4% since there was moisture condensed form, and finally, change the color to white. This is going to be our title. Move the title into the Harris folder and movie top top. Select the eyeball again.

Next to the ground layer to see the background. Now, move the title 20 pixels from the bottom of the background. Told eyeball again on the background layer. Now let's copy the title by holding ALT and moving it upwards. Change the font size 18 pixels, move it to the left and move it 14 pixels from the top of the title. Okay, we're going to change this to a date, for example 17 November 2018.

Let's position it accordingly. Now let's go over to the assets panel and grab the icons that I've provided. Select them and move them over to our cameras. Let's move them into the healers folder and position them to the edge of the screen to the right align them with the top of the day. And let's change the color to white. These cycles are going to represent the ticket screen and the calendar screen respectively.

Okay, so select them both and move them 15 pixels from the edge of the screen. Great. Okay, let's select our header folder now and let's create a component tada we selected and click this icon which says create a component figma will now create a component out of our folder. Let's move it to the left. And let's copy it by holding ALT and dragging right onto our canvas. This now creates a copy all of our components which we can reuse across all our screens.

Let's see how the components work. We've made a mistake mistake Filling the work part fishing to our title. Let's change it now into our master component. And let's see how the changes reflect onto our copy to the right. See, that's how easy it is to work with components in figma. Now, the only thing left for us is to create the parts list itself.

Select the rectangle tool, click once and type in 345 pixels for the width and 120 pixels for the height. adjust this to the center of our screen and change the color to one v 1540. Change the corner radius four pixels and let's add an effect to it. Drop Shadow 10 pixels were five pixels for the y value and 20% for the opacity. Change the layer To BG for background, move on to our assets panel and select this image which I've downloaded again from unsplash.com. Just go to unsplash.com and type in techno into the search bar.

You can find plenty of images to play with. Select the image and drag it over to our canvas. Let's adjust the width to 95 pixels 97 pixels for the height. Move this accordingly into our panel and adjust it 10 pixels from the left of the edge. Let's change the corner radius to pixels. Select both the image and the background and group them using Ctrl G. Let's rename this group to list item.

Select the type tool again and typing EMA Kravitz Let's change the alignment to left and to middle. Change the color to white and change the font size to 24 pixels. position this and align it 10 pixels from the right of the image. Copy this text by holding ALT and dragging it down. Change the font size to 18 pixels and the font weight to book. Change the fields opacity to 70%.

And let's change this to Burke Hi, Pamela, and bar. Select both the Burke hind text and Nina Kravitz and group them together. Call this info and move it into our list item. Select this group and duplicate by holding ALT and dragging it down. Let's zoom in and let's swap the text To move this to the top and move this to the bottom now change this to start and change this to 1pm. Change this font size to 18 pixel and this font size to 14 pixels and adjust them accordingly.

Let's rename this group start duplicated by holding ALT and dragging it to the right and let's move them 20 pixels from each other. change this one to price which will indicate the ticket price and change this to something like eating euros. Rename this accordingly. Now the only thing left for us is to design a call to action. A call to action is something that incites action for the user. For example, buy tickets, grab the text tool and typing get tickets.

Let's change the font, the font size to 14 pixels. And let's move this to the left. Put it inside the list item and change its color to Ed to D AC. Changed the font weight to bold. And let's zoom to adjust this to the ball. Now, I've added an arrow icon to the assets.

So let's grab it and move it over to our accounts. Okay, let's position it here. Let's move it into our list it Group let's move it 10 pixels or five pixels from the get tickets. Let's select them both and group them. We'll call this CTA, which stands for call to action. Move it over to the edge of our background for list item and logic 10 pixels to the left.

Great, we now we now have designed our list item. Finally, we're going to convert this list item to a component so we can reuse it again. Let's select it. And let's click on Create components. Move it over to left and copied by holding ALT and dragging it back to our canvas. Let's center it.

I was duplicated four times. holding ALT drag down and more with something like 10 pixels. There's a gal And finally, fourth time, select all the list items, merge them down to the bottom of our screen and move them 15 pixels from the bottom. Okay, so we now have the list items for parties. I'm going to pause the video and populate the data now. Welcome back.

As you can see, I populated the data for variety with various DJ names, venues, ticket prices, etc. I also changed the images of the different parties. Now, signal doesn't allow us to add images or other elements into our components instances. The way we solve this is to put all the images into a master component. Go to the list item and click on the eyeballs of the images you don't want to show. And that's it guys.

We not have the party list screen finished so far. We've learned many things such as how a list item should be organized with images, information in call to action. Finally, we learn what are components in figma how to work with them, and why are they important in design. Thank you for watching. I will see you in the next video.