Free Figma Course: Design a Video Game App in Figma

  Рет қаралды 337,046

Jesse Showalter

Jesse Showalter

Күн бұрын

Free course learning UI/UX design in Figma from start to finish. Join me in this free course compiled from a recent live stream series all about designing a video game companion app in Figma ... Remember to Subscribe goo.gl/6vCw64
Want to master UI design with me? Join my 30-Day UI Design program
30dayui.com/
🏆 //////////// Join my members community to get access to perks:
You can get this starting and ending design file
designchamps.io/
------------------------------------------------------------------------------------
🤝 //////////// My Courses, Templates, Free E-Books, & 1:1 Mentorship
www.jesseshowalter.com/
👋 ////////// Follow me on Social
Instagram: / imjesseshow
Twitter: / imjesseshow
📫 ////////// Sign up for my Monthly Newsletter
www.jesseshowalter.com/newsletter
------------------------------------------------------------------------------------
🖥️ ////////// I build most of my websites using Webflow
webflow.grsm.io/4495884
🎵 ////////// Take your films to the next level with music from Musicbed. Sign up for a free account to listen for yourself: fm.pxf.io/c/1372011/1347628/1...
📸 ////////// The Equipment I use
www.amazon.com/shop/jesseshow...
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

Пікірлер: 148
@tomuncommon4282
@tomuncommon4282 10 ай бұрын
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
@Terigidi
@Terigidi 11 ай бұрын
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!
@underscoreroa
@underscoreroa 7 ай бұрын
only 17mins in and thoroughly enjoying. thanks for keeping it light, Jesse.
@candi_rocket
@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!
@AnahiAndJustin
@AnahiAndJustin 11 ай бұрын
This was so fun to watch! Hope you make more in the future :)
@GinaBenedetto
@GinaBenedetto 6 ай бұрын
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.
@Mettlehead
@Mettlehead 9 ай бұрын
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 😂🤘
@ErinHewett
@ErinHewett 11 ай бұрын
Super helpful, especially when you have to troubleshoot something.
@mariasilvamagalhaes12
@mariasilvamagalhaes12 6 ай бұрын
"Esse vídeo é simplesmente incrível! Não consigo parar de assistir e aprender com ele."
@vrajgajjar1675
@vrajgajjar1675 Жыл бұрын
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.
@erdemkose8994
@erdemkose8994 Жыл бұрын
Really needed this. Thanks man. You're the best!
@JesseShowalter
@JesseShowalter Жыл бұрын
You've got this!!
@andrewh8526
@andrewh8526 Ай бұрын
Дуже класно поясняєте! Дякую Вам !!!
@mariasilvamagalhaes12
@mariasilvamagalhaes12 6 ай бұрын
Esse vídeo foi a melhor parte do meu dia… só pelo trabalho bem feito
@Silhouette_one
@Silhouette_one 11 ай бұрын
This is so so so good! Thank you :) Will you do more Figma real time design content? One cool feature I've seen in video content is when the creator uses a keybinding it is automatically shown on the video, it's very helpful for us newbies to learn from :D
@Milchenkaa
@Milchenkaa 3 ай бұрын
Jesse you are so lovable! Enjoying your live streams so much!
@mariasilvamagalhaes12
@mariasilvamagalhaes12 6 ай бұрын
Parabéns pelo excelente trabalho! É ótimo ver um canal que se preocupa em entregar conteúdo de qualidade.
@henrythomas7112
@henrythomas7112 Ай бұрын
Thank you so much for this video. Super helpful and well-presented. Your time and effort is most appreciated!
@meecoshaux
@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!
@JesseShowalter
@JesseShowalter Жыл бұрын
That's awesome!!
@mahnoorabbas
@mahnoorabbas 9 ай бұрын
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!
@JesseShowalter
@JesseShowalter 9 ай бұрын
If you want more in depth check out my new 30 day UI course 30dayui.com/
@josieedelman2875
@josieedelman2875 Жыл бұрын
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?
@raquelgonzalez5823
@raquelgonzalez5823 28 күн бұрын
By far the best course i have taken! Thank you sooo much! i learnd a lot!
@mariasilvamagalhaes12
@mariasilvamagalhaes12 6 ай бұрын
Esse vídeo é incrível! Adorei a forma como o assunto foi abordado e explicado de maneira clara e objetiva.
@josuefilms
@josuefilms 11 ай бұрын
Wow so glad I ran into this, just subscribed too, thank you
@marisamillard3668
@marisamillard3668 3 ай бұрын
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!
@DevenezExtraordinaire23
@DevenezExtraordinaire23 3 ай бұрын
Hi Marimillard I hope you're doing well, how is your UI/UX design journey so far. I'm also new in the UI/UX design world, I want to share experience with new learner if you don't mind. Looking forward for your response, take care
@IamRebeka5
@IamRebeka5 8 ай бұрын
Thank you so much! That was so fun to watch and I learned so much more about Figma today!
@JesseShowalter
@JesseShowalter 8 ай бұрын
So glad it was helpful!!
@MvPTrinity
@MvPTrinity 5 ай бұрын
This was super helpful, exactly what I needed
@gebbygeb3547
@gebbygeb3547 Жыл бұрын
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 💀💞
@JesseShowalter
@JesseShowalter Жыл бұрын
Glad I could help!
@thenicparker
@thenicparker 6 ай бұрын
Jesse, even in a livestream style, I love your teaching style. Do you have a course like this on how to use figma? Or do you have recommendations for a good figma course that explains everything?
@ttrinh7777
@ttrinh7777 3 ай бұрын
thank you so much for creating this kind of content. It's really helpful for a beginner like me. Please continue this series.
@Kenechukwuezeofor
@Kenechukwuezeofor Жыл бұрын
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!
@JesseShowalter
@JesseShowalter Жыл бұрын
Thank you so much, man!!
@mariasilvamagalhaes12
@mariasilvamagalhaes12 6 ай бұрын
Você explica tudo de forma clara e objetiva!
@jayelsolutions
@jayelsolutions 2 ай бұрын
This was exactly what I needed! Thank you so much!
@JesseShowalter
@JesseShowalter 2 ай бұрын
If you like this you’d love my full ui course www.30dayui.com/
@iiNB4Rii
@iiNB4Rii Жыл бұрын
This will make me finally learn this program that I see a lot of workplaces use.
@JesseShowalter
@JesseShowalter Жыл бұрын
So stoked you enjoyed it!
@SpankIEkzs
@SpankIEkzs 2 ай бұрын
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! 🤝
@JesseShowalter
@JesseShowalter 2 ай бұрын
Wow, thank you! If you want to learn more from me check out www.30dayui.com/
@mariasilvamagalhaes12
@mariasilvamagalhaes12 6 ай бұрын
Esse vídeo foi muito divertido! Estou ansioso para ver mais vídeos seus!
@angelafraser2147
@angelafraser2147 Жыл бұрын
Jesse Thank you!!!!
@alliecao7787
@alliecao7787 Жыл бұрын
Thank you so much for sharing this, it’s super helpful
@JesseShowalter
@JesseShowalter Жыл бұрын
Glad it was helpful!
@ahmedsodany3012
@ahmedsodany3012 11 ай бұрын
Thank You Jesse
@nubiaoliveira6650
@nubiaoliveira6650 Жыл бұрын
I was never forgetting the fact that you helped me. Meus sinceros agradecimentos 🥰
@JesseShowalter
@JesseShowalter Жыл бұрын
You’re welcome 😊
@user-of3mx1ov1r
@user-of3mx1ov1r 5 ай бұрын
Wow. That was supper and extra. I t is my first time to be here. Thanks so much
@mariasilvamagalhaes12
@mariasilvamagalhaes12 6 ай бұрын
Estou muito feliz por ter me inscrito e ter acesso a este conteúdo incrível.
@mariasilvamagalhaes12
@mariasilvamagalhaes12 6 ай бұрын
Fantástico vídeo! Estou ansioso para ver mais vídeos seus!
@acya05
@acya05 Ай бұрын
She is sooOoOOoo extra 😅 .. but i dont hate it surprisingly 🫶 I think she is naturally super extra and actually enthusiastic about her work. That sincerity comes thru.. a bit less extra and a bit more speed w less pauses and less stretching of some syllables to the moon, she’d be a delight to watch 👩‍🍳 🤌🏼❤
@nyme2349
@nyme2349 7 ай бұрын
This is my date for today. Thank u for this, I want to change my work and this helps a lot for my career :)
@bigmouthtv9893
@bigmouthtv9893 8 ай бұрын
thank you man!, i was with you throughout the course, i did all the work and got same design as you ☺ need more !!!!
@JesseShowalter
@JesseShowalter 8 ай бұрын
Get the pre launch of my new course 30dayui.com/
@bigmouthtv9893
@bigmouthtv9893 8 ай бұрын
thanks man @@JesseShowalter
@meylon257
@meylon257 Жыл бұрын
Well done for the beautiful work, your guides are very successful
@JesseShowalter
@JesseShowalter Жыл бұрын
Glad you like them!
@swagfel
@swagfel Жыл бұрын
That's why you are one of my favourite youtubers
@Y082004
@Y082004 3 ай бұрын
Great and very understandable video. well done
@malinirao
@malinirao Жыл бұрын
Soooo coool!
@deletingmychannel
@deletingmychannel 3 ай бұрын
I learned so much from start to finish! Thank you for the tutorial!
@jordanhurd1988
@jordanhurd1988 Жыл бұрын
I loved this. I may need to watch it more than once to get it ingrained into my brain.
@JesseShowalter
@JesseShowalter Жыл бұрын
Get. It. 🔥
@yaown
@yaown Жыл бұрын
Thank you so much for this course, lots of stuff to think about. Love from Ukraine ❤
@eleazarbiboum2705
@eleazarbiboum2705 Жыл бұрын
Tat is a fantastical job done here man. I learned a lot. But I do need a subscription do have access to all Figma future right?
@mariasilvamagalhaes12
@mariasilvamagalhaes12 6 ай бұрын
Adorei o conteúdo do canal, muito informativo!
@thanhquannguyen8433
@thanhquannguyen8433 Жыл бұрын
More course like this plzzz. Love u
@JesseShowalter
@JesseShowalter Жыл бұрын
Yeahhhhh!!!
@nicolenew1708
@nicolenew1708 4 ай бұрын
SUPER ❤
@dwojczuk1
@dwojczuk1 Жыл бұрын
Thank you, thank you, thank you!!!
@JesseShowalter
@JesseShowalter Жыл бұрын
You are so welcome!
@MzS_92
@MzS_92 Жыл бұрын
Thank you!
@JesseShowalter
@JesseShowalter Жыл бұрын
You're welcome!
@bermysanders9278
@bermysanders9278 3 ай бұрын
Hi when you are checking the spacing between the edges etc, what specific keyboard key are you using? when i press control it seems to duplicate the frame etc im working on
@santiagogomezrecio3865
@santiagogomezrecio3865 Жыл бұрын
Watched it completly, hahaha dammit 4 hours :p but it was worth, there's a lot we can learn from the real design process of a designer, like when the old times we used to copycat the senior designer in the agency, it felt like that. Thanks for the video
@erfanbayat9786
@erfanbayat9786 10 ай бұрын
thank you sir i`ve learned alot
@biljeg
@biljeg Жыл бұрын
This is a gold mine
@JesseShowalter
@JesseShowalter Жыл бұрын
Thank you for your kind words!!
@altamashkhan5870
@altamashkhan5870 Ай бұрын
What a great video this is
@DigitalDesignAndGaming
@DigitalDesignAndGaming 3 ай бұрын
🙏Hey Jesse, thank you for this helpful tutorial. I have learned a lot from this video. 😊I am so happy that I have completed Counter-strike 2 game companion app by watching this whole video. 👍Keep it up.
@JesseShowalter
@JesseShowalter 2 ай бұрын
Great job! If you want Learn more about UI design check out my new course www.30dayui.com/
@mariasilvamagalhaes12
@mariasilvamagalhaes12 6 ай бұрын
Esse vídeo me deixou muito empolgado!
@mariasilvamagalhaes12
@mariasilvamagalhaes12 6 ай бұрын
To aqui fortalecendo o vídeo
@mariasilvamagalhaes12
@mariasilvamagalhaes12 6 ай бұрын
Estou ansioso para ver o que você tem preparado para nós!
@user-Makavalli
@user-Makavalli 3 ай бұрын
Where can we get all the resources you used or what do you think we can do to get high quality resolution like this?
@prashlovessamosa
@prashlovessamosa Жыл бұрын
Thank you for providing for free
@mariasilvamagalhaes12
@mariasilvamagalhaes12 6 ай бұрын
obrigada pelo seu depoimento
@mariasilvamagalhaes12
@mariasilvamagalhaes12 6 ай бұрын
Você me inspira todos os dias
@alijabbar9601
@alijabbar9601 Жыл бұрын
Great Video ❤
@JesseShowalter
@JesseShowalter Жыл бұрын
Glad you enjoyed
@Vegenance
@Vegenance Жыл бұрын
great😊😊😊😊
@mariasilvamagalhaes12
@mariasilvamagalhaes12 6 ай бұрын
adorei seu canal bom de ver
@dhayve
@dhayve 9 ай бұрын
I loved the thinking process, i loved the mistakes more and the right way to get it done eventually, that helps when i have my own hiccups, its important to teach how to fix errors..thanks. The boolean toggle though, i do State=Yes /[No] that gives the toogle experience I definitely would love more of these structured contents, maybe a website next time? Quicl one: How do i share the file i redesigned with you? Ps: +1 Subcriber❤🎉
@JesseShowalter
@JesseShowalter 9 ай бұрын
If you want more structure check out my new UI design program 30dayui.com/
@AIAnimation-ub2nj
@AIAnimation-ub2nj Ай бұрын
Sir I want to build OTT streaming resizeable app like Netflix and prime video but my streaming app is free can you make a playlist on this topic how to create streaming app on figma, protopie or framer or any free website from login page to favorites page and search option and download page and other important pages with prototype
@NguyenNguyen-nw1nf
@NguyenNguyen-nw1nf 3 күн бұрын
thanks
@angelovergara
@angelovergara 5 ай бұрын
How is this different with UI/UX in a Weekend, which I just purchased.? Is it pretty much the same content?
@TK-wp3iw
@TK-wp3iw Жыл бұрын
Lessgo 😤
@JesseShowalter
@JesseShowalter Жыл бұрын
🔥🔥🔥
@steinbeats
@steinbeats Жыл бұрын
Jesse🔥🔥🔥
@JesseShowalter
@JesseShowalter Жыл бұрын
🙏
@user-cy6iq7fs7s
@user-cy6iq7fs7s 6 ай бұрын
danke
@evakandelin3301
@evakandelin3301 21 күн бұрын
Do you have a more beginner friendly course like this? I feel like in this video there are already many things one has to know to keep up with this.
@JesseShowalter
@JesseShowalter 20 күн бұрын
30dayui.com
@rahim_2005
@rahim_2005 8 ай бұрын
If we have project for app we can do like this and also prototype like do this
@Ninjajitsu562
@Ninjajitsu562 9 ай бұрын
new bro good channel
@prashalibhuriya7086
@prashalibhuriya7086 5 ай бұрын
MORE MORE MORE MORE MORE
@MakeMoney.PassiveIncome.
@MakeMoney.PassiveIncome. 5 ай бұрын
🤩
@mariasilvamagalhaes12
@mariasilvamagalhaes12 6 ай бұрын
Leo Colin Colin muito atencioso com seus inscritos valeu
@misterhanwee1030
@misterhanwee1030 Жыл бұрын
Please rant more about UX.. 🤣 That's how I learn where the UX flaws at
@marzoval9551
@marzoval9551 Жыл бұрын
What kinda games do you like to play Jesse?
@JesseShowalter
@JesseShowalter Жыл бұрын
TT Boardgames 🤓
@prateekshukla7029
@prateekshukla7029 5 ай бұрын
can we make a upload button on figma please tell me
@choyondas7732
@choyondas7732 4 ай бұрын
@malikqatagan8977
@malikqatagan8977 7 ай бұрын
✌️
@smgraphics3012
@smgraphics3012 Жыл бұрын
where to find logo and images
@muadzrosli
@muadzrosli Жыл бұрын
I noticed the clock at your mac taskbar at the top, it says Friday March 11th. Weird😅 Today is March 10th at the moment I’m typing this
@JesseShowalter
@JesseShowalter Жыл бұрын
That’s crazy! 😳
@user-cl6ov7zc3z
@user-cl6ov7zc3z 5 ай бұрын
how do i access my net worth on my crypto wallet?
@anthonyschleig3341
@anthonyschleig3341 8 ай бұрын
2:08:13 slide animate (For me to come back to)
@abdikadirQulle
@abdikadirQulle Жыл бұрын
what the f*ck this is so cool wllhi
@user-qt2gp9wj7u
@user-qt2gp9wj7u 6 ай бұрын
200$ сегодня сделал, спасибо
@HeatherSpringeres
@HeatherSpringeres 2 ай бұрын
Fairly the ??. Delightful? too
@JesseShowalter
@JesseShowalter 2 ай бұрын
?
@GurpreetSingh-nz2fh
@GurpreetSingh-nz2fh Жыл бұрын
Can i download this file for free. Pls letme know
@JesseShowalte.r
@JesseShowalte.r Жыл бұрын
ʜᴇʟʟᴏ 👋 ғᴀɴ ᴄᴏɴɢʀᴀᴛᴜʟᴀᴛɪᴏɴs ʏᴏᴜ’ᴠᴇ ʙᴇᴇɴ sᴇʟᴇᴄᴛᴇᴅ ᴀᴍᴏɴɢ ᴛʜɪs ᴡᴇᴇᴋ ᴡɪɴɴᴇʀs ᴄᴏɴᴛᴀᴄᴛ ᴍᴇ ᴏɴ ᴛᴇʟᴇɢʀᴀᴍ ғᴏʀ ʏᴏᴜʀ ᴘᴀᴄᴋᴀɢᴇ 🎁🎄☝️☝️
Figma Masterclass for Beginners (2023 Updated)
31:57
Jesse Showalter
Рет қаралды 534 М.
Amateur vs Pro UI Design | with examples
20:46
Jesse Showalter
Рет қаралды 37 М.
New Gadgets! Bycycle 4.0 🚲 #shorts
00:14
BongBee Family
Рет қаралды 12 МЛН
КАКОЙ ВАШ ЛЮБИМЫЙ ЦВЕТ?😍 #game #shorts
00:17
How to Master Figma and Design 10X FASTER!
12:10
Jesse Showalter
Рет қаралды 30 М.
6 UI Hacks I Wish I Knew As A Beginner
11:11
Tim Gabe
Рет қаралды 718 М.
Figma Tutorial: Use Figma Variables Like a Pro (+ Practice File)
30:30
DesignWithArash
Рет қаралды 259 М.
FULL CANVA TUTORIAL 2024 | How To Use Canva For BEGINNERS!
2:12:08
Natalia Kalinska
Рет қаралды 525 М.
Free Figma Crash Course for Beginners 2024 | UI/UX Design
1:01:20
DesignWithArash
Рет қаралды 548 М.
Learn Web Design For Beginners - Full Course (2024)
3:07:31
Flux Academy
Рет қаралды 1,2 МЛН
Master Spacing in UI Design 💪
10:23
Jesse Showalter
Рет қаралды 26 М.
An Intro to UI/UX in Games | Creative Assembly
47:29
Creative Assembly
Рет қаралды 40 М.
How I make UI color palettes
8:51
UX Tools
Рет қаралды 363 М.
Free Figma UX Design UI Essentials Course
2:57:40
Bring Your Own Laptop
Рет қаралды 1,8 МЛН