Figma Game UI - Legends of Runeterra Riot Games UI Tutorial

✉️ Join my UI/UX Weekly + Early Access to New UI Kits Newsletter
http://eepurl.com/js5QII

☕ If you enjoy my work and want to see more, consider buying me a coffee, every bit helps keep this going!
https://buymeacoffee.com/warrenwinters

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://warrenwinters.gumroad.com/l/legendsofruneterraui

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.

Видео Figma Game UI - Legends of Runeterra Riot Games UI Tutorial канала Warren Winters