Food Ordering Mobile App Design in Figma (2020)

แชร์
ฝัง
  • เผยแพร่เมื่อ 27 ก.ย. 2024
  • In this Figma Mobile App Design Tutorial, you are going to learn how to design a Food Ordering Mobile App in Figma. Figma is a free UI Design tool used creating Mobile App UI and UX.
    Get Figma
    👉 hyginusukeh.co...
    How to Remove Background from Image in Figma: • How to Remove Backgrou...
    IOS Mobile UI Kit:
    www.figma.com/...)
    Let me know what you think about this video and should in case you have any challenges, let me know in the comment section.
    Remember to like, share, comment and subscribe. Also, hit on the notification bell to get notified when I upload a new video.
    Subscribe to my channel my liking this link: / @buildingamazingthings
    You can also reach me on :
    Website: www.hyginusukeh...
    Facebook: / hyginusukeh2
    Twitter: / hyginusukeh
    Instagram: / hyginusukeh
    TH-cam: / @buildingamazingthings
    ~-~~-~~~-~~-~
    Please watch: "Figma Web Design Tutorial with Animation"
    • Figma Web Design Tutor...
    ~-~~-~~~-~~-~

ความคิดเห็น • 525

  • @vidyab4400
    @vidyab4400 ปีที่แล้ว +9

    I am new to UI/UX. when I saw this video, I challenged myself and started building same as this. I am super excited and happy to learn from your channel. Really loved your work and the brief explanation. Lots of love :>

  • @ChuNodeDigital
    @ChuNodeDigital 2 ปีที่แล้ว +13

    I actually love your approach to design. I'm new to UI
    /UX and I can't wait to start building amazing things!

    • @iwutedivine3907
      @iwutedivine3907 2 ปีที่แล้ว

      I'm sure you're building amazing things already by now

    • @ChuNodeDigital
      @ChuNodeDigital 2 ปีที่แล้ว +1

      @@iwutedivine3907 I'm building lots of Amazing things!

  • @olayinkajomiloju7027
    @olayinkajomiloju7027 10 หลายเดือนก่อน +3

    This lovely bro, i am new to UI/UX also but i have been working on Figma before, but this is a next level of innovative designs i would say

  • @jesuslazcano5954
    @jesuslazcano5954 3 ปีที่แล้ว +4

    You have an an excellent teaching approach for me.
    An additional feature could be subtitles for the hearing impaired. And for you to go back and add this feature to your library.

  • @damilolaidowu8128
    @damilolaidowu8128 2 ปีที่แล้ว +3

    thank you so much for this video!!! i just started using figma yesterday and I find this very interesting. it makes it easy to design products and it somehow unleashes the creativity in you. I loved this video, very explanatory.

  • @abdulazizsuraj8869
    @abdulazizsuraj8869 2 ปีที่แล้ว +4

    Please Whr is the link to the description of mobile ui kit

  • @emilywu7427
    @emilywu7427 ปีที่แล้ว +1

    Loved how you explained reasoning behind certain decisions, thank you for this tutorial!

  • @bananachips5748
    @bananachips5748 3 ปีที่แล้ว +5

    hey man, this helped a lot! please make more videos of this genre where you are creating other such projects and use advanced tools and designs. this was ah-mazing

  • @lostinsadnesss
    @lostinsadnesss 2 ปีที่แล้ว +1

    Thank you so much for this tutorial. I was feeling so lost and overwelmed. Thank you for taking the time to explain each step.

  • @zenfitteam7622
    @zenfitteam7622 3 ปีที่แล้ว +1

    Very Good Tutorial. I learnt figma in 45 mins with this.

  • @nicholaschira7972
    @nicholaschira7972 4 ปีที่แล้ว +3

    I really love the way u explain things and break it down to our understanding for we the amateur in ui design. Thank u 🙏🙏🙏

  • @tomilolaonigbinde6205
    @tomilolaonigbinde6205 3 ปีที่แล้ว +2

    Thank you very much. I am starting my UI/UX career with your video.

    • @BuildingAmazingThings
      @BuildingAmazingThings  3 ปีที่แล้ว

      Best of luck! You are welcome

    • @raunixverma757
      @raunixverma757 2 ปีที่แล้ว

      Hello sir we can make app for you kindly check our latest developed app video to understand th-cam.com/video/BsEEn3WVC4o/w-d-xo.html all details are available in the description

  • @comfortigboko9856
    @comfortigboko9856 2 ปีที่แล้ว +1

    thank you so much, I was able to create this same design from the scratch. thank you, smiles!

  • @LauraLopez-we4mg
    @LauraLopez-we4mg ปีที่แล้ว

    Thanks for showing us how to do the hovering effect and the open overlay. I really enjoyed learning these concepts.

  • @mosesadams1056
    @mosesadams1056 ปีที่แล้ว +1

    I have used your teaching to design this app myself too

  • @nahidabedani1308
    @nahidabedani1308 2 ปีที่แล้ว +1

    Hi. Thank you for your videos. I made my first app in figma and very proud.

  • @nabeela298
    @nabeela298 3 ปีที่แล้ว +7

    This was such a helpful video - you walked through it very well. Subscribing :)

  • @shahmuradmammadov1424
    @shahmuradmammadov1424 2 ปีที่แล้ว

    Thanks for perfect experiance. It was my first project, and I will share it on Linkedin. I will check your whole TH-cam videos

  • @JonathanIsmaila
    @JonathanIsmaila 3 ปีที่แล้ว +1

    You sound like a Nigerian. It would be so nice if I have you as my mentor sir.

  • @jameaze6239
    @jameaze6239 2 ปีที่แล้ว

    I learnt a whole lot in this video. Thank you. Though it's not in this video I'll like to know how fade in and out, an image in figma. To indicate a scrolling. If you've made a video on this, kindly share the link to it.

  • @ФерузаКурбанова-ж8р
    @ФерузаКурбанова-ж8р 3 ปีที่แล้ว +3

    Thanks for your lessons. It’s really helpful for me. Especially animation

  • @kinkersingh460
    @kinkersingh460 4 ปีที่แล้ว +1

    Nice Brother I'm from India and watching your videos to make examples of apps it's so useble for me thanks brother again

    • @BuildingAmazingThings
      @BuildingAmazingThings  4 ปีที่แล้ว +1

      Interesting. Thank you for stopping by.

    • @raunixverma757
      @raunixverma757 2 ปีที่แล้ว

      Hello sir we can make app for you kindly check our latest developed app video to understand th-cam.com/video/BsEEn3WVC4o/w-d-xo.html all details are available in the description

  • @LyminCoding
    @LyminCoding 2 ปีที่แล้ว +1

    After Watched this video I have an idea to make the app

  • @ogunleyejuliet4101
    @ogunleyejuliet4101 2 ปีที่แล้ว +1

    I learnt so much in just one video, thank you

  • @segunijifisayo1091
    @segunijifisayo1091 4 ปีที่แล้ว

    For those of us that are just new to mobile design, How do we activate those components to work, e.g. The time, battery status and signal strength. You are a Pro in designing. I will love to see the coding side of this design where it works with the design.

    • @BuildingAmazingThings
      @BuildingAmazingThings  4 ปีที่แล้ว +1

      Good question! I will soon work on a video to show the actual coding design.

  • @rohitgadgil5701
    @rohitgadgil5701 4 ปีที่แล้ว +1

    Your are awesome. You made it so simple to watch as well as to do stuff on the figma. Really looking forward to watch your videos and learn from you. Thank you for making videos. Keep going😎😎

  • @djkoolza1983
    @djkoolza1983 ปีที่แล้ว +1

    Thank you for this awesome tutorial

  • @adimikegetaw3553
    @adimikegetaw3553 2 ปีที่แล้ว +1

    your video lacture is very nice and good keep it up

  • @nnilu1098
    @nnilu1098 9 หลายเดือนก่อน

    Thank you for this great work.. I'll love to see the coding part of this design how it works with the design.

  • @kelechinorbert4237
    @kelechinorbert4237 11 หลายเดือนก่อน +1

    I LOVE THIS MENTOR🥰💯

  • @pritampal1
    @pritampal1 4 ปีที่แล้ว +2

    You are awesome,I repeat you are awesome. Keep posting amazing videos like this

  • @ahmadsahal6588
    @ahmadsahal6588 3 ปีที่แล้ว +1

    You are great, I have permission to save and permission to study

  • @seetharamam9422
    @seetharamam9422 3 ปีที่แล้ว +1

    Very easy expiration, thank you so much.. from india 👍

  • @jameaze6239
    @jameaze6239 2 ปีที่แล้ว

    I learnt a whole lot in this video. Thank you. Though, it's not in this video, I'll like to know how to fade in and out an image in figma to indicate scrolling. If you've made a video on this, kindly share the link to it.

  • @jakonda_
    @jakonda_ 2 ปีที่แล้ว +1

    Thank you for your video! (from Russia ♥)

  • @marianfelix1483
    @marianfelix1483 2 ปีที่แล้ว +1

    This tutorial was interesting to watch and very insightful as well, I gained a whole lot. Thank you.

  • @dullandtired8619
    @dullandtired8619 ปีที่แล้ว +2

    hell yeah m8! keep at it!

  • @ayodeleakinyemi8461
    @ayodeleakinyemi8461 3 ปีที่แล้ว

    I had no choice but to subscribe and turn on the notification!.. This is really great.. Thank you!

    • @BuildingAmazingThings
      @BuildingAmazingThings  3 ปีที่แล้ว

      Thank you very much

    • @raunixverma757
      @raunixverma757 2 ปีที่แล้ว

      Hello sir we can make app for you kindly check our latest developed app video to understand th-cam.com/video/BsEEn3WVC4o/w-d-xo.html all details are available in the description

  • @rukiee.b.ovwigho5709
    @rukiee.b.ovwigho5709 2 ปีที่แล้ว +1

    Very great tutorial from start to finish. Thanks a lot 👏👏👏

  • @Lakunleviolinist
    @Lakunleviolinist ปีที่แล้ว

    Thank you. This is a huge way to build my portfolio. i have a question sir. How do you know what page and what button, what item should be present in your design?

  • @sirazul438
    @sirazul438 3 ปีที่แล้ว +1

    Great Video man Love it,, but there should be somethings added like how to copy and other staff that you said but didn't show how to do.
    Thanks.

    • @BuildingAmazingThings
      @BuildingAmazingThings  3 ปีที่แล้ว

      Thanks for the idea!

    • @raunixverma757
      @raunixverma757 2 ปีที่แล้ว

      Hello sir we can make app for you kindly check our latest developed app video to understand th-cam.com/video/BsEEn3WVC4o/w-d-xo.html all details are available in the description

  • @abdelmoumainenessah7479
    @abdelmoumainenessah7479 3 ปีที่แล้ว +1

    you are a professional

  • @eduardafontinele8942
    @eduardafontinele8942 2 ปีที่แล้ว +1

    you are awesome! I have been inspired a lot by your tutorials. Thanks!

    • @BuildingAmazingThings
      @BuildingAmazingThings  2 ปีที่แล้ว +1

      Thank you!
      Glad to be of help!

    • @raunixverma757
      @raunixverma757 2 ปีที่แล้ว

      Hello sir we can make app for you kindly check our latest developed app video to understand th-cam.com/video/BsEEn3WVC4o/w-d-xo.html all details are available in the description

  • @galpaltin1238
    @galpaltin1238 ปีที่แล้ว +1

    You are so helpful man! we appreciate all you do !!

  • @Tresyy1579
    @Tresyy1579 3 ปีที่แล้ว +1

    hi I'm new on UX/UI design, i just wanna ask u.....how about pages of (contact us, settings....) have I designe them too with their details ????

  • @borcanucufursecuri7580
    @borcanucufursecuri7580 ปีที่แล้ว

    Very nice !! I like your content. Keep it up !!! Love from Romania!!!!

  • @kilbylungu588
    @kilbylungu588 3 ปีที่แล้ว +1

    Very educative indeed.....But tell me, are these apps monetized? and How is that attained

  • @chinonyeumeh5202
    @chinonyeumeh5202 2 ปีที่แล้ว

    Hello please can you do video about how to create drop box and click interactions on figma and also how to add things to your catalogue, complete order and check out when designing a food ordering app. Thank you 🙏

  • @ItsClarkGable
    @ItsClarkGable 4 ปีที่แล้ว +2

    This was a damn good tutorial for a newbie. From the end of the wireframe/mock-up/design how do you get it to iOS & Android????????

    • @BuildingAmazingThings
      @BuildingAmazingThings  4 ปีที่แล้ว +3

      A mobile developer will build the app with the design.

    • @ItsClarkGable
      @ItsClarkGable 4 ปีที่แล้ว

      @@BuildingAmazingThings Watching your videos and being able to do photoshop, etc I learned how to do the design. Everything after that eludes me. Lol.

  • @mosesadams1056
    @mosesadams1056 ปีที่แล้ว

    Thank you for this content. I have been learning for a while but the value I got here is massive.
    But you didnt design the payment setup, any help on that please?
    I love what you did with that button hover effect i will be sticking to that note.

  • @Demmybacus
    @Demmybacus 3 ปีที่แล้ว +2

    nice one as always this channel is a gem. I do know if you can keep sharing your figma files for view only model.

    • @BuildingAmazingThings
      @BuildingAmazingThings  3 ปีที่แล้ว

      Yes, of course

    • @raunixverma757
      @raunixverma757 2 ปีที่แล้ว

      Hello sir we can make app for you kindly check our latest developed app video to understand th-cam.com/video/BsEEn3WVC4o/w-d-xo.html all details are available in the description

  •  3 ปีที่แล้ว +1

    If you have two items in the Cart then minus button should be enabled too.

  • @mojisolaotusheso8135
    @mojisolaotusheso8135 ปีที่แล้ว

    thank you for this tutorial! it is so insightful and easy to understand 😊

  • @CarbonlancerAcademy
    @CarbonlancerAcademy ปีที่แล้ว

    Your tutorials are just the best and detailed I would Love to be mentored by you any Means to contact You ?
    Thanks

  • @maormemolis872
    @maormemolis872 3 ปีที่แล้ว +7

    Great content. I love your detailed explains and focusing. Keep with these blessed tutorials and content especially that kind where you design a web/app and explain every act.
    And question: Where can I find another structures for designs like this?

    • @BuildingAmazingThings
      @BuildingAmazingThings  3 ปีที่แล้ว

      Thanks for the nice feedback. Please can you explain to me what you mean by structures ???

    • @nancyscomedy7727
      @nancyscomedy7727 3 ปีที่แล้ว

      Please where is the web app video... would love to watch it...thanks

  • @krishankumawat8562
    @krishankumawat8562 2 ปีที่แล้ว +1

    very awesome tutorial

  • @abuabakarumaru9567
    @abuabakarumaru9567 ปีที่แล้ว +1

    excellent tutorial

  • @RitmoFullDance
    @RitmoFullDance 3 ปีที่แล้ว +1

    super! you offer great value making it simple and fun to learn and practice. thank you!

  • @StefanRaj-dj6ln
    @StefanRaj-dj6ln ปีที่แล้ว

    I done myself with your instruction thank you

  • @mugrad25
    @mugrad25 3 ปีที่แล้ว +4

    Hey I'm struggling with designing quickly and consistently. Mainly it has to do with padding and spacing between UI elements. I know figma very well but it takes forever to have it look clean. Do you have a general spacing rule that you use to make this effortless

  • @babyshalinytanabalasingam2313
    @babyshalinytanabalasingam2313 2 ปีที่แล้ว

    please sir give your images in the link because i am learning based on your vedioes

  • @uxdworld
    @uxdworld 2 ปีที่แล้ว +1

    Great design, thanks for sharing ❤️

  • @Mr_Techke
    @Mr_Techke 3 ปีที่แล้ว +1

    Bro plz tell figma to flutter ui
    plz make video

  • @Mr_Techke
    @Mr_Techke 3 ปีที่แล้ว +1

    Plz tell how to convert figma to flutter ui

  • @MeetRayka
    @MeetRayka 3 ปีที่แล้ว +1

    why don't you use auto layout, Resizing and constraints tools of figma? also why didn't you define colors and fonts in design styles?

    • @BuildingAmazingThings
      @BuildingAmazingThings  3 ปีที่แล้ว

      Good observations. I used all of that in some of my videos. Once I’m working on a full project I make sure I use all of that because it makes life easier in large projects.

    • @MeetRayka
      @MeetRayka 3 ปีที่แล้ว +1

      @@BuildingAmazingThings okay, please make a video on how to design apps using design systems in Figma

    • @BuildingAmazingThings
      @BuildingAmazingThings  3 ปีที่แล้ว

      Alright

  • @GamingPlusPro
    @GamingPlusPro 3 ปีที่แล้ว +1

    How to import it to Android Studio?

  • @rayyanhuda1693
    @rayyanhuda1693 2 ปีที่แล้ว +1

    looks great! loved the tutorial. would just love it if u could every so often, show the distance of objects from other ones. thanks.

  • @muhammadzahirbinsubakhir7995
    @muhammadzahirbinsubakhir7995 2 ปีที่แล้ว

    Can we our export and publish our project from figma to playstore for example ?

  • @diutosodo1773
    @diutosodo1773 2 ปีที่แล้ว

    Thanks man I wish you could do a full video of a real life app like with profiles login accounts e.t.c that would be helpful

    • @raunixverma757
      @raunixverma757 2 ปีที่แล้ว

      Hello sir we can make app for you kindly check our latest developed app video to understand th-cam.com/video/BsEEn3WVC4o/w-d-xo.html all details are available in the description

  • @islamicchannel6481
    @islamicchannel6481 2 ปีที่แล้ว

    Thanks for this video.... It real help alot

  • @MrAd540
    @MrAd540 3 ปีที่แล้ว +2

    amazing videos mate. just wanted to know as a ui/ux designer can i use ui design kit for my projects?

    • @BuildingAmazingThings
      @BuildingAmazingThings  3 ปีที่แล้ว +1

      Yes you can

    • @raunixverma757
      @raunixverma757 2 ปีที่แล้ว

      Hello sir we can make app for you kindly check our latest developed app video to understand th-cam.com/video/BsEEn3WVC4o/w-d-xo.html all details are available in the description

  • @prernasikka5825
    @prernasikka5825 2 ปีที่แล้ว

    Thanks for your lessons. I am learning UX thru your videos. How did u or where did u downloaded the masked food plate in your splash screen frame. I masked the food bowl image in separate figma window. Now its saved in backed file . Plz reply

  • @djkoolza1983
    @djkoolza1983 ปีที่แล้ว

    Do you have a business where you charge for UX designs ? if so please provide infos on cost. Thanks.

  • @rootsgonewild
    @rootsgonewild 2 ปีที่แล้ว

    Hey, great video, but every time I try to access the link to the ui kit the website froze. Any way this can be rectified? Thanks
    Update: Great video and was looking forward to following it step by step but unfortunately I've wasted a great amount of time trying to get to the ios mobile kit. :( I hope it gets rectified. I'll stop with this tutorial for now and watch your other videos then. Keep on sharing the good knowledge my brother!

  • @marianan1161
    @marianan1161 3 ปีที่แล้ว +1

    Can you make more pages so we will understand the Informational Architecture?

  • @sandraorokodo7108
    @sandraorokodo7108 2 ปีที่แล้ว +1

    Nice work. Can we get videos on web design?

  • @MAD4LUXTURE
    @MAD4LUXTURE หลายเดือนก่อน

    Bro can i make the same app for Android and ios both

  • @siamamary3706
    @siamamary3706 3 ปีที่แล้ว +1

    Great work, one question, how do i add more pictures(like 10) in a page?

    • @BuildingAmazingThings
      @BuildingAmazingThings  3 ปีที่แล้ว

      Kindly watch this video to know more : th-cam.com/video/GPMcf67ZGBo/w-d-xo.html

  • @jadonjasper7208
    @jadonjasper7208 2 ปีที่แล้ว

    Please sir share the link on UI kit design

  • @agadaattai
    @agadaattai 2 ปีที่แล้ว

    Please how did you get your webkit?

  • @joshdabo5151
    @joshdabo5151 ปีที่แล้ว

    Where is the link for the mobile kit?

  • @tructuu7457
    @tructuu7457 3 ปีที่แล้ว +1

    Amazing sharing man!!! Thank you so much

  • @radwa5233
    @radwa5233 4 หลายเดือนก่อน

    so helpful thank you so much

  • @libertystudio856
    @libertystudio856 2 ปีที่แล้ว

    Please i need the link 🔗 to the mobile ui kit, please help me

  • @uzoigwekelvin7674
    @uzoigwekelvin7674 ปีที่แล้ว

    You’re doing good man.

  • @beladactions
    @beladactions 3 ปีที่แล้ว

    *Great Job Mate, you won't believe I am learning a great deal despite prior experience, Love the background music, can you please attribute me the source?*

  • @abimbolataiwo2601
    @abimbolataiwo2601 ปีที่แล้ว

    You have helped me a great deal thank you so much

  • @souljahsplatz
    @souljahsplatz 2 ปีที่แล้ว

    thank you very much love this man...

  • @platov267
    @platov267 ปีที่แล้ว

    it's a nice video but you forgot to give link to download asset image

  • @colthurling
    @colthurling 4 ปีที่แล้ว +8

    Hey can we get XML files from these designs for android ?

    • @BuildingAmazingThings
      @BuildingAmazingThings  4 ปีที่แล้ว +3

      I haven't gotten to know of this yet. If I found out, sure I will let you know.

    • @hannanhub1717
      @hannanhub1717 3 ปีที่แล้ว +2

      Just copy all the images and export them to drawable folder of Android studio project....

    • @BuildingAmazingThings
      @BuildingAmazingThings  3 ปีที่แล้ว +1

      Thank Hannah for the response

  • @adedoyinmary7480
    @adedoyinmary7480 2 ปีที่แล้ว +6

    Hi, I just want to say you’re doing an amazing job… your content is very interesting and the fact that you explaining while tutoring and not just do your thing.. I’ve watched almost all your TH-cam videos and this has helped me shaped my figma journey… thank you so much, and please keep explaining while tutoring…Good work!

  • @harsh_hariya
    @harsh_hariya 4 ปีที่แล้ว +2

    Nicely done , color combination at its best

  • @passionateentrepreneur3185
    @passionateentrepreneur3185 3 ปีที่แล้ว +1

    this a very nice video

  • @ShivaShanker-l6l
    @ShivaShanker-l6l 6 หลายเดือนก่อน

    Great tutorial.. thank you so much

  • @nelsonnkana3177
    @nelsonnkana3177 3 ปีที่แล้ว +1

    Thank you very much for this wonderful video.. I have a question to ask.. Please how do I gain access to the mobile ui kit ... I mean, access to edit it

    • @BuildingAmazingThings
      @BuildingAmazingThings  3 ปีที่แล้ว

      Check on figma community. It is free

    • @raunixverma757
      @raunixverma757 2 ปีที่แล้ว

      Hello sir we can make app for you kindly check our latest developed app video to understand th-cam.com/video/BsEEn3WVC4o/w-d-xo.html all details are available in the description

  • @kathijafathimaJ
    @kathijafathimaJ 3 ปีที่แล้ว +1

    This video is very useful thanks a lot

  • @olowuabayomi565
    @olowuabayomi565 2 ปีที่แล้ว +1

    Hover effect on mobile ??

  • @ashkanbabaki9787
    @ashkanbabaki9787 2 ปีที่แล้ว

    so great. thanks a lot. so practical and useful

  • @kabirakobada9371
    @kabirakobada9371 6 หลายเดือนก่อน

    Great job.

  • @isunaslabs4733
    @isunaslabs4733 4 ปีที่แล้ว +1

    Looks awesome. I subscribed