Food Ordering Mobile App Design in Figma (2020)

Поділитися
Вставка

КОМЕНТАРІ • 526

  • @vidyab4400
    @vidyab4400 2 роки тому +8

    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 :>

  • @olayinkajomiloju7027
    @olayinkajomiloju7027 Рік тому +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

  • @xuanhoaaudiobook5275
    @xuanhoaaudiobook5275 3 роки тому +6

    Thank you so much! Currently I haven't found a better channel to learn UI design.

  • @blessingsamuel1029
    @blessingsamuel1029 3 роки тому +2

    I'm in love with this guy.. you are making me getting my youtube channel

  • @dullandtired8619
    @dullandtired8619 2 роки тому +2

    hell yeah m8! keep at it!

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

    • @C_N_Digital
      @C_N_Digital 2 роки тому +1

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

  • @abdulazizsuraj8869
    @abdulazizsuraj8869 2 роки тому +4

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

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

    I really appreciate this step by step guide. The way you explained the reason for each step is really educative. Thanks and God bless

  • @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 UA-cam videos and this has helped me shaped my figma journey… thank you so much, and please keep explaining while tutoring…Good work!

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

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

  • @comfortigboko9856
    @comfortigboko9856 2 роки тому +1

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

  • @codingwithrudy
    @codingwithrudy 3 роки тому +2

    0:30 Ahh ufff I am super excited 😂😂😂... Great video!

  • @zenfitteam7622
    @zenfitteam7622 3 роки тому +1

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

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

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

    I have used your teaching to design this app myself too

  • @shahmuradmammadov1424
    @shahmuradmammadov1424 2 роки тому

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

  • @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 3 роки тому

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

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

  • @nahidabedani1308
    @nahidabedani1308 3 роки тому +1

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

  • @adedoyinmary7480
    @adedoyinmary7480 2 роки тому +1

    Your works are so explanatory… I’m glad iii found your page🥺🥺🥺

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

    Thank you, boss. Please what are the things one must know before he can confidently says he is a UI/UX designer?

  • @StefanRaj-dj6ln
    @StefanRaj-dj6ln 2 роки тому

    I done myself with your instruction thank you

  • @nkemjohn4837
    @nkemjohn4837 3 роки тому +9

    Cos I need a tutor... You explain this toturial with ease... No stress, am. Sure u will be a great mentor.

    • @BuildingAmazingThings
      @BuildingAmazingThings  3 роки тому

      Follow me up on Instagram @hyginusukeh

    • @raunixverma757
      @raunixverma757 3 роки тому

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

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

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

  • @djkoolza1983
    @djkoolza1983 2 роки тому +1

    Thank you for this awesome tutorial

  • @adimikegetaw3553
    @adimikegetaw3553 3 роки тому +1

    your video lacture is very nice and good keep it up

  • @akhizaib
    @akhizaib 3 роки тому +2

    Awesome.
    Thanks for the kit

  • @LauraLopez-we4mg
    @LauraLopez-we4mg 2 роки тому

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

  • @techtalks003
    @techtalks003 3 роки тому +1

    Please how can i get the Mobile UI Kit for my works? And I don't use a mac, but windows

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

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

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

  • @ogunleyejuliet4101
    @ogunleyejuliet4101 2 роки тому +1

    I learnt so much in just one video, thank you

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

    I LOVE THIS MENTOR🥰💯

  • @LyminCoding
    @LyminCoding 2 роки тому +1

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

  • @elgato_3
    @elgato_3 2 роки тому +1

    Nice work thank u so much grabbed many things!

  • @helmi8962
    @helmi8962 4 роки тому +1

    sir, in 18:50, how do you change the icon in the component? how to replace it? I've tried but seems cannot do same as you

  • @seetharamam9422
    @seetharamam9422 3 роки тому +1

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

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

  • @ayanbanerjee5508
    @ayanbanerjee5508 3 роки тому +1

    please make more like this this is very helpful for us

    • @BuildingAmazingThings
      @BuildingAmazingThings  3 роки тому

      Sure there'll be more!
      You could make sure your notifications are turned on.

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

  • @chinonyeumeh5202
    @chinonyeumeh5202 2 роки тому +1

    Thanks for this video. I owe you a lot as a designer you have really helped my career. Please i have a request 🙏

  • @OMG_its_Trivium
    @OMG_its_Trivium 2 роки тому

    Great step by step guide, I'm not even half way and there's so much value in this video. Thank you so much for putting it together.

  • @RJRavi
    @RJRavi 2 роки тому

    Very much informative. Subscribing you with bell icon right away brother. Thank you so much and big hug to you. Love from India.

  • @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 3 роки тому

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

  • @ahmadsahal6588
    @ahmadsahal6588 3 роки тому +1

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

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

  • @theinva5741
    @theinva5741 3 роки тому +1

    Very useful indeed... can someone export it and put it in your device??

    • @BuildingAmazingThings
      @BuildingAmazingThings  3 роки тому

      I don't think I get you right. You do not export the application. You code it.

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

  • @eduardafontinele8942
    @eduardafontinele8942 3 роки тому +1

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

    • @BuildingAmazingThings
      @BuildingAmazingThings  3 роки тому +1

      Thank you!
      Glad to be of help!

    • @raunixverma757
      @raunixverma757 3 роки тому

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

  • @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 3 роки тому

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

  • @ayoolaidris7262
    @ayoolaidris7262 3 роки тому +1

    Please drop the figma link for the design like you did in the TODO design.

    • @BuildingAmazingThings
      @BuildingAmazingThings  3 роки тому

      Alright

    • @ayoolaidris7262
      @ayoolaidris7262 3 роки тому

      @@BuildingAmazingThings Hello, the reason I asked for the figma link is to compare my alignments and sizes before sharing it. I await it. Thank you

  • @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 3 роки тому

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

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

    04:05 - Splash Screen (To enter the app)
    09:00 - Menu

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

  • @abdelmoumainenessah7479
    @abdelmoumainenessah7479 3 роки тому +1

    you are a professional

  • @AmrQayed
    @AmrQayed 3 роки тому +2

    Thank you very much
    Btw, do you get job offers from your youtube channel, because im thinking to make you tube channel to get a job offer

    • @BuildingAmazingThings
      @BuildingAmazingThings  3 роки тому +1

      It's better you do a portfolio

    • @AmrQayed
      @AmrQayed 3 роки тому

      @@BuildingAmazingThingsthanks for reply i see , because i thought channel will help me as networking method

  • @nabeela298
    @nabeela298 4 роки тому +7

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

  • @tructuu7457
    @tructuu7457 3 роки тому +1

    Amazing sharing man!!! Thank you so much

  • @olayiwoladeborah7931
    @olayiwoladeborah7931 3 роки тому +1

    Thank you for this amazing work. I recreated this and voilaaaa

  • @pritampal1
    @pritampal1 4 роки тому +2

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

  • @JonathanIsmaila
    @JonathanIsmaila 3 роки тому +1

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

  • @ФерузаКурбанова-ж8р

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

  • @galpaltin1238
    @galpaltin1238 2 роки тому +1

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

  • @jakonda_
    @jakonda_ 2 роки тому +1

    Thank you for your video! (from Russia ♥)

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

  • @uxdworld
    @uxdworld 2 роки тому +1

    Great design, thanks for sharing ❤️

  • @26ilhaanfodkar47
    @26ilhaanfodkar47 3 роки тому +1

    Great going loved how you use grid great help

  • @immadidivyasai3729
    @immadidivyasai3729 3 роки тому +1

    i've been going through your videos... So much thanks!!!! for this figma taking an example, and small doubt .. where can i see ui webkits, i mean anything i need to install for webkits? for my figma mobile app practise.

    • @BuildingAmazingThings
      @BuildingAmazingThings  3 роки тому

      Check on figma communities. Thanks for the feedback.

    • @immadidivyasai3729
      @immadidivyasai3729 3 роки тому

      @@BuildingAmazingThings yeah thank you!!

    • @raunixverma757
      @raunixverma757 3 роки тому

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

  • @artofamine9223
    @artofamine9223 4 роки тому +1

    Sir excuse me how did you get that iphone bar cause i chek that file and i didnt get it .
    Please answear me this is my first tutorial
    Thank you

    • @BuildingAmazingThings
      @BuildingAmazingThings  4 роки тому

      Figma community

    • @Noma909
      @Noma909 4 роки тому

      You have to save the file as a draft in the app.
      - There is a dropdown menu in the title of the mobile ui kit
      - Duplicate
      Then you can copy and paste with the icons. You will know the menu tabs on the right:
      design prototype layers
      if it says:
      inspect / export
      you using the masterfile [view only] will not be able to edit.

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

    Thanks for your time it was just awesome 😊

  • @bananachips5748
    @bananachips5748 3 роки тому +1

    hey, when i add plungins, it shows their name on the top of the icon but yours dont. how do i fix that?

    • @BuildingAmazingThings
      @BuildingAmazingThings  3 роки тому

      If I get you right.. copy the icon into a frame and their name at the top will go off.

  • @krishilive3443
    @krishilive3443 3 роки тому +1

    hi i just want to know how to do counter animation?

  • @marianfelix1483
    @marianfelix1483 2 роки тому +1

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

  • @islamicchannel6481
    @islamicchannel6481 3 роки тому

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

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

    This was a great tutorial to follow along and complete. Thank you!!

  • @maskman4821
    @maskman4821 4 роки тому +6

    I love this tutorial, pretty awesome !!!

    • @BuildingAmazingThings
      @BuildingAmazingThings  4 роки тому

      Thanks

    • @raunixverma757
      @raunixverma757 3 роки тому

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

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

  • @edipkhalilov3148
    @edipkhalilov3148 4 роки тому +1

    Awesome! Waiting for more video)

  • @Kayleeeeeeeeeeeeeeeeeeeee
    @Kayleeeeeeeeeeeeeeeeeeeee 2 роки тому

    Thank you so much for your video! It's awesome, I haved learnt a lot!!!

  •  4 роки тому +1

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

  • @krishankumawat8562
    @krishankumawat8562 3 роки тому +1

    very awesome tutorial

  • @SrpYlcnOzky
    @SrpYlcnOzky 3 роки тому +1

    Thank you so much, loves from Turkey :)

  • @MrVivorico
    @MrVivorico 2 роки тому

    how to show the iphone mockup directly when you press the play button?

  • @kathijafathimaJ
    @kathijafathimaJ 3 роки тому +1

    This video is very useful thanks a lot

  • @rajeshrajput7257
    @rajeshrajput7257 3 роки тому +1

    Thanks Sir It's a good video to learn.

  • @ShivaShanker-l6l
    @ShivaShanker-l6l 8 місяців тому

    Great tutorial.. thank you so much

  • @maisasaid167
    @maisasaid167 2 роки тому

    Thanks allot for amazing explaination..but from where u were getting the button and icon? u didn't say!

  • @omoladebusari4918
    @omoladebusari4918 3 роки тому +1

    Interesting. You made it look fun and easy

    • @BuildingAmazingThings
      @BuildingAmazingThings  3 роки тому

      Thanks Bro!😊

    • @omoladebusari4918
      @omoladebusari4918 3 роки тому

      @@BuildingAmazingThings sis actually

    • @raunixverma757
      @raunixverma757 3 роки тому

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

  • @cleavonamidiagbe527
    @cleavonamidiagbe527 4 роки тому +1

    Please where can I download mockups for my UI designs

  • @muhammadzahirbinsubakhir7995
    @muhammadzahirbinsubakhir7995 2 роки тому

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

  • @tolulopetoluwade4116
    @tolulopetoluwade4116 2 роки тому +1

    You are very good, Thank you so much for posting such a value adding tutorial! I was following along every step until I got to the prototype, finished it. When i clicked on the preview button, it keeps displaying only the top part of my screens as if it is Zoomed in. What can I do please? Thank you

    • @BuildingAmazingThings
      @BuildingAmazingThings  2 роки тому +2

      Tolu... Make sure everything design you have is in a frame. I hope this helps

  • @rukiee.b.ovwigho5709
    @rukiee.b.ovwigho5709 2 роки тому +1

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

  • @rashmiabewardana7565
    @rashmiabewardana7565 3 роки тому +1

    Very useful could you please share this UI Designs

  • @rameshpilla9771
    @rameshpilla9771 4 роки тому +1

    Could you please explain me , how this app works with dynamic data and api

    • @BuildingAmazingThings
      @BuildingAmazingThings  3 роки тому

      This time you have to become a developer. But there are certain products out there that allows you to connect your figma design to a dynamic data. I plan on creating a walk through video on that.

  • @harsh_hariya
    @harsh_hariya 4 роки тому +2

    Nicely done , color combination at its best

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

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

    You have helped me a great deal thank you so much

  • @splackchannel7270
    @splackchannel7270 2 роки тому

    i really love your work and you have really helped me a lot, Thank you so much

  • @kilbylungu588
    @kilbylungu588 3 роки тому +1

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