Free Figma Course: Design a Video Game App in Figma

Поділитися
Вставка
  • Опубліковано 2 тра 2024
  • 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

КОМЕНТАРІ • 144

  • @tomuncommon4282
    @tomuncommon4282 9 місяців тому +11

    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 10 місяців тому +4

    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 6 місяців тому +4

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

  • @JennaMaloneArt
    @JennaMaloneArt 2 місяці тому +1

    I learned so much from start to finish! Thank you for the tutorial!

  • @AnahiAndJustin
    @AnahiAndJustin 10 місяців тому +1

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

  • @candi_rocket
    @candi_rocket 10 місяців тому +1

    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!

  • @Mettlehead
    @Mettlehead 8 місяців тому +2

    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 😂🤘

  • @GinaBenedetto
    @GinaBenedetto 5 місяців тому +1

    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.

  • @vrajgajjar1675
    @vrajgajjar1675 Рік тому +1

    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.

  • @henrythomas7112
    @henrythomas7112 7 днів тому

    Thank you so much for this video. Super helpful and well-presented. Your time and effort is most appreciated!

  • @mariasilvamagalhaes12
    @mariasilvamagalhaes12 5 місяців тому +1

    Esse vídeo foi a melhor parte do meu dia… só pelo trabalho bem feito

  • @mariasilvamagalhaes12
    @mariasilvamagalhaes12 5 місяців тому +1

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

  • @mariasilvamagalhaes12
    @mariasilvamagalhaes12 5 місяців тому +1

    Parabéns pelo excelente trabalho! É ótimo ver um canal que se preocupa em entregar conteúdo de qualidade.

  • @Silhouette_one
    @Silhouette_one 10 місяців тому +1

    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

  • @josieedelman2875
    @josieedelman2875 Рік тому +5

    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?

  • @mariasilvamagalhaes12
    @mariasilvamagalhaes12 5 місяців тому

    Esse vídeo é incrível! Adorei a forma como o assunto foi abordado e explicado de maneira clara e objetiva.

  • @andrewh8526
    @andrewh8526 15 днів тому

    Дуже класно поясняєте! Дякую Вам !!!

  • @ErinHewett
    @ErinHewett 10 місяців тому +1

    Super helpful, especially when you have to troubleshoot something.

  • @Milchenkaa
    @Milchenkaa 2 місяці тому +1

    Jesse you are so lovable! Enjoying your live streams so much!

  • @mahnoorabbas
    @mahnoorabbas 8 місяців тому +3

    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  7 місяців тому

      If you want more in depth check out my new 30 day UI course 30dayui.com/

  • @ttrinh7777
    @ttrinh7777 2 місяці тому

    thank you so much for creating this kind of content. It's really helpful for a beginner like me. Please continue this series.

  • @IamRebeka5
    @IamRebeka5 7 місяців тому +2

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

  • @mariasilvamagalhaes12
    @mariasilvamagalhaes12 5 місяців тому

    Você explica tudo de forma clara e objetiva!

  • @MvPTrinity
    @MvPTrinity 4 місяці тому

    This was super helpful, exactly what I needed

  • @erdemkose8994
    @erdemkose8994 Рік тому +1

    Really needed this. Thanks man. You're the best!

  • @marisamillard3668
    @marisamillard3668 2 місяці тому +1

    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 2 місяці тому

      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

  • @josuefilms
    @josuefilms 10 місяців тому

    Wow so glad I ran into this, just subscribed too, thank you

  • @meecoshaux
    @meecoshaux Рік тому +1

    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!

  • @nyme2349
    @nyme2349 6 місяців тому

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

  • @gebbygeb3547
    @gebbygeb3547 Рік тому +4

    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 💀💞

  • @mariasilvamagalhaes12
    @mariasilvamagalhaes12 5 місяців тому

    Esse vídeo foi muito divertido! Estou ansioso para ver mais vídeos seus!

  • @yaown
    @yaown Рік тому

    Thank you so much for this course, lots of stuff to think about. Love from Ukraine ❤

  • @bigmouthtv9893
    @bigmouthtv9893 7 місяців тому +1

    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  7 місяців тому +1

      Get the pre launch of my new course 30dayui.com/

    • @bigmouthtv9893
      @bigmouthtv9893 7 місяців тому

      thanks man
      @@JesseShowalter

  • @mariasilvamagalhaes12
    @mariasilvamagalhaes12 5 місяців тому

    Estou muito feliz por ter me inscrito e ter acesso a este conteúdo incrível.

  • @jayelsolutions
    @jayelsolutions Місяць тому +1

    This was exactly what I needed! Thank you so much!

    • @JesseShowalter
      @JesseShowalter  Місяць тому

      If you like this you’d love my full ui course www.30dayui.com/

  • @user-of3mx1ov1r
    @user-of3mx1ov1r 4 місяці тому

    Wow. That was supper and extra. I t is my first time to be here. Thanks so much

  • @Kenechukwuezeofor
    @Kenechukwuezeofor Рік тому +2

    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!

  • @SpankIEkzs
    @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! 🤝

    • @JesseShowalter
      @JesseShowalter  Місяць тому +1

      Wow, thank you! If you want to learn more from me check out www.30dayui.com/

  • @thenicopark
    @thenicopark 5 місяців тому +1

    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?

  • @mariasilvamagalhaes12
    @mariasilvamagalhaes12 5 місяців тому

    Adorei o conteúdo do canal, muito informativo!

  • @mariasilvamagalhaes12
    @mariasilvamagalhaes12 5 місяців тому

    Fantástico vídeo! Estou ansioso para ver mais vídeos seus!

  • @felipevargas8522
    @felipevargas8522 Рік тому

    That's why you are one of my favourite youtubers

  • @Y082004
    @Y082004 2 місяці тому

    Great and very understandable video. well done

  • @alliecao7787
    @alliecao7787 Рік тому +1

    Thank you so much for sharing this, it’s super helpful

  • @nubiaoliveira6650
    @nubiaoliveira6650 Рік тому

    I was never forgetting the fact that you helped me. Meus sinceros agradecimentos 🥰

  • @santiagogomezrecio3865
    @santiagogomezrecio3865 Рік тому +1

    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

  • @angelafraser2147
    @angelafraser2147 Рік тому

    Jesse Thank you!!!!

  • @ahmedsodany3012
    @ahmedsodany3012 10 місяців тому

    Thank You Jesse

  • @mariasilvamagalhaes12
    @mariasilvamagalhaes12 5 місяців тому

    To aqui fortalecendo o vídeo

  • @meylon257
    @meylon257 Рік тому

    Well done for the beautiful work, your guides are very successful

  • @mariasilvamagalhaes12
    @mariasilvamagalhaes12 5 місяців тому

    Estou ansioso para ver o que você tem preparado para nós!

  • @eleazarbiboum2705
    @eleazarbiboum2705 11 місяців тому

    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?

  • @DigitalDesignAndGaming
    @DigitalDesignAndGaming Місяць тому

    🙏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  Місяць тому

      Great job! If you want Learn more about UI design check out my new course www.30dayui.com/

  • @jordanhurd1988
    @jordanhurd1988 Рік тому +1

    I loved this. I may need to watch it more than once to get it ingrained into my brain.

  • @erfanbayat9786
    @erfanbayat9786 9 місяців тому

    thank you sir i`ve learned alot

  • @mariasilvamagalhaes12
    @mariasilvamagalhaes12 5 місяців тому

    obrigada pelo seu depoimento

  • @iiNB4Rii
    @iiNB4Rii Рік тому

    This will make me finally learn this program that I see a lot of workplaces use.

  • @thanhquannguyen8433
    @thanhquannguyen8433 Рік тому +1

    More course like this plzzz. Love u

  • @nicolenew1708
    @nicolenew1708 3 місяці тому

    SUPER ❤

  • @mariasilvamagalhaes12
    @mariasilvamagalhaes12 5 місяців тому

    adorei seu canal bom de ver

  • @mariasilvamagalhaes12
    @mariasilvamagalhaes12 5 місяців тому

    Esse vídeo me deixou muito empolgado!

  • @altamashkhan5870
    @altamashkhan5870 13 днів тому

    What a great video this is

  • @malinirao
    @malinirao Рік тому

    Soooo coool!

  • @mariasilvamagalhaes12
    @mariasilvamagalhaes12 5 місяців тому

    Você me inspira todos os dias

  • @prashlovessamosa
    @prashlovessamosa Рік тому

    Thank you for providing for free

  • @dwojczuk1
    @dwojczuk1 Рік тому

    Thank you, thank you, thank you!!!

  • @dhayve
    @dhayve 8 місяців тому +1

    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  7 місяців тому +1

      If you want more structure check out my new UI design program 30dayui.com/

  • @user-cy6iq7fs7s
    @user-cy6iq7fs7s 5 місяців тому

    danke

  • @biljeg
    @biljeg Рік тому +1

    This is a gold mine

  • @Ninjajitsu562
    @Ninjajitsu562 8 місяців тому

    new bro good channel

  • @Vegenance
    @Vegenance 11 місяців тому

    great😊😊😊😊

  • @MzS_92
    @MzS_92 Рік тому

    Thank you!

  • @bermysanders9278
    @bermysanders9278 2 місяці тому

    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

  • @AIAnimation-ub2nj
    @AIAnimation-ub2nj 3 дні тому +1

    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

  • @user-Makavalli
    @user-Makavalli 2 місяці тому

    Where can we get all the resources you used or what do you think we can do to get high quality resolution like this?

  • @alijabbar9601
    @alijabbar9601 Рік тому

    Great Video ❤

  • @rahim_2005
    @rahim_2005 7 місяців тому

    If we have project for app we can do like this and also prototype like do this

  • @mariasilvamagalhaes12
    @mariasilvamagalhaes12 5 місяців тому

    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

  • @TK-wp3iw
    @TK-wp3iw Рік тому

    Lessgo 😤

  • @MakeMoney.PassiveIncome.
    @MakeMoney.PassiveIncome. 4 місяці тому

    🤩

  • @steinbeats
    @steinbeats Рік тому

    Jesse🔥🔥🔥

  • @choyondas7732
    @choyondas7732 3 місяці тому

  • @prateekshukla7029
    @prateekshukla7029 4 місяці тому

    can we make a upload button on figma please tell me

  • @prashalibhuriya7086
    @prashalibhuriya7086 4 місяці тому

    MORE MORE MORE MORE MORE

  • @angelovergara
    @angelovergara 4 місяці тому

    How is this different with UI/UX in a Weekend, which I just purchased.? Is it pretty much the same content?

  • @malikqatagan8977
    @malikqatagan8977 6 місяців тому

    ✌️

  • @smgraphics3012
    @smgraphics3012 Рік тому

    where to find logo and images

  • @anthonyschleig3341
    @anthonyschleig3341 6 місяців тому

    2:08:13 slide animate
    (For me to come back to)

  • @user-cl6ov7zc3z
    @user-cl6ov7zc3z 4 місяці тому

    how do i access my net worth on my crypto wallet?

  • @marzoval9551
    @marzoval9551 Рік тому

    What kinda games do you like to play Jesse?

  • @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

  • @user-qt2gp9wj7u
    @user-qt2gp9wj7u 5 місяців тому

    200$ сегодня сделал, спасибо

  • @HeatherSpringeres
    @HeatherSpringeres Місяць тому +1

    Fairly the ??. Delightful? too

  • @abdikadirQulle
    @abdikadirQulle Рік тому

    what the f*ck this is so cool wllhi

  • @laziboiHann
    @laziboiHann 23 дні тому

    ❤😅😅

  • @mariasilvamagalhaes12
    @mariasilvamagalhaes12 5 місяців тому

    Jesus nos ensina a viver uma vida de fé e esperança.

  • @GurpreetSingh-nz2fh
    @GurpreetSingh-nz2fh Рік тому

    Can i download this file for free. Pls letme know

    • @JesseShowalte.r
      @JesseShowalte.r Рік тому

      ʜᴇʟʟᴏ 👋 ғᴀɴ ᴄᴏɴɢʀᴀᴛᴜʟᴀᴛɪᴏɴs ʏᴏᴜ’ᴠᴇ ʙᴇᴇɴ sᴇʟᴇᴄᴛᴇᴅ ᴀᴍᴏɴɢ ᴛʜɪs ᴡᴇᴇᴋ ᴡɪɴɴᴇʀs ᴄᴏɴᴛᴀᴄᴛ ᴍᴇ ᴏɴ ᴛᴇʟᴇɢʀᴀᴍ ғᴏʀ ʏᴏᴜʀ ᴘᴀᴄᴋᴀɢᴇ 🎁🎄☝️☝️

  • @omannicka7099
    @omannicka7099 5 місяців тому

    ge

  • @dresstoimpress
    @dresstoimpress Рік тому +4

    wireframing isn't really a thing you should/need to do anymore. just start drawing the UI and go from there.

    • @oartsoares
      @oartsoares 3 місяці тому +1

      Completely wrong friend, with all due respect.

    • @dresstoimpress
      @dresstoimpress 3 місяці тому

      @@oartsoares how is that wrong? FWIW I’ve been a designer in big tech for the past 8 years, that should give me some perspective

    • @Rulody
      @Rulody 2 місяці тому

      @@dresstoimpressI’ll say for beginners wireframes is best plus some inspirations for your work