#ADOBE XD VIDEO LOOP HOW TO#

Using the same tool, create an 80 px square and place it as shown in the second image. Fill it with white and place it as shown in the first image. Pick the Rectangle tool (R) and create a 374 x 20 px shape. Switch to the Text tool (T) and add the Artist Name and Song Name pieces of text, as shown in the second image. Pick the Rectangle tool (R), create a 38 x 24 px shape and place it as shown in the first image. Add a copy of this shape and place it as shown in the second image. Pick the Rectangle tool (R) and hold down the Shift key to easily create a 30 px square. Move down to the top rectangle from your songs list. Place it as shown in the following image, but don’t bother to edit the font and its attributes for now. Pick the Text tool (T), click inside your artboard and add the Title piece of text. Use the smart guides to perfectly align this new shape. Hold down the Option and the Shift key and simply drag a copy of your selection to the right, as shown in the second image. Make sure that this square stays selected. Place it as shown in the following image, disable the Border and set the Fill color to white ( #FFFFFF). Pick the Rectangle tool (R) and hold down the Shift key to easily create a 40 px square.

#ADOBE XD VIDEO LOOP HOW TO#

How to Add the Controls to the Music App Mockup Step 1īased on that paper sketch, let’s add the controls to the this music app mockup. Between the two bars you have the songs list where you will add the song information and the control buttons for each song. At the bottom is the player bar where you will integrate all the basic controls for a music player. These will be the main components of your music player UI kit.Īt the top, you have the classic navigation bar where you will add the control buttons for your app. Repeat this technique until you have a column of nine rectangles, as shown in the third image. Make sure that you’re leaving a 10 px gap between the original shape and the copy.

Hold down the Option and the Shift key and simply drag a copy of your selection below the original shape, as shown in the first image. Select the rectangle made in the previous step. Using the same tool, create a 374 x 50 px shape and place it as shown in the following image. Place it as shown in the following image. Make sure that the Rectangle tool (R) still active and create a 414 x 204 px shape. Your only worry should be the structure of the design. While you’re working on the wireframe make sure that you do not waste time styling objects or adding too much text content. Disable the existing Border using that check box and then click the Fill color well and change the color to #646E83. Use the smart guides to easily place your shape as shown in the following image and then go to the Property inspector. Pick the Rectangle tool (R) and create a 414 x 70 px shape. Looking at the paper sketch you’ll notice that there will be three main sections (or patterns) of the music player UI design. Now, let’s create the digital music app mockup. Let’s open Adobe XD and select the iPhone XR/XS Max/11 (414 x 896) template to create a 414 x 896 artboard. Having in mind the overall look of your music interface makes things a lot easier once you move to the design process in Adobe XD. You can easily establish the main components of your music player UI design and the rough locations and proportions.Ī paper sketch is the perfect start for the digital wireframe. It’s always a good idea to start your music app interface with a basic sketch on paper. How to Add the UI Patterns to the Music App Mockup You will need the following resource in order to complete this Adobe XD music player UI kit: How to create a repeat grid in Adobe XDįor more inspiration on how to adjust or improve your final Adobe XD app UI kit you can find plenty of resources at GraphicRiver.How to create a music app mockup in Adobe XD.What You Will Learn in this Adobe XD UI Tutorial In this Adobe XD tutorial you will learn how to create a music player UI design.

Adobe xd video loop