Figma Game UI - Legends of Runeterra Riot Games UI Tutorial

Channel:

Warren Winters

Subscribers:

3,720

Published on August 28, 2023 6:24:04 PM ● Video Link: https://www.youtube.com/watch?v=5jInPShKIJ0

Game:

Legends of Runeterra (2020)

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.

Other Statistics