Summary ✦
Design Focus
UX/UI, Prototyping, Motion
Tools
Figma, Adobe After Effects, Adobe Illustrator
Creation Time
January 2025 [ Working time: 3 Days, Ongoing between academic work ]
Purpose
Personal Project
All official artwork belongs to and iconography is heavily replicated of/inspired by Teamfight Tactics and respective trademarks and related subsidiaries of Riot Games.
Throughout my academic design career, I’ve been consistently and constantly creating my own projects, making every little design decision in my work. As a personal project, I took a step back, to analyze and recreate Riot Games’ mobile version of Teamfight Tactics. Challenging myself to adhere to existing design guidelines and a different enough style that I had yet to explore.
This is a personal project to practice and continuously learn different skills while applying previous knowledge of Figma.
It may look different compared to the newest version of Teamfight Tactics but I took UI elements across different versions and stuck to one set aesthetic: Inkborn Fables. After all, it’s good to revisit past UI designs that are successful. An example being when VALORANT updated to icons of player banners during the map loading screen and brought back horizontal full-width player banners.
Prototype ✦
Interactive Figma Prototype
Image and Trademark Rights / Riot Games, Teamfight Tactics
Figma, Adobe After Effects, Adobe Illustrator
Notes on Viewing Prototype
Click anywhere on the screen to see active interactive elements highlighted in blue. Use the arrow keys to manually navigate through the different screens or restart from the beginning. If you have access to a keyboard, press "R" to restart the prototype.
Final Screens ✦
I focused on the essential sections shown in the game for this project. While analyizing the Teamfight Tactics interface, I noticed the game primarly uses many overlay components rather than navigating to new screens so that players can easily access and exit the different overlay options. For the project, I created a start page, home page, lobby page, store page and the following overlay components: friends, missions, notifications, settings, team planner and the game mode selection.
The left being the original and the right being my version.
Visual Design ✦
During this process I experimented with using motion graphics, more overlays and use of scroll features. Using the mobile version of Teamfight Tactics as my main reference point instead of the PC version. Although I referenced the iOS version on an Apple iPhone, I used a tablet size to show the UI a little more.
Also because I went down a Reddit rabbit hole of these funny pictures of the Teamfight Tactics UI on tablets.
(I'm aware this has now been fixed, but it's funny)
Challenge
To grow a designer, I needed to create something that strayed away but still aligned with my design goals and growth. Trying to adhere to the design guidelines was more difficult since its design origins are from an era from around a decade ago. Also to challenge myself a little more by doing a different sized mobile adaptation (phone to tablet).
Constraints
Understanding the constraints helps influence my design decisions.
Design
Similar to Teamfight Tactics' current design system
Experience Type
Mobile Experience
Feasibility
Keeping designs the same as existing Teamfight Tactics components while understanding my skill set and time frame
Understanding the System
Since this project was meant for me to step outside my comfort zone for my usual design style. I took extra attention to focus on why things are designed the way they are instead of making it look the same.
Visual Design Analysis
I always had viewed League of Legends and its spin-off games to have complex UI in comparison to Riot Games' tactical first-person shooter, VALORANT (Personally my favourite game UI). Comparing League of Legends to Teamfight Tactics, the UI has become more minimal while still feeling complex from the heavy influence of League of Legends' compared to other current popular titles like Genshin Impact or Minecraft.
Keep in mind that the original League of Legends released in October 2009 (I was barely five years old). During the early 2000s, skeuomorphic designs* were trendy and popular. Explaining the reason for the use of gradients to mimic the glossy effect and using scrolling components, glowing frames. The current visual design and branding has moments of fresh air relevant to current design trends but it's evident that its design reflects the era when the game was still in early stages. League of Legends has fantasy theme, embellished with polished, metallic, and ornate designs representing the game's world of Runeterra using scrolling components, glowing frames and boarders for that fantasy feel.
*Notable skeuomorphic design examples at the time: Instagram, Youtube, Apple (Safari, News, Notes).
I noticed that Teamfight Tactics’ visual design leans hard on gradients and layering to create that dimensional, high-fantasy feel. Buttons? Easy—just slap two gradients together, and boom, instant visual complexity. The gold-like outlines add depth while making the UI feel more polished and high-value. It’s a simple trick that instantly gives elements more depth and a premium, tactile feel. Just a small detail, but it goes a long way in making the interface look rich and intentional.
As for iconography, Riot Games uses clean vector-based icons with basic geometric shapes, ensuring clarity while maintaining a cohesive, game-ready aesthetic. Each icon effectively communicates its function at a glance, proving that strong UI doesn’t require excessive detail—just smart execution. Some iconography used the Iconify plug-in on Figma to make my sanity a tad more stable for simple icons. Trying to recreate the Pengu illustrations with vectors did make me question my own patience with how many curves I had to make.
Buttons
Iconography
Components and Overlays
As mentioned before, Teamfight Tactics incorporates a lot of pop-up overlays into it's design instead of navigating to a new screen. The follow presented are the active overlays and components used in my project: friends, missions, notifications, settings, team planner, game mode selection, menu, buttons with press and hover states.
Components and Variants
Overlays
Motion Graphics
To make the screens feel more immersive and alive, I decided to do simple motion graphics by using existing official artwork for Inkborn Fables, by utilizing the pin and puppet tools I was able to manipulate the still images into simple videos to use as backgrounds in Adobe After Effects.
Original Still Image
Edited Motion Graphic
Branding Guidelines
Following brand guidelines including typography and colour to official guidelines published by League of Legends.
Low/Mid Fidelity Wireframes
Wireframes showing the main screens.
Reflection ✦
When I first looked at the complex buttons and interfaces in Teamfight Tactics, I was honestly overwhelmed. It seemed like a daunting challenge, full of intricate details that I wasn’t sure I could replicate. But then, I realized the structure was actually pretty similar to the process of color blocking and layering in my drawings (I love drawing HEARTSTEEL Kayn). Just like how I build up layers in a drawing, the components in the game interface stacked upon each other, and once I understood that, it became a lot more approachable.
The more pages and elements I recreated, the more I found myself drawn to the process. Balancing this alongside my academic work and tilting competitive gaming sessions made working on this project a breath of fresh air. While school and gaming can be intense, working on this project became a need—a way to dive into something new, hands-on, and creatively fulfilling.
If I were to describe my personal design style, it’s definitely bold and concise. I typically work with a small, carefully curated color palette and avoid serif typefaces, preferring more pronounced sans-serif fonts. I’ve also never gravitated toward skeuomorphic designs, keeping things flat and minimalist. This exploration into game design, particularly through Figma, has allowed me to develop new techniques and skills I never thought I’d explore. When I first started studying design, I didn’t even consider the possibility of working in game design, although it'd seem like infeasible dream—thinking it was all about static, still work. But now, working on Teamfight Tactics has shown me how to dissect a game and how to experiment with UX/UI in ways I never expected. I never would think I'd be experimenting with Adobe After Effects after years for interaction designs. I’m excited to continue experimenting with these new techniques and my growing skills in UX/UI design.
Project Playlist ✦
Original Sound Track for Teamfight Tactics, Set 11: Inkborn Fables