Figma Game UI - Legends of Runeterra Riot Games UI Tutorial

Subscribers:
3,720
Published on ● Video Link: https://www.youtube.com/watch?v=5jInPShKIJ0



Legends of Runeterra
Category:
Tutorial
Duration: 58:10
419 views
25


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.







Tags:
user interface design for games
league of legends game user interface
riot games game user interface
legends of runeterra game ui
legends of runeterra user interface
Figma game user interface
Figma game ui
Figma game ui tutorial
riot games ui
legends of runterra ui
how to create game ui



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.