Free Figma Course: Design a Video Game App in Figma

Want to master UI design with me? Join my 30-Day UI Design program

🏆 //////////// Join my members community to get access to perks:
You can get this starting and ending design file

------------------------------------------------------------------------------------

🤝 //////////// My Courses, Templates, Free E-Books, & 1:1 Mentorship

👋 ////////// Follow me on Social

📫 ////////// Sign up for my Monthly Newsletter

------------------------------------------------------------------------------------

🖥️ ////////// I build most of my websites using Webflow

📸 ////////// The Equipment I use

00:00:00 Introduction
00:06:10 Mood board
00:21:47 Project Requirements
00:26:08 Color Styles
00:30:11 Navigation
00:35:31 Grid & Layout
00:39:04 Wire framing
00:43:31 Cards
00:46:13 Vertical Scrolling
00:50:14 Detail Screen
01:00:42 Prototyping
01:06:48 Add Images
01:14:56 Hard grid vs Soft grid
01:18:17 Icons
01:28:09 Chat
01:44:55 Portrait view
02:00:38 Dashboard
02:11:41 Scaling components
02:26:58 States
02:31:59 Scrolling space hack
02:33:03 Color
02:40:45 Fleshing it out
02:52:21 Reusing more components
03:04:47 Better Nav
03:10:26 Organize
03:15:29 Better Transitions
03:23:25 Dark mode
03:38:43 Design System
03:46:45 Multiple Triggers
03:47:29 Fixing Issues
03:52:07 Scrolling the chat

[candi_rocket]

I cannot tell you how informative and helpful this was! I have done multiple courses on how to design apps in Figma on online course sites and NONE came close to helping me understand so much so easily! Your practical real time approach is what I have been looking for. Thank you!

[Kimardszn]

I'm less than 3 minutes into the video and I'm super grateful for your content. You're doing a great job helping designers like me.

Thank you Jesse. You rock man!

[gebbygebbers]

Woah thank you! This dropped when I was about to go insane from feegma. We make janky web designs at work non stop, so this'll cheer me up for sure 💀💞

[marisamillard]

I loved this video! I'm new to the UX/UI design world and you are the first designer I've started watching - please keep doing this! Incredibly helpful vs the courses I'm taking RN. Thanks for making content like this Jesse!

[GinaBenedetto]

I watched this WHOLE video and I can't tell you how helpful it was! I feel like I've got a much better handle on Figma after seeing you work with it like this! I'm making the switch over from XD and am so appreciative for your clear, kind and humorous teaching style.

[Terigidi]

Wow, just finished your course and I'm blown away! You're absolutely awesome and so inspiring. Can't wait for more videos like this, keep up the fantastic work!

[SpankIEkzs]

Jesse, you are such a natural teacher of UI/UX design, have passion about it, and this video is super interesting and helpful! I came to the right place! Best of luck! 🤝

[bigmouthtv]

thank you man!,
i was with you throughout the course, i did all the work and got same design as you ☺ need more !!!!

[mahnoorabbas]

So incredibly informative! Learnt lots of new things! :) Managed to stay through the whole video and follow along! Thankyouuu! Would really appreciate more in depth tutorials like this!

[ElisaFromElia]

Thank you for this amazing tutorial! It was incredibly helpful. I’d love to see more like this—covering wireframes to prototypes with VARIABLES, responsive dashboards, data visualizations, and advanced prototyping. Your tutorials are the best among all Figma content I’ve seen. So glad I found your channel! Wishing you a fantastic 2025!

[Mettlehead]

Months of bootcamps and I learn more in the moment so this live stream recap so I can pause and go through it with you was SUCH a game changer for me to learn Auto Layout. Holy Smokes. WHAT. As you can imagine I feel both OOF and AHA at the moment so I am going to drink my coffee and continue making this app in Figma and process this video and save it so I can continue to use it as an HG "I can do things I just need to see it done first in real time every once in a while." video. So thank you 😂🤘

[tomuncommon]

that was amazing! I would love to see more long form like this to see the whole design process! Also, hearing your thoughts while you design is real helpful

[underscoreroa]

only 17mins in and thoroughly enjoying. thanks for keeping it light, Jesse.

[IamRebeka]

Thank you so much! That was so fun to watch and I learned so much more about Figma today!

[meecoshaux]

Thank you very much! I have a lot of experience in digital drawing, so I was pleasantly surprised to find out that most of the rules there apply in figma as well! This is the first time I opened up Figma, and after this compilation I think I'm fairly comfortable around the app. Thanks again!

[josieedelman]

This video was really helpful when learning how to design in Figma. Thank you!

Could you do a live stream focusing on components and design systems? Showing more on the proper process of nesting, building components, when to stop and do it in your design process, etc.? That would be super helpful.

Towards the end of the video, I started to get a little confused because we switched the usernames and profile pictures before creating components, and then went back to create components and had to repeat the process of changing usernames and pictures.

Is creating components and a design system something you switch back and forth between during the design process? How do you know the right time to create a component?

[mariasilvamagalhaes]

"Esse vídeo é simplesmente incrível! Não consigo parar de assistir e aprender com ele."

[vrajgajjar]

Thank you! It was really helpful. I learnt lot of things about Figma including Auto Layout, Component and Prototyping while also understanding design process and workflow. Again, Thank you It was easy to understand.

[nyme]

This is my date for today. Thank u for this, I want to change my work and this helps a lot for my career :)

[AnahiAndJustin]

This was so fun to watch! Hope you make more in the future :)