top of page
TFT Unreal
Unreal Engine 5, Visual Design, UX/UI, Implementation
October 2025 - June 2026
Continued during my time at Demiurge working alongside Riot Games, I found myself to be a part of a very exciting and fun transition as a UI/UX Artist, going from working on Teamfight Tactics into converting the entire game into Unreal Engine 5! It's not everyday that one can go from working on a game based in a proprietary engine, then a few months later jump into recreating that same game in Unreal, so I was absolutely thrilled to be able to support and be a part of this project.
We were tasked with creating various widgets, polish work, and bug fixing in the game, as well as learning best practices and optimization within Unreal Engine 5. This was my first time working in Unreal within the industry other than game projects, and was able to learn a plethora of knowledge from working closely alongside both members at Riot and Demiurge along the way.
I was able to work on a variety of different regions within the game for both PC and Mobile platforms, ranging from areas like the in-game carousel, various tooltip formatting, Champion and Augment inspect panels, general polishing, view binding and blueprint setup, as well as getting into full feature work with recreating the Team Planner menus that we had previously been a part of first creating in the TFT.
Carousel UI
Carousel Toggle & Inspect Buttons
One of my very first tasks on TFT Unreal was to support the implementation of the appearance and functionalities for the Carousel Toggle and Inspect buttons on PC!
For both buttons, I utilized blueprinting and view bindings to control their respective appearances, as well as their behaviors of switching back and forth from the Carousel to the player's board, and opening the champion inspect panel.
Tooltips
Tooltip Widget Formatting
I additionally helped in various areas for tooltip formatting and polish within TFT Unreal, assisting with creating shared tooltip widgets to utilize across the game.
We wanted to focus on creating as minimal of widgets as possible for optimization, as well as being able to reuse widgets throughout the game, and was able to help in showing and hiding different elements in tooltip widgets depending on where they appear.
Examples of these Tooltip widgets can be seen within both Champion and Item based tooltips!
Item Bench
Secondary Item Row
For the in-game Item Bench UI, I was tasked to assist in creating the secondary item row, which appears when a player has more than 10 items (on PC), allowing more room for items to be collected. I helped implement the widget layout and blueprints to detect when to show and hide the second row from appearing!
Item Creation & Tooltips
Also within the Item Bench UI region, I supported the implementation of the "Create Item" button functionality (seen on PC), alongside the numerical overlay and text when a player can obtain more than one of a particular item.
Utilizing view bindings in Unreal with support from engineering, I was able to set up the numerical detection for how many uses a player has for an item in both the Item Bench and Item Tooltip sections, as well as within the tooltip header text to match up with the original TFT formatting.
Team Planner
Team Editor Menu
One of the largest areas I helped in creating for TFT Unreal was the Team Planner feature, primarily working within the Team Editor section, which was very exciting as I was able to work on the same feature previously in Riot's proprietary editor!
I created nearly all of the UI widgets, interactions, modals, and buttons used within the Team Editor for both Mobile and PC from start to finish, working closely alongside both Demiurge and Riot engineers and designers throughout the process.
This was an incredible learning experience for me to have been able to recreate a feature I was previously heavily involved with into Unreal Engine 5!
bottom of page