Game UI Design
5. Prototyping & Animation
For the prototype, I used Smart Animate to bring the interface to life. I animated button interactions, glow pulses, and smooth transitions between states, giving a feel similar to a real in-game menu.
Key Goals
Create a game-ready UI layout using only Figma tools.
Explore interactive visual effects and motion through Smart Animate.
Practice component-based UI design for scalability.
Maintain clarity, hierarchy, and visual consistency within a fantasy aesthetic.
Final Thoughts
This project was a valuable opportunity to combine interface design principles with game aesthetics, exploring how UI design can support player experience and visual storytelling. It also helped me refine my process for creating functional yet visually rich game interfaces.
Overview
This screen was developed as a UI/UX design exercise focused on creating a character profile interface for a game. The goal was to simulate a game HUD that presents character stats, equipment, and upgrade systems in a visually appealing and easy-to-read layout.
The entire interface was designed and built directly inside Figma, without using external resources. I created all the visual assets — shapes, icons, gradients, and effects — using Figma’s native tools.” was kindly provided by 3D Generalist Artist Nyam Guilherme Caetano Santos for this concept.
3D Character by Nyam Guilherme Caetano - Artstation
Overview
This screen was developed as a UI/UX design exercise focused on creating a character profile interface for a game. The goal was to simulate a game HUD that presents character stats, equipment, and upgrade systems in a visually appealing and easy-to-read layout.
The entire interface was designed and built directly inside Figma, without using external resources. I created all the visual assets — shapes, icons, gradients, and effects — using Figma’s native tools.” was kindly provided by 3D Generalist Artist Nyam Guilherme Caetano Santos for this concept.
3D Character by Nyam Guilherme Caetano - Artstation
Design Process
1. Research & Planning
Before starting the visual phase, I analyzed common patterns in RPG and hero-based game interfaces. The focus was on creating a clear visual hierarchy, defining modular UI components, and maintaining style consistency that matches a fantasy or adventure setting.
2. Wireframes
I began with low-fidelity wireframes to explore the information structure. This phase helped define the placement of character stats, equipment slots, upgrade button, and progress bar before adding any visual style.
3. Visual Design
In the visual phase, I designed the interface using a vibrant blue color palette, aiming for a futuristic yet approachable tone. The typography and glow effects were inspired by mobile RPG aesthetics, enhancing readability and immersion.
4. Components & System Building
I developed reusable components in Figma (such as buttons, icons, and stat panels) and organized them into a small UI system. This allowed me to test quick variations and maintain consistency across the interface.
5. Prototyping & Animation
For the prototype, I used Smart Animate to bring the interface to life. I animated button interactions, glow pulses, and smooth transitions between states, giving a feel similar to a real in-game menu.
Key Goals
Create a game-ready UI layout using only Figma tools.
Explore interactive visual effects and motion through Smart Animate.
Practice component-based UI design for scalability.
Maintain clarity, hierarchy, and visual consistency within a fantasy aesthetic.
Final Thoughts
This project was a valuable opportunity to combine interface design principles with game aesthetics, exploring how UI design can support player experience and visual storytelling. It also helped me refine my process for creating functional yet visually rich game interfaces.
5. Prototyping & Animation
For the prototype, I used Smart Animate to bring the interface to life. I animated button interactions, glow pulses, and smooth transitions between states, giving a feel similar to a real in-game menu.
Key Goals
Create a game-ready UI layout using only Figma tools.
Explore interactive visual effects and motion through Smart Animate.
Practice component-based UI design for scalability.
Maintain clarity, hierarchy, and visual consistency within a fantasy aesthetic.
Final Thoughts
This project was a valuable opportunity to combine interface design principles with game aesthetics, exploring how UI design can support player experience and visual storytelling. It also helped me refine my process for creating functional yet visually rich game interfaces.
