How to Design User Interfaces for Mobile Games in Figma

Table of Contents

Building Your Prototype in Figma

Make sure to download the Figma file to follow along with the exercises in the guide!

In this chapter we will show you how building your prototype in Figma can speed up your design process. As we mentioned in the chapters above, a big difference between regular Mobile App Design and Mobile Game Design is that, Game UI should be able to be more eye-catching, intuitive, and as understandable as possible. 

We found a great reference with pre-made assets created by Tahorin Binta Jaman for you to try out and play around in Figma to help you in your future projects, also, make sure to check out our guide on How to Create Figma Prototypes with Microinteractions to learn more about the Smart Animate features on Figma! Here are a few tips and tricks to help your players navigate through the game with a compelling UI. 

  1. Guide your players through the initial gameplay: You can work with Micro-Interactions by creating bubble pop-up message components and integrating them when an action has to be taken in order to learn how to do a certain action.
  1. Have skippable buttons available for your players: Keep in mind that some players rather continue their gaming experience intuitively or even enjoy the gameplay for a second time, having to go through informative sections of your game might evoke a feeling of irritation that could make your player quit the game. In the original release of Legend of Zelda: Skyward Sword, the inability to skip cutscenes led to so much player backlash that the ability to skip was included for the Wii platform in the following version of that same game.
  1. Make sure to make your revenue streams stand out: Create non-invasive prompts through overlays for your players to be able to engage with your revenue streams. Providing multiple options for revenue streams may also help the user to feel more empowered to make the choice that works for them. In the case of Duolingo, users have the option to watch ads to gain extra points, or pay a monthly subscription to remove ads entirely. 
Additional Mobile App Guides
Connect with us

Are you enjoying our guides? Share your thoughts and let us know what you would like us to write about next!