Figma Game UI - Legends of Runeterra Riot Games UI Tutorial
Grab a drink and join me in this longer video as we take a look at creating the menu system based on the Legends of Runeterra game, from scratch.
We'll take a look at various different approaches to reproduce the UI using Figma. There's a little bit more going on in this video in that we'll be taking a quick look at taking our static UI components and utilising Figma's interaction and prototyping features to bring our build to life.
You'll be able to access the published file by following this Figma link: https://www.figma.com/community/file/1278051195512929421/Figma-Game-UI---Legends-of-Runeterra-Riot-Games-UI
Let me know how you get on!
Timestamps:
00:00 Intro
03:25 Button Creation
13:13 Button Highlight
17:25 Button Components
19:00 Panel Styling & Texturing
22:20 Panel Frame Detailing & Constraints
25:00 Button States Using Figma Variants
28:50 Game UI Reference Websites
30:00 Setting Button States
31:35 Previewing Interactive Button States
33:00 Icon Placement Using Auto Layout
36:00 Creating Tab Dividers
40:00 Creating the Menu Tab
48:00 Window Decoration
55:30 Creating the Interactive Menu Tab
--
Disclaimer
I do not own any of the artwork used in this video, they are all the property of Riot Games and art used to illustrative purposes only.
Other Videos By Warren Winters
Other Statistics
Legends of Runeterra Statistics For Warren Winters
Currently, Warren Winters has 808 views for Legends of Runeterra across 2 videos. His channel uploaded an hours worth of Legends of Runeterra videos, roughly 11.86% of the content that Warren Winters has uploaded to YouTube.