How to Design User Interfaces for Mobile Games in Figma

Table of Contents

How to Design User Interfaces for Mobile Games in Figma

By Sofia Barbosa
Get in on the trend of mobile app gaming and start creating user interface designs for your own games!

If you’re a UX Designer in the mobile design industry, then you might be aware of the impact mobile games have on the market today – after all, Mobile Games accounted for 67% of total app revenue in 2021. That’s why knowing how to design user interfaces is more relevant than ever.

It’s also important to note that the growth over Mobile Game spending increased 25% to $22.2 billion globally in Q1 of 2021. If we consider that overall consumer spending in apps grew 31 percent year-over-year from $24.3 billion, this is a pretty big number that actually manages to portray the impact that these apps are now having on the average consumer demand.

With the use of smartphones increasing more and more each day, the market for mobile gaming grows as well. With the proliferation of mobile games with seemingly ever-growing audiences, you may feel intimidated and not know where to begin.

Taking on any new endeavor can be daunting, but it is part of the job of a designer to be adaptable and respond to trends in the market. Given the growth rate of mobile gaming, now is the perfect time to hone your skills in mobile game UI if you haven’t had the opportunity to do so yet! 

In this guide, we will be covering:

  • Researching Your Main Challenges as a UI Designer
  • Common Challenges When Designing (+ Solutions!)
  • Setting a Tone For Your Game Through Brand Identity
  • Building Your Prototype on Figma


Designing an entire UI ecosystem for a mobile game and bringing it into reality might be complex and even scary at first, so that’s why we advise you to get familiar with the industry to get a better understanding of what works and what doesn’t. There are countless examples to inspire you – PokemonGO, Candy Crush, Puzzle and Dragons, Clash Royale, and Fruit Ninja Classic, to name a few. This knowledge will form the basis of your research as you begin to plan out and implement your game concept.

By the end of this guide, you’ll be able to start mapping out your way into creating your first Mobile Game UI prototype using Figma. 

Researching Your Main Challenges

 

Crossover fighting app game design by Zanjo

What if you have an idea for a game, but you’re not sure if a mobile game is the appropriate market? There are many reasons to get involved in mobile game design – and plenty of money to be made from it – but it’s also important to start researching your main challenges and consider why people like mobile games so much, and whether those values align with what you envision for your game. Let’s take a look at some of the advantages and disadvantages of mobile games.

Pros:


Portability –
This one is obvious. We take our phones with us virtually everywhere, so it follows that we’re usually never far from our favorite mobile games. Accessibility of use is a clear advantage for mobile games.


Cost –
Mobile games have a far lower cost barrier compared with other gaming platforms, thus lowering the financial barrier for entry to gamers and widening your potential market. 


Self Improvement through Gamification –
While apps like Duolingo are not strictly games in the sense that they don’t exist primarily for pure entertainment value, they certainly are built to feel like games. While not exclusive to mobile apps, gamification has proven to be wildly popular in the app store, with hundreds if not thousands available for download on the App store and Play store. With gamification, you can experience the dopamine rush of gaming while also learning a new skill!

 

Researching Your Main Challenges:

Drain on battery life – As heavy mobile applications usually require certain requirements on the device’s capacity, it’s very common to have issues regarding how quick your game drains your battery. Luckily, developers and manufacturers are constantly looking for ways to fix this particular issue by pushing products that are more compatible with mobile gaming. Portable power banks provide an extra boost on the go, but some may not see this as an added inconvenience.

Small screen size – The limitations of having smaller screens can become an issue that might affect the game play graphics-wise, as well as even having accessibility constraints when not designed correctly.

No physical game interface – The mobile gaming experience solely relies on what’s available within your screen, making it the responsibility of both UX Designers and developers that are involved in the game’s conceptualization to make the most out of the gaming experience within the constraints of the medium. 


Today, people don’t have to be at home or necessarily prone to bringing extra devices wherever they go in order to enjoy a gaming experience, and having this immediate access presents a host of opportunities for mobile games promising to deliver entertainment value.


As for UX and UI Designers, the accessibility of being able to create gamified experiences is not only a great way to extend your portfolio, as it also provides the possibility of making a considerable profit out of it without the limitations of requiring the actual expense – Remember Flappy Bird? Although this game was created by just one person over the course of a few days, it managed to garner around more than 50 million downloads, generating $50,000 a day through in-app advertising. 


Even though this number might sound low in comparison of other mobile games that might have a big studio name behind, such as League of Legends: Wild Rift or Diablo Inmortal, we have to remember the large amounts of staff involved in each company and the effect a single developer could manage to accomplish in just a couple of days. Impressive, right?


If you’ve made it this far and you’re ready to dive deeper into the world of mobile gaming, you now know the importance of researching your main challenges and you’ll want to do some research on your own and survey the competitive landscape for games that may be attracting a similar audience to your target. As you research popular games on the market, keep in mind the following questions:

      • What is it that has drawn users to that particular game? 

      • What have the designers and developers done to keep their audience happy? 

      • What are some techniques you can apply to your own work that could help to cultivate an audience of your own?


    Having gathered that information, you can start to plan out your next steps. Keep in mind some common challenges you may encounter when designing for a mobile game.

    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

          1.  


          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. 

          Setting a Tone Through Identity

           

          UI Mobile Game Design for Children by NestStrix

          As with any other project, setting a tone through identity is important for you as a designer. You will have to define brand styles and identity that will appeal to the audience you are targeting. You must define both the design and expected functionality of your game for it to work successfully. The goal is for the whole game experience to feel consistent, creating a unified ecosystem of UI elements and gameplay assets that naturally flow together. 

          Understand your Audience:


          Once you know your audience, research their likes and dislikes, and try to determine what motivates them and what frustrates them. Create a mood board based on these findings to inspire the visual identity of your game.

          Let’s review how adapting identity elements based on your market expectation and art direction can be able to make a big difference when enhancing your mobile game’s gameplay.

          Let’s imagine we’re building a game for casual gamers, most of them being 15 years old and up- no gender in mind, and that might see mobile games as a way to pass time without any particular expectation. During user research audits, we noticed that as high school and college students are usually dealing with burnout due to exams and heavy assignment dates, they would be expecting to do activities that can be able to relax them or help them wind down from constant stress.

          A possible outcome that could potentially help tackle this issue whilst accomplishing a game’s intention of entertainment would be a simulation, as these come out as both relaxing and fun enough to pass time. We can take a look at Stardew Valley Mobile for instance! To use as reference on how this game has managed to portray a successful and immersive (and relaxing) experience.

          Color Theory:

          Now that you have a concept for a farming mobile game simulation, what would be the best way to portray a UI that manages to integrate the artistic concepts? Let’s break each style element down and find out.

          Due to this game’s case particularly, we’d like to go with organic and earthy tones since its core concept art relies mostly with a natural vibe. Psychologically, having nature inspired tone palettes can also be able to provide a sense of calmness and relaxation.

           

          UI Design for Stardew Valley Mobile. A great way to integrate color in order to make gameplay more immersive.


          As you might’ve noticed, both audience’s needs and concept direction can be essential aspects that are able to determine the color scheme of your mobile game. Say – if we’re creating a gamified app for children, our audience would be primarily focused on vivid, colorful, and even gentle color palettes in order to maintain their attention throughout the gameplay, think about your favorite book or movie from your childhood!

          Same goes for more niche target audiences, such as teenage boys that might have more interest in first person shooter games, this group might be expecting darker and more muted colors that may reflect or compliment the scenery found in the gameplay.

          A big challenge with designing a game interface is that the interface controls will need to stand out visibly against the gameplay imagery. Keep in mind that scenery and environment may vary greatly over the course of a game, so you’ll have to factor that in as you create the structure for your interface. Consider applying dropshadows, overlays, or outlines to ensure your elements stand out even against dynamic backgrounds. 

          Remember to mix and match your UI palettes with complementary colors that might enrich your gameplay visually as well by using direct reference from the actual game concept. There are now online tools available to play with color wheels in order to decide your supplementary colors. Have fun! 

          Typographies:

          Layouts play a big aspect of UI, it affects how users perceive the information they’re receiving. Remember that in games, you need to provide the right information by balancing familiarity and intuitiveness with creative arrangements. Having your color schemes in mind, you’d want to complement your visual information with matching typography.

          Going back to our farming simulation game, it’s important to mention that Stardew Valley’s creator Eric Barome wanted to portray a similar aesthetic and experience as previous games he had played in earlier years, when arcade-pixel games were still a big part of the gaming design demographic. Having this key referential concept, it’d be logical to find fonts for the project’s gameplay to evoke a nostalgic pixel feeling. This contributes to the game’s organic look.

          Just like color, typography also plays a very important role when defining your game’s personality and enhancing your UI. While you may be tempted to use fun or unconventional typefaces in your gameplay, keep in mind they will also need to be easily legible and able to be ready by a screen reader for those with visual impairments.

          Typographies are the channel in which your player would be able to see, read, and understand text easily. Unreadable text makes interfaces difficult to use and understand, and if a game or interface has poor usability, the player will leave.

          Make sure to make your texts large enough to read, be as concise as possible when delivering information, and remember to use color contrast wisely in order to comply correctly with mobile accessibility for players that might suffer from visual impairments.

          Visuals are the most important aspect when it comes to getting your product out there, so by creating compelling visuals, you’re not only going to be able to deliver a well-done product, you’d be also working for a way to start getting your game out there, as most downloads are usually influenced by how well the screenshots on the app stores look!

          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.
          2. 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.
          3. 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.

           

            Main takeaways / Conclusions on Mobile Game Design


            Congratulations! You’ve now reached the end of this guide. By this point, you should be able to identify and bring together the main key points on what constitutes a good, functional Mobile Game UI Design in Figma – so you might be wondering, what’s next? Here are the Main Takeaways / Conclusions on Mobile Game Design.

            We actively recommend you to go through a well communicated hand-off process with your team in order to create a successful mobile game by establishing enough information throughout your Figma files through labels, interaction guides and by providing overall occasional check-ins including art departments to make sure the entirety of the project is coming together with what was conceptualized from the beginning.

            We hope that after reviewing the Main Takeaways / Conclusions on Mobile Game Design, you’ll be able to effectively identify the challenges that will come, as well as planning your strategies to design a good and functional Mobile Game UI. Rest assured that by using these tools and references, you’ll be able reach your design goals faster, easier, and smarter. Don’t forget to send us your results and thoughts after going through this guide!

            Best of Luck,
            the OpenForge team

            Have a project in mind?

            We’ve got you covered! Tell us about your project and we’ll be in touch.

            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!