Getting Started: The Facebook Messenger Design Kit for Sketch

Looking to design your own Facebook Messenger extension or chatbot? Facebook released their first platform design kit geared towards providing developers with a complete set of Messenger assets in April 2017. This is the most comprehensive design kit for the platform and it will assist in giving your designs a realistic feel. Download it here now.

Today, I’ll be showing you how to modify projects using the SketchApp and the Facebook messenger design kit. Design plays one the most important roles in the development of products like Facebook Messenger. Visually appealing fonts, colors, and symbols are used to entice users and invite them to engage with non-human bots and entities. Let’s jump right into the tutorial and start designing.

Overview

To begin you’ll need to download the Sketch app which can be found here.

Open the Sketch app and then select the Messenger Design Platform Kit from the list of options. This should bring you to the welcome screen that provides a brief overview of the assets included in the kit.

You will find that the kit is divided into four different core sections. Each section provides a different core part of the messenger design. They work together to provide a cohesive experience so it’s important that you understand what each of these do so that you can effectively tie them together.

I’ll be touching on the following four categories and providing a few best practices to consider when modifying each option.

-Conversation & Extensions
-Buttons
-Lists
-Styles

Extensions

The conversation and extensions section of the design kit allows a user to create the framework for the messenger design experience. Users can select from four different extension containers that will hold their chosen extension.

Think of extensions as small add-ons to the existing Facebook messenger product. Extensions are a way to preview a website or add capability that would not exist otherwise to your messenger experience. They are important in Messenger design because they give a separate identity to a product that is utilizing a mutual platform.

There are two different extension containers with each providing a different view.

Root View- Provides a root view of the extension and displays the extension icon on the left hand side.

Subview- In the subview, a back button will replace the extension icon.

Both of these options are available for iOS and Android.

Selecting a root view and subview is a good starting point when working to design a Facebook extension.

Bot Threads

Maybe you’d like to create your own Facebook chatbot instead of an extension. The messenger design kit also includes a variety of different views dedicated solely to chatbots.

These views will act much like the extension views in providing the basic framework for your chatbot conversation.

Message Bubbles

Message bubbles are the next step to creating your very own messenger design. Think of message bubbles as building blocks with each adding a crucial impact to the conversation.

Let’s take a few steps back and think about a normal conversation via text. If you’re using an iOS device you’re probably familiar with these design rules.

Green chat bubbles = Message sent to non iOS device recepient

Blue chat bubbles = Message sent to iOS device recipient

Light gray bubbles = Messages that are received from either iOS or Android.

Similar rules apply when designing a conversation optimized for Facebook messenger. The only small difference is that there are no green chat bubbles in this case. Exploring the design kit in depth will provide you the opportunity to share music, restaurants, and more via chat bubble.

Buttons

Buttons play a very important role in constructing your messenger design. Selecting incorrect buttons can confuse users and lead them to incorrectly assuming they’ve pushed a button that they haven’t.

The best user experience creates a clear path through the conversation to the desired action or event. Your messenger design should make the best use of buttons possible and maintain an organized approach.

Generally the rules are as followed

Light Blue = Default (Unpressed)

Dark Blue = Pressed

Gray = Disabled/ Option already selected

Lists

Pull out your cellphone right now and open up the contacts app that is native to your device. What do you notice about the list? Some people will see photos displayed next to each contact while others will have only text. Names will be bolded and categorized by their relationship to you, the device owner. It’s important to be able to differentiate people or items within a list in your messenger design.

The design kit provides the individual table cells as well as some completed lists that can help you arrive at your destination by simply editing the placeholder text.

Styles

Lastly, style plays a very important role in creating your messenger design. You want to create something that will flow nicely and is relatively easy on the eye. The design kit provides a list of standard fonts, sizes, and colors to work with when editing work of your own. It serves a reference point to ensure your extension or chatbot is on par with Facebook Messenger branding.

Here are some important colors, fonts, and text sizes that will help you maintain the messenger branding in your design.

Producing a video of your design with Botsociety

After you’ve successfully completed your Facebook messenger design using the platform design kit, you may find that you want to test your design out yourself. Botsociety provides a way of creating an interactive prototype that simulates a real bot-user conversation. You can then share a video that will simulate the conversation between a user and the bot you’ve just designed.

To begin, go to Botsociety and create a new mockup. If you would like to showcase your messenger extension it is best to select the messenger extension option shown above.

Set up your conversational experience by making sure the people engaging in the conversation are labeled correctly. Continue by beginning to build your mockup until the mockup matches the experience you’re looking to produce.

When you’re done. Watch your mockup in action by selecting the green play button located in the top right-hand corner. This will create a sharable video of the entire user interaction with your chatbot or Facebook extension mockup. To learn how to build a chatbot prototype of your own check out this helpful tutorial.

That’s all for now. Be sure to stay tuned for more helpful tutorials and new ideas to help you take your messenger design to the next level. Feel free to ask us any questions you may have in the comments below and happy designing!

Originally published at Botsociety Blog.