Game UI Wireframing in Procreate & Figma Tutorial Part 1 | Daily Task Screen Design

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



Duration: 0:00
2,124 views
73


Welcome to Part 1 of this Game UI Tutorial series! In this video, we’ll start by wireframing a Daily Task Screen using Procreate. I’ll walk you through the process of sketching out the basic layout and UI elements for the screen. After finalising the wireframe, we’ll open up Figma and create a basic white box layout that we’ll build on in the next part of the series.

Throughout the video, I’ll also discuss user experience considerations and design choices that will guide us in future parts as we implement the UI in Unity.

What You’ll Learn in This Video:

How to use Procreate for sketching out a basic game UI wireframe.
The process of building a white box layout in Figma.
User experience (UX) tips for designing effective UI screens.
How to plan your wireframe for future development in Unity.

Timestamps
1:13 Procreate Wireframe Process
11:30 Pencil Wireframe to Figma Whitebox
20:55 Overview of Components and Creating Components
22:00 Creating Component Variants25:00 Auto Layouts
26:15 Figma Prototype Testing & Refinement

Support the channel on Patreon: Join me on Patreon for exclusive content, behind-the-scenes updates, and more: https://www.patreon.com/c/WarrenWinters




Other Videos By Warren Winters


2025-02-14U+I - the Cozy UI Club | A hub for designers, developers and creatives who share a passion for UI.
2025-02-12Figma Game UI Design Ghost HQ UI Tutorial in Figma – Tips & Insights
2025-02-04Figma Game UI - GHOST HQ Mobile Game Button Design with Figma Variants and Prototyping
2025-02-01Figma Game UI - Easy Animated Call To Action for Your Game UI Prototype - Figma Variants
2025-01-22Figma to Unity Game UI Tutorial Part 2 | Skinning Wireframes & Art Implementation
2025-01-22Game UI Wireframing in Procreate & Figma Tutorial Part 1 | Daily Task Screen Design
2025-01-22Unity Game UI Tutorial Part 3 | Art Pass, UI Testing & Final Thoughts
2025-01-07⚡️Creating a ‘Drink a Mana Potion’ Speed Drawing in Procreate #procreate #gameart #art #procreateart
2024-07-11Figma UI Looping and Scrolling Texture Squad Busters x Dungeon Ballerz
2024-03-27Clash Mini Figma Game UI Tutorial #figma #gameshorts #ui
2024-03-25This UI was harder than it should have been! Figma Game UI Clash Mini Tutorial
2024-03-15Figma Game UI - Clash Mini Game User Interface Speed Build
2024-03-01This Figma Plugin Just Changed the UI Game - Forever? #figmadesign #figmaplugin #ui #figma
2024-02-29This Figma Plugin Just Changed the UI Game - Forever?
2024-02-08Figma Game UI - Gardenscapes Game UI Tutorial
2024-02-06Figma Game UI - Gardenscape Game UI Speed Build
2023-12-01Game UI Tutorial - New World UI Amazon Games Photoshop UI Tutorial
2023-11-24Game UI - New World Game UI Amazon Games Photoshop UI Tutorial
2023-11-17Figma UI Quickly Add Multiple Images to Objects #figma #figmatutorial #ui #figmatips
2023-11-16Figma UI - Marvel Snap Game UI Tutorial
2023-11-14Figma Game UI Royal Match Game UI Tutorial