Skip to main content

Mini Metro video game UI in Figma

  • November 14, 2025
  • 5 replies
  • 251 views

Yelnar_Bolatov

Hi, fellow Figmates!

I wanted to share with you another of my Figma files for a video game:

 

Poster for figma file Mini Metro UI case study


Mini Metro UI case study

Here I tried to lessen up a bit and recreate a small mobile game, to understand how little can be enough in development of small indie games.

I not only recreated all of the screens of mobile version of the game, but also tried to write some kind of analysis of it's game design, but I only ever created posts in Instagram, so I created an Instagram and Bluesky to post such essay/analysis things:

https://www.instagram.com/p/DQcMGkfDBge/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==

 

And video post with demo of interactive prototype:

https://www.instagram.com/p/DQswUYuDIvC/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==

 

Mini Metro devs Dinosaur Polo Club even reposted me on BlueSky: https://bsky.app/profile/dinopoloclub.bsky.social/post/3m5ciyz32zk22

gameplay screen

 

huge flow of game screens

 

You can try the interactive prototype or explore all of the screens and design system of Mini Metro here: https://www.figma.com/community/file/1530321804348443635/mini-metro-ui-case-study

 

Support Me

I would like to here from you some suggestions, ideas how to improve this.

Actually I want to do more such Figma game files, and create supporting files for Game industry.

If you want to support me, you can write me suggestions or become my patron at https://www.patreon.com/ybdesigning

5 replies

henrymixhle
  • New Member
  • April 3, 2026

Hi, fellow Figmates!

I wanted to share with you another of my Figma files for a video game:

 

Poster for figma file Mini Metro UI case study


Mini Metro UI case study

Here I tried to lessen up a bit and recreate a small mobile game, to understand how little can be enough in development of small indie games.

I not only recreated all of the screens of mobile version of the game, but also tried to write some kind of analysis of it's game design, but I only ever created posts in Instagram, so I created an Instagram and Bluesky to post such essay/analysis things:

https://www.instagram.com/p/DQcMGkfDBge/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==

 

And video post with demo of interactive prototype:

https://www.instagram.com/p/DQswUYuDIvC/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==

 

Mini Metro devs Dinosaur Polo Club even reposted me on BlueSky: https://bsky.app/profile/dinopoloclub.bsky.social/post/3m5ciyz32zk22

gameplay screen

 

huge flow of game screens

 

You can try the interactive prototype or explore all of the screens and design system of Mini Metro here: https://www.figma.com/community/file/1530321804348443635/mini-metro-ui-case-study

 

Support Me

I would like to here from you some suggestions, ideas how to improve this.

Actually I want to do more such Figma game files, and create supporting files for Game industry.

If you want to support me, you can write me suggestions or become my patron at https://www.patreon.com/ybdesigning

One thing you could push further is showing why certain UI elements are minimal maybe short callouts explaining decision trade-offs like cognitive load or player focus. Your prototype is great, but adding small interaction notes hover states, failure feedback, etc. would make it even more useful for devs.


Yelnar_Bolatov
  • Author
  • Active Member
  • April 3, 2026

One thing you could push further is showing why certain UI elements are minimal maybe short callouts explaining decision trade-offs like cognitive load or player focus. Your prototype is great, but adding small interaction notes hover states, failure feedback, etc. would make it even more useful for devs.

 

Thanks for feedback!

Now I am preparing Slot update for Bloodborne UI case file and new file for Uncharted 1, and after that I will revisit Mini Metro and will think about updating documentation for my files.

It takes a lot of effort for me. Thus I always post files as it is, and then continue updating-polishing them.

Your recommendation are very useful for me! Thanks again!


leoluca804
  • New Member
  • April 13, 2026

Hi, fellow Figmates!

I wanted to share with you another of my Figma files for a video game:

 

Poster for figma file Mini Metro UI case study


Mini Metro UI case study

Here I tried to lessen up a bit and recreate a small mobile game, to understand how little can be enough in development of small indie games.

I not only recreated all of the screens of mobile version of the game, but also tried to write some kind of analysis of it's game design, but I only ever created posts in Instagram, so I created an Instagram and Bluesky to post such essay/analysis things:

https://www.instagram.com/p/DQcMGkfDBge/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==

 

And video post with demo of interactive prototype:

https://www.instagram.com/p/DQswUYuDIvC/?utm_source=ig_web_copy_link&igsh= MzRlODBiNWFlZA==

 

Mini Metro devs Dinosaur Polo Club even reposted me on BlueSky: https://bsky.app/profile/dinopoloclub.bsky.social/post/3m5ciyz32zk22

gameplay screen

 

huge flow of game screens

 

You can try the interactive prototype or explore all of the screens and design system of Mini Metro here: https://www.figma.com/community/file/1530321804348443635/mini-metro-ui-case-study

 

Support Me

I would like to here from you some suggestions, ideas how to improve this.

Actually I want to do more such Figma game files, and create supporting files for Game industry.

If you want to support me, you can write me suggestions or become my patron at https://www.patreon.com/ybdesigning

This is a really clean take on the Mini Metro UI nice attention to spacing and hierarchy. One thing I’ve noticed when recreating game interfaces in Figma is how important micro-interactions are, especially for feedback loops like score updates or route changes.


hudsonlaim90
  • New Member
  • April 16, 2026

Hi, fellow Figmates!

I wanted to share with you another of my Figma files for a video game:

 

Poster for figma file Mini Metro UI case study


Mini Metro UI case study

Here I tried to lessen up a bit and recreate a small mobile game, to understand how little can be enough in development of small indie games.

I not only recreated all of the screens of mobile version of the game, but also tried to write some kind of analysis of it's game design, but I only ever created posts in Instagram, so I created an Instagram and Bluesky to post such essay/analysis things:

https://www.instagram.com/p/DQcMGkfDBge/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==

 

And video post with demo of interactive prototype:

https://www.instagram.com/p/DQswUYuDIvC/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==

 

Mini Metro devs Dinosaur Polo Club even reposted me on BlueSky: https://bsky.app/profile/dinopoloclub.bsky.social/post/3m5ciyz32zk22

gameplay screen

 

huge flow of game screens

 

You can try the interactive prototype or explore all of the screens and design system of Mini Metro here: https://www.figma.com/community/file/1530321804348443635/mini-metro-ui-case-study

 

Support Me

I would like to here from you some suggestions, ideas how to improve this.

Actually I want to do more such Figma game files, and create supporting files for Game industry.

If you want to support me, you can write me suggestions or become my patron at https://www.patreon.com/ ybdesigning   

This is a really thoughtful breakdown Mini Metro is a perfect example of how restraint in UI can actually elevate gameplay clarity. Your focus on simplifying while preserving interaction flow really shows, especially in how screens transition and guide the player without overload. One idea could be adding brief annotations on decision points why certain UI elements appear when they do to deepen the case study angle.


burano deniel

Esse conceito de UI do Mini Metro ficou incrível e super limpo! Recriar interfaces de jogos no Figma exige muita atenção aos detalhes, especialmente ao lidar com múltiplos frames e caminhos complexos de vetores.

O único problema de trabalhar com projetos pesados assim é que o Figma baseado no navegador consome muita memória, o que às vezes causa lentidão no sistema. Para manter o fluxo de trabalho fluido, eu costumo usar o utilitário leve do thememreduct.com para limpar o cache da RAM em segundo plano. Ajuda muito a evitar travamentos enquanto organizo as camadas de design.