Design & Prototype: Messenger Chat App in Adobe XD (Part 2)

Welcome back to Part 2 in the Design & Prototype: Messenger Chat UI series. In Part 1, I showed you how to design a Messenger Chat App UI in Adobe XD. In this video, I’ll show you how you how to turn our Messenger App UI into an interactive prototype!

Click here to watch Part 1.

Gold Membership

If you’ve joined Gold Membership, feel free to download the entire XD file and related assets below:


 
Members-only access. To view content, become an XO PIXEL Gold Member!
 

What You’ll Need

Artboard Setup

In the same XD file we used in Part 1, we’re going to import the following UI elements from the iOS iPhone X UI kit and place them on the pasteboard:

  • Keyboard Light – Default
  • Keyboard Light – Emoji
  • Keyboard Light – Numeric
  • Alert – Default 2 Line Title

You can copy a UI element from the iOS iPhone X UI kit by pressing Cmd ⌘ (Mac) or Ctrl (PC) + C in the iOS XD document and then in our main XD document, press Cmd ⌘ (Mac) or Ctrl (PC) + V to paste the UI elements. It’s important that the elements sit and fit on their own artboards.

For the “Alert – Default 2 Line Title” UI, customize the message and combine it with the “Keyboard Light – Numeric” keyboard on one artboard.

Now that our artboards have been set up, I’ll first show you how to turn our messages UI into a scrolling messages screen.

Messaging Chat UI artboard setup in Adobe XD
Messaging Chat UI artboard setup in Adobe XD

Fixed Elements & Scrolling

First, move the iPhone X template off to the side so that we can easily select the other UI elements behind it. You may need to unlock some elements by pressing Cmd ⌘ (Mac) or Ctrl (PC) + L on your keyboard. Now select the message’s group.

Then activate the Repeat Grid by pressing Cmd ⌘ (Mac) or Ctrl (PC) + R on your keyboard. Make sure that it’s sent to the back by pressing sShift ⇧ + Cmd ⌘ (Mac) or Ctrl (PC) + [.

Drag the handle down so that it extends beyond the artboard, revealing several messages. Select the artboard and drag it down to the last message.

Now, select the entire navigation area, including the iPhone X home indicator and click on “Fixed Position”. Do the same thing with the Header area and the yellow chat button just above the navigation area.

Last but not least, move back the iPhone X Template and select “Fixed Position”.

Now, with the “Messages” Artboard selected, click the Desktop Preview icon. As you scroll down the messages, the header, navigation and chat button remain fixed. Feel free to take it one step further by customizing the messages to make it even more realistic.

Next, I’ll show you how we can add our notices and keyboards for this chat app.

Messages UI

Switch to Prototype mode. Now, let’s wire our splash screen to our messages screen, set transition to “dissolve” and duration to 0.4s.

Move the iPhone X template so that we can select the first message group and then wire it to our Chat UI artboard. Set transition to “Slide Left” and Duration to 0.2s.

We’re also going to select the phone icon in the navigation area and wire it to our “Phone Notice” artboard. This time, select “Overlay”, set the transition to “Slide up” and duration to 0.2s.

Move back the iPhone X template.

Chat UI Prototype

To prototype our Chat UI, first unlock and move the iPhone X template so we can select objects behind it. Select the left arrow and wire it to our “Messages” UI. Set transition to “Push Right” and duration to 0.2s.

Now, select the text input area and wire it to the default keyboard. Set Overlay to “Slide Up”, Easing to “Ease Out” and duration to 0.2s. We’re also going to select the smiley icon and wire it to the emoji keyboard. We’ll use the same overlay settings as the default keyboard.

Finally, in the navigation area, select the phone icon and wire it to the phone UI. Set overlay transition to “Slide up”, easing to “Ease Out”, and duration to 0.2s.

Desktop Preview & Adobe XD App

Now that we’ve wired interactions between our artboards, click the desktop preview button and click around our interactive Messaging UI prototype. You can even take this one step further by downloading Adobe XD app on your phone to see it work on your mobile device!

Conclusion

There you have it! You’ve just turned a simple Messaging Chat UI, into an interactive prototype, right in Adobe XD. Be sure to give this video a thumbs up and subscribe to XO PIXEL for more great videos just like this one. As always, thank you for watching! I’ll see you in the next video.

Like this article?

I'm a Content Creator, Front-End Web Developer, UI Designer, based in Toronto, Canada. I have a healthy addiction to the internet, technology, and digital media. I'm so passionate about all things design and tech that I write about it any chance I get on my blog xopixel.com!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.