 In this tutorial, we're going to create this music playing app in Figma. So let's get started. Create an artboard. Choose desktop. Select the rectangle tool in the top left. We're going to create the side panel. Click and drag it to size. Change the fill to black. Change the width to 250. Make sure it's aligned. Copy and paste it to the other side. We're going to create two. Now create another rectangle. Make it 350 pixels high. I've already prepared for this file with assets, but you can find three icons. Our icon finder.com or font awesome, which is what I'm using for this free tutorial. Here I'm just experimenting making sure it's the right size. Bring across the home icon. Now bring across the book icon. We're going to also bring across the plus and favorite icon. I'm resizing all of them to 25 pixels. The plus icon looks a little small compared to the other, so I'm going to make that 40 point size. Now I'm creating the divider line. Bring across the line tool and I'm going to make this a dark gray. Now I'm using my text tool and I'm going to start to create the text. Here I'm going to type in home and make it hell better to get text. Now I'm going to fill in the rest. Search your library. Create playlist and liked songs. Now I'm going to start aligning everything. I've clicked and dragged everything and made sure it's aligned to the left. I'm also going to change the color and try F7 to make it a light gray. Now I'm going across and selecting the icon and the text, making sure they're aligned and grouping each one. Now I'm going to make sure that the space in between them all is equal. This line I'm going to make a little darker. Next I'm going to make some more text with some playlists on them. I've just copied and pasted the text from the top just to get me started and now I'm going to type in playlists 1, 2 and 3 and make sure that each one is equally spaced out. These look a little bit too big for me, so I'm going to change the font size. Now that they're a little bit smaller, I'm going to make them all closer together and just positioning things to make it look better. In my assets file, I'm going to copy and paste an image that I've found, but you can also find similar images at unsplash.com. That's a place where you can get royalty free images. For this image, I just typed in band. Then I pasted it above the rectangle, grouped, selected them both, and then right clicked and used and used as mask. Now I'm making the headline some text Helvetica Bold 60. This is the title of the band. I'm copying and pasting the text from my playlist here because I like the size and this is how many monthly listens that the band has. The next thing I'm going to do is create some album art. Here I'm doing a layout grid. This is so I can align everything properly in the design. I probably should have started with this, although I've just realized I need it now. So this is something that you could add at the beginning of the project. I'm going to play around with the margin sizes and the amount of guttering and columns until I find one that aligns with my band and the square. This might take some time. It's just a bit of figuring out some numbers. This one looks about right, so I'm going to align everything with the side. Here I'm going to create a track list. These are the most popular songs. Now I'm grabbing a rectangle and making the rectangle fill the white space. I'm going to right click and click send the back. And here I'm going to add the linear gradient from the top to bottom choosing a color from the image and black as the other color. Things are looking better now. Because the background is darker I now need to change the text color to lighter. I'm now aligning everything centrally. Now I'm going to copy and paste the text and move it across. This is how many listens this song has had. This is how long the song is. So it's three columns for each song. Now I'm going to group this. I'm going to make a component out of it. That way if I change the design later like the size of the text or anything it will replicate across all of the writings. Now I'm going to duplicate and it will copy the spacing that is above. Now I'm going to go through and change some of the numbers to make sure it looks unique. It's worth putting in these extra details to make your design not look like it's a template. Now we're going to select the rectangle and create the bottom bar. This is the current song that's playing. I'm going to make it full width and then I'm going to fix the position while scrolling and align it to the bottom. That way it fits to the bottom. I'm going to change the alpha on it to 80% which is the opacity of the color. Black 80% so you can still see some of the gradient below. Now because it's fixed I need to make sure that whenever I copy and paste something it's up in the fixed area of the layout in the left hand panel. Here I've just made a square where the album cover art will go. I'm also bringing across some text for the current song that's playing. I'm going to copy and paste this text move it down and this is the band name. Because this isn't as potent as the song I'm going to make that a bit smaller and change the color to a sort of a gray. In the middle of the screen I'm going to make the song play bar. So I'm going to select the recta line. Then I'm going to change the pixel width of the line to five. Make sure it's in the fixed area. Then I'm going to change the corners to round. I'm going to drag it out to meet the guards. Now I want to make a smaller area which is where the song is playing. So I'm going to copy and paste it make it smaller. And now if I make the back one gray you will see that that's the currently where the song is playing up to. Next we need some controls on this. In my assets I'm going to bring across some controls. There are loads of great places online where you can find free icons. Font Awesome is also a good name. It's basically a font where you copy and paste the symbols from the website and it gives you all of the icons. That's the vid. This is the free version of Font Awesome. So I'm just going to make sure that these are the same size but I think they look a little bit bigger. So I'm going to make them slightly smaller than the pause icon which is probably the main icon for this. Now I've made everything 15 points. I'm going to space everything out either side. I've got the shuffle at the end. Now we're going to make our right hand bar. The first thing we're going to do is grab a sound icon and we're going to make a volume control. We're still technically in the bottom bar at this point which is why I had to move it up into the fixed area. I'm doing exactly the same thing as the status bar. I'm making a rounded corner line. After looking at this design I think these titles are a bit too large now so I'm going to make them 14 points and then I'm going to correctly align them. That looks much better. Now I'm going to grab my profile icon. Place it in the top right hand corner. This area is going to be where you see your friends music so we're going to grab some text bring it across and call it friends. I'm going to make the color of these both gray. Now I'm going to put some text that says let's see what your friends are listening to. We're going to make this a little bit smaller. Now we're going to grab the profile icon and get the line tool. We're going to stack around the corners but we're going to make it dark gray. Now we're going to group it and duplicate it twice. Now I've duplicated the text I'm going to write about enter the settings and enable social. Underneath this we're going to add a button which goes to settings. Select the rectangle tool. Draw the shape of your button and make the background white. Then choose this icon and make the corners 50 to make them round. That's a big chunky button. Now in the middle of it we're going to add some text. I'm going to type settings and make everything capital. I'm going to make a bold and increase the space between the words by using this to 20%. Then I'm going to center everything. Make sure the text is centered within the text box. The last thing you're going to do is go into each image and I'm going to paste an album artwork. For this example I'm just going to use one album but because I've pasted it within a component it duplicates it across them all. Here you can go take some time and add some different images. You can hit play icon in the top right hand corner and preview the design. I hope you've enjoyed this tutorial. Please share the prototypes that you've made using the share link copy link, paste it into the comments. I'd love to see them and I hope you have fun using Figma. Until next time, keep designing.