Adobe XD CC Tutorial

Status and Navigation Bar

In this article, we will create Status and Navigation Bar for our Application using Adobe XD. Next, we need to convert our Status Bar and Navigation Bar to a Symbol. Now, what is a Symbol in Adobe XD? Symbols are small individual elements which can be re-used in entire application prototyping. Why we need a Symbol we can use Copy Paste? Yes, you can. In this scenario, you can Skip symbol. Let’s assume in our application, we have 100s of screens, and we are using a Status bar on all screens. When we editing Status Bar for any changes, we need to modify the same changes 100 times. Or for all the available instances. It’s simple we can edit it and again we can use Copy Paste. Hmm, you are smart. I have a typo in the above lines, I need to say, you have an Adobe XD document with 1000s screens :-(. I hate copy paste. OK, let’s make your life easier. If you use Symbols changes made in one place will reflect on all the screens without any cut, copy and paste. Is it not, Interesting?

Symbols in Adobe XD
A symbol in Adobe XD is an object that can reuse in your Adobe XD Documents. If you change any one instance of Symbol, the same changes reflected with all other instances.

Where Can You Find Symbols? Following image shows where you can find Symbols.

We can find all the Symbols on Assets tab. We haven't created any symbols yet so our Symbols list is empty.

First, download following Adobe XD Document and Open it.

Dealsatoxyz_Other_Account_Screen.xdLogin to Download

We are using the Black Application logo on 6 different Artboards. Let’s first convert black logo on the first Artboard into a Symbol. Select logo, “right click” and select “Make Symbol”. Keyboard shortcut for windows user “CTRL+K” and for Mac users “Command+K”. Our logo converted from a normal element to a Symbol and added to the assets. Observe the green rectangle on our black application logo. If we select a normal object we can see a blue surrounded rectangle, for symbols it is green. Refer the following image for the reference.

Replace all black logos with our logo Symbol. Check splash screen. Our logo is looking small on the splash screen. For fixing it, resize the logo, oops, we can't able to edit width and height property of a Symbol. But you can edit its elements. Double click on any black logo Symbol and select all the elements. Resize all the selected elements.

Stop Playing, with Symbols. Make it correct. If required fix the alignment problems on all the artboards. 
For symbols, we can edit following properties

  • X and Y Position
  • Rotation
  • Opacity
  • and Border

For a Status and Navigation bar first, create a new Artboard. Rename it to "Status and Navigation Bar". Next, download and open Google Material UI Kit. You can find Google Material UI Kit from File -> Get UI Kit.

Copy Status and Navigation bar from Light Theme Artboard. Refer following image.

Add it to our new Artboard. Resize the paste elements if required. Finally, change the artboard height based on the Status Bar and Navigation Bar height. If you want to select the Artboard for changing its height, click on the Artboard Name. Following image shows changes mentioned above. 

As we mentioned in our previous articles, UI Kits are the good start point. In this article, we are using Google Material Design UI Kit. Following image shows our requirement for the navigation bar.

In our header, we have following elements:

  • Menu Breadcrumb.
  • Category Drop Down.
  • Search TextBox.
  • Cart Button.

Notification Button For the above change un-group Status Bar and Navigation Bar elements. Remove Setting text. Select the rectangle tool and add two rectangles on the top of the Navigation bar. Create two rectangles, one for Category and Second for Search TextBox. The width of the first rectangle is small and the width of the second rectangle is large. Next, select the text tool and two text item on the top of the first and the second rectangle with the text "All" and "Search...". Search for required icons on and it on the Navigation bar. Following image shows the current status of our Navigation bar.

We are done with our Navigation bar. Next, add cart item and notification items count. Select ellipse tool, create two circles. Arrange circles on the top right corner of the cart and notification icon. Set the circle border to black. Background color matching to Navigation Bar Color. In the center of the circle add a text element with the random number. Change the text item text color to black. When all the changes done, create a group of all the elements for Status Bar and Create a Symbol. Similarly, select all the elements of Navigation Bar Create a group and Symbol. Now combine both the new Status Bar symbol and Navigation Bar Symbol into one. Following images shows the final image for Navigation Bar.

Note: In the above image we are using “…” for the count for notification icon. We use "..." when we need to demonstrate the given region is not enough for the text.

We are done with Status Bar and Navigation Bar. In our next article, we are going to create Home Screen.

Following is the Adobe XD Download URL

Dealsatoxyz_Status_Navigation_BAR.xdLogin to Download
Leave A Comment

Please login to post your valuable comments.