### Step 16

Select all the shapes that make up your icon (highlighted in the first image) and copy them (Command-C). Move to the third black square, paste them (Command-V) and place them as shown in the second image.

Select only the two paths that make up the arrow and click the Rotate button from your Toolbar. Rotate your arrow 180 degrees as shown in the third image and then hit Enter.

### Step 17

Select the three black squares and delete them.

## 6. How to Add the Categories Buttons to Your Sketch UI Design

### Step 1

Go to Insert > Shape > Rectangle from the toolbar or menu (or press R). Create a 132 px square and place it as shown in the following image. Make sure that it stays selected and focus on the Inspector panel.

Set the Radius to 15 and then go to the Style section. Disable the Border, change the Fill color to #5E72EF and lower its Opacity to 70%.

Focus on the vertical rulers and add a new guide at 1566.

### Step 2

Keep focusing on your rounded square. Add three copies, align them with the original shape and leave a 30 px gap between each of these shapes.

### Step 3

Select the rounded squares added in the previous step and change the Fill colors as shown below.

### Step 4

Import the four icons that you need from this Vector Icons Set. Resize them, change the color to white and place them as shown in the following image. Once again, the smart guides will help you to perfectly center these shapes.

## 7. How to Add the Text to Your Mobile App UI Design

### Step 1

We’ll use a system font for most of the body text and and a non-default font for headings.

“System fonts will make the design of your app more consistent with the operating system. But using system fonts only will prevent you from getting a unique look for your app.” – Andrey Zhulidin

Focus on the top menu. Go to Insert > Text from the toolbar or menu (or press T). Click on your artboard and focus on the Text section from the Inspector panel. Select the Odudo Mono font, set the style to Bold and the size to 40. Increase the Character spacing to 10 and change the color to #5E72EF, and then add the "PORTFOLIO" piece of text. Select it and place it as shown in the following image.

### Step 2

Move down to the horizontal scrolling menu. Go to Insert > Text from the toolbar or menu (or press T). Click on your artboard and focus on the Text section from the Inspector panel.

Select the San Francisco Pro font, set the style to Bold and the size to 20. Increase the Character spacing to 2 and change the color to white, and then add the "OCT 2019" piece of text. Select it and place it as shown below.

Using the same text attributes, add the other four pieces of text shown in the following images. The only things that you’ll have to change is the text color, from white to #5E72EF.

### Step 3

Move down to the bottom side of your chart. Go to Insert > Text from the toolbar or menu (or press T). Click on your artboard and focus on the Text section from the Inspector panel.

Select the San Francisco Pro font, set the style to Heavy and the size to 30. Make sure that the Character spacing is set to Auto and change the color to #CBD1FA, and then add the "23" piece of text. Select it and place it as shown below.

Add five copies of this piece of text, change the numbers with "24", "25", "26", "27" and "28" and place them as shown in the following images.

### Step 4

Move down to the stats buttons. First, add a vertical guide at 143 and a horizontal guide at 1101. Go to Insert > Text from the toolbar or menu (or press T). Click on your artboard and focus on the Text section from the Inspector panel.

Select the Odudo Mono font, set the style to Bold and the size to 40. Change the color to white and then add the "16" piece of text. Select it and place it as shown below.

Deselect this piece of text and re-select the Text tool. Click on your artboard and focus on the Text section from the Inspector panel.

Select the San Francisco Pro font, set the style to Semibold and the size to 20. Make sure that the color is set to white and then add the "Transactions October 2019" piece of text. Add a horizontal guide at 1171 and then place this new piece of text as shown in the second image.

### Step 5

Add the horizontal guides shown in the following image (1267 and 1337) and then duplicate the text added in the previous step. Edit the text and then place it as shown below.

### Step 6

Add the horizontal guides shown in the following image (1433 and 1503) and then duplicate the text added in the previous step. Edit the text, place it as shown below and your Sketch UI design is complete.

## Congratulations! Your Sketch UI Design is Done!

Here is how it should look. I hope you’ve enjoyed this Sketch app tutorial and can apply these techniques in your future projects. Don’t hesitate to share your final result in the comments section.

Feel free to adjust the final mobile UI design and make it your own. Don’t forget you can find some great sources of UI inspiration on Envato Elements, with interesting solutions to improve your mobile app UI design skills.