How to Design User Interfaces for Mobile Games in Figma

Table of Contents

Common Challenges When Designing (+ Solutions!)

Case Study: Real Racing. UX and UI Design for Mobile Game, designed by Ludmila Shevchenko.

As you might’ve noticed, the Mobile Game Design industry is more heavily linked to both creative and even artistic departments due to its nature on entertainment-based focus, making designers have a necessity to fill out the right requirements when providing particular components o elements that, at most times, could actually benefit from taking a look at premade assets in order to provide a product that complies with both visual and creative directions, especially when said assets might be needing from high artistic craft (i.e. renders, a particular animation style, etc). In this chapter we will review some common challenges you can confront when designing.

Let’s take a look at two possible scenarios that might happen to you, as a designer, when needing to meet certain style requirements and how to face said challenges:

Working with an artist or game studio

As a UI Designer in a team, you’re working with a game and concept artists whose job is to produce custom elements, some typical events you might be facing throughout the game’s development process would be the following:

Branding creation:

You might be working on a project where gameplay assets, characters, and other visual elements are provided to you. If this is the case, you’d want to define branding guidelines  based on the references given; however, keep in mind that this is not always the case – and you must be prepared.

Some of the resources that might be expected to deliver as a UI Designer might include:

  1. Style Guidelines and Branding for Game Design – How will the player be consuming the right prompts in order to continue their gameplay? This might include: 
  • Defined Color Schemes and Palettes 
  • Sizing Requirements
  • Typography Selection
  1. Working with Game Assets
  2. Creating and setting interactions

You can base all of your resources from the overall game color palette and game’s look and feel by working closely with your creative team from the start of the project, this will help you establish the correct style guidelines together, and having a constant clear communication in order to receive – and to be able to ask for the needed assets that would be required to have a more elaborate art foundation.

Common Challenges when Working independently or with an indie studio

Either if you’re working in a solo project or amongst an indie or overall small team, it is very likely that you would be entirely in charge of providing the branding, user interface, and gameplay assets. If this is the case – no need to get overwhelmed! Here are a couple solutions that might help:

Rely on online resources!

There are currently a vast amount of programs that could help designers create assets for Mobile Game Design implementations, amongst them – you’d be able to find softwares such as: GameMaker Studio, Unity and Unreal Engine. However, as a UI Designer, it isn’t necessarily a requirement to create gameplay assets from scratch, so you might want to consider sourcing assets from online repositories.

Example of game assets that can be provided online. Elements by Tyrian.

Typically, when working on a studio that might be able to nest numerous creative departments, it would be common that internal teams can be able to provide said assets in order to match visual identity on the game, however, when this is not possible, you can be able to look at diverse Gaming Asset sites that, on most of the times, happen to have Freebies – this is a great option if you’ve never worked with assets before, as you have the opportunity to test and play with such graphics.

In order to use online downloadable assets, you only need to register on your resource site of preference (Some of our favorite sites include Super Game Asset, Game Art Partners, Clip Safari and even resources shared through Reddit users) download your preferred bundle, and place the given files as PNGs to be used as component resources within your Figma file. Make sure you consult with your development team before integrating the assets into your designs to make sure you will be able to provide the necessary file types on export. 

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!