Food Ordering Mobile App Design in Figma | UI/UX (Wireframe, Prototype) Figma tutorial

[@DSCodetech]

Download the source file: bit.ly/3W9IbjO What would you think about the design? If you like rate my work :)

[@akhilbabupalivela7503]

I Don't know if i am asking right or wrong i started learning UI/Ux at the last year December now i am know little bit to ask this one i want to add in my portfolio like this type of App designing but i don't know about case studies and i literally no idea could you please help me out

[@Nikhi_lesh]

Look at dribble or behance You can get inspirationa form them and know about the case studies Basically case study varies for different projects Example:- Show your screens like a poster Tell about typography you used Show them the colour pallets you used Yeah like this

[@DSCodetech]

Start with a simple project, get inspiration, document your process, and highlight how you solved problems. Keep up the good work on your UI/UX journey!

[@nixonmgya2952]

great work, but you cant assign a hovering effect on a mobile phone, it works well on a pc due to the cursor but on mobile its all about tapping

[@DSCodetech]

Correct, we use the hovering effect in prototypes instead of clicks. A hover indicates a tap on a mobile phone

[@OlapeseKehinde]

how do i edit with the pen tool and how do i remove the dot

[@dailybeauty2408]

I'm a big fan of your channel. And I have learned lot of things about ui ux and figma. This tutorial is life saving for me. By the way, I wanna mention the design is unique and incredible ❤

[@DSCodetech]

thank for your feedback ❤

[@DawoodArifKhan-y3x]

I think this project should in auto layout. If Im not wrong

[@DSCodetech]

Correct, you can use auto layout if you need

[@elijahabodunrin1957]

Fantastic tutorial video and very helpful. But please next time, can we have voice overs. I personally feel more comfortable following up with a tutorial when i can hear audio instructions rather than trying to follow up with controls and clicks

[@DSCodetech]

Ok next time

[@TanyaParker-h5v]

Lewis Timothy Walker Jose Allen Elizabeth

[@eleazarkrampah5220]

great tutorials but please can we have a voice over explaining things to us next time..... understanding every single move....

[@DSCodetech]

Thanks, we'll try

[@NdnxdidhhNndhxydh]

Hall Gary Hernandez Michelle Thompson Barbara

[@sxnjxy5902]

Is this a proper way of design? What about autolayout?

[@DSCodetech]

We didn't use Autolayout in this design

[@nikhileshwaradam2097]

Hey, thanks for this video. Can you please let me know about how to export the whole project from figma in free of cost to use it into Android studio as I'm a Java Android developer. I tried many plugin to export but I didn't get what I want. Mostly I tried plugin named 'Export kit' but it didn't export whole project in single click it ask me to buy a subscription to export unlimited files, but I want it in free of cost. Is there any other way to use figma whole project into a Android studio. If possible please make a video on it

[@DSCodetech]

Sure, we'll try

[@Mics1on1]

Good day Whats the license on this project? Like what are our limitations can I create a similar app design to yours?

[@DSCodetech]

Yes, you can use this design for any educational purposes

[@fullermarshman5548]

Gonzalez Brian Jackson Helen Johnson Robert

[@KristaWalters-p2x]

Miller Dorothy Martinez Gary Young Betty

[@Gorilla_brown786]

Good video keep uploading more but what was the use of making the profile pic prototype hover animation in 2:47:32 ? This is a mobile design right?

[@DSCodetech]

Correct, At this point we can get hover as On click states on the profile pic

[@muhammadhussain7239]

kindly guide me how to make the border of the page

[@DSCodetech]

Use the Stroke feature on the right sidebar

[@averyhoward814]

Martin Dorothy White Barbara Thomas Melissa

[@prabinkarki5921]

Plz give me the this portfolio use pick

[@karika8624]

Thank you so much i learned a lot from this course

[@DSCodetech]

You are welcome!

[@georgevancese5584]

Brown Jeffrey Walker Nancy Martin Mark

[@educationclub2246]

Your video was a great resource for anyone looking to improve their ui ux design. Your trips and tricks were spot on and easy to understand

[@DSCodetech]

Thanks for your amazing words ❤️

[@heidardotdev]

wonderful work please continue we will support you with positive comment and we'll sub you

[@DSCodetech]

Thank you!

[@LindaLibby-m7n]

Davis Sharon Robinson Dorothy Smith Carol

[@lighted1ts]

thank you very much.I learn a lot things.Can you teach real working this website

[@DSCodetech]

Yes soon

[@lighted1ts]

OK bro we will wait @@DSCodetech

[@mahmudulhassankhan7383]

Very helpful, here quantity and price are fixed if want single or more pcs then how will be changned, again log in name, and details is fixed with one name, here how customer will do with own information, pls help to know

[@DSCodetech]

Thanks! this is just a UI/UX design if we wanna make it functioning we have to develop the app

[@yashas6747]

Awesome tutorial man, this is my first time in your channel and first video , and u earned a sub. Keep it man

[@DSCodetech]

Awesome, thank you!

[@ramatismail2517]

Hello. I don't understand how to get icons for my designs. I use pictures from google so I cant find a way to color them like you do . Please help. Thank you

[@DSCodetech]

You can get free icons on websites by just searching on Google

[@SvjVdmdmm-y6e]

Moore Brian Robinson Angela Lewis Karen

[@ShivamSingh.55]

how to open this fig file

[@DSCodetech]

You can import fig file to Figma

[@JEALANI313]

sorry for bothering could you please tell me from where you took vectors like almost at 7:00 you used setting or stars for rating vector button .. please

[@DSCodetech]

You can get icons from our free Figma file

[@emmanuelneaslon]

Taylor Eric White Gary Garcia Daniel

[@Had-xm7dk89]

Sir ap ne font kon sa use kia ha

[@DSCodetech]

Inter and Roboto

[@DMA-b7d]

free version used ?

[@DSCodetech]

Yep

[@michabednarski5555]

How to make heart red on click to add to favorites. I use overlay and another page but it doesnt work

[@DSCodetech]

Add red color to the Fill on the right side bar or do the same as you see in the video

[@kumi464]

Is figma premium required?

[@DSCodetech]

No, just the Figma free plan is enough

[@kumi464]

@@DSCodetech thanks

[@MrEnsan01]

43:44 Great job, but I think it would be more effective if the CTA button were in red rather than black. as the red color is associated with excitement and urgency, which can encourage consumers to make a purchase decisions

[@DSCodetech]

Great idea!

[@AMParvez2254]

How to export full project pls tell me.

[@DSCodetech]

You can export designs in export tab, on the righ bottom side of the corner

[@kaan54800]

I am sooooo happy to discovered this KZbin Channel. The tutorials are great. Is there any plan of making a fancy UI for a social media/challenge app?

[@DSCodetech]

Working on it!

[@premtabassum4208]

Hello, I have created a food ordering design based on this video . I think that is my 2nd project .. The thing is I wanted to put this on behance.. can I ?? If you don't mind. I change as much things as possible. Even though you can still see the similarity because it's your design. that's why I want to take your permission. May I?

[@DSCodetech]

You can use this design for educational purposes

[@premtabassum4208]

@@DSCodetech :') thank you for the reply.. I will not put it on behance.

[@siddharthpandey8516]

your designs are excellent. would recommend explaining what you're doing as well, or a separate course on how you create these elements as that will help newbies. sometimes it's hard to hard to follow what is happening

[@DSCodetech]

Great suggestion!

[@ziyaandrn5986]

Hello! I love the work you do. I want to ask a question, how can I make a high-quality screen recording of the prototype I designed?

[@DSCodetech]

It's not possible in Figma but instead you can use screen recording app

[@ziyaandrn5986]

@@DSCodetech thanks and which app you use sir?

[@mobiletalk3949]

Pls give voice of video

[@WowCraftedEng]

[@DSCodetech]

Good idea!

[@subhasdebnath307]

I just looking your work. So neat & clean, very fresh design. Really very nice app design boss. Best of luck

[@DSCodetech]

Thanks and welcome

[@naphthalene37]

Hi, nice job, well done. How did you insert the icons

[@DSCodetech]

Thank you! You can use icons from our free figma file

[@pine-h4x]

unbelievable

[@DSCodetech]

It is

[@ramatismail2517]

how did you put the elipse under the burger image? whwnever i try to do it it just pushes the elipse to the back of the image. i don't understand

[@DSCodetech]

Instead use layers bar on the left side of the screen

[@ramatismail2517]

@@DSCodetech i got my image from the internet, so when i put the elipse under the image it just disappears behind the image as if i put 'send backwards' so I'm really confused

[@DSCodetech]

You can use the layers panel to adjust the position of the eclipse

[@fahadfahadalghareeb7088]

Ok brother, how do I program the project?

[@DSCodetech]

you can use app development tool

[@hon11-k7c]

Hello , can you tell how the close overlay worked

[@DSCodetech]

Thanks for asking! At this point, It automatically closes the overlay and brings back to the original page.

[@cookiedookie9658]

How did u add those margin lines to the frame? Like u just dragged them from somewhere... How?

[@peterfamuyiwa622]

Click on the figma drop down arrow go to view, then rules the you'll see the rulers beside you layers box

[@DSCodetech]

You can enable rulers or use layout grid option in the right side of the screen

[@agungpurnama7272]

disimpan

[@attiyeemmanuel9310]

How can we get the images used ??

[@DSCodetech]

You can get them on our free file

[@thinkcricket123]

what is this software

[@DSCodetech]

Figma

[@Aslanalali]

6:30 how did you blend these two together Pls thank you so much

[@DSCodetech]

You can Group them, select both and press Cmd+G

[@Aslanalali]

@@DSCodetech yr the best 🤗💖💖

[@ShivamSingh.55]

Login and signup Page not available

[@DSCodetech]

Yes, only main and important pages are available

[@AnaClara-kn9og]

Hello! Can I use it in my portfolio?

[@DSCodetech]

you can use it for education purposes

[@AnaClara-kn9og]

@@DSCodetech Oh ok! Thanks!

[@navinrajmovielover4112]

How to get image plz😢

[@DSCodetech]

Get our free files, check the description

[@whoshyam]

provide figma design link

[@DSCodetech]

Check the description

[@kristiandolo]

and how do you import it inside of Framer to make it functional?

[@DSCodetech]

You can do it using Figma to HTML with Framer plugin (Figma plugin)

[@kristiandolo]

@@DSCodetech yes i know that, but if its a food app, then how does it calculate what you put in bag and everything

[@ahmadbilal-k4c]

Bro Good Keep It up

[@DSCodetech]

Thank you, I will

[@saradia5989]

Very helpful. Thank you and keep on :'))))

[@DSCodetech]

Thank you! Will do!

[@michabednarski5555]

Where did you get the icon set from?

[@DSCodetech]

From our free icon pack

[@michabednarski5555]

Thank you! And I'd like to say thank you for your hard work. I've learned a lot form your tutorials. Your designs are outstanding and visually appealing !

[@DSCodetech]

Thank you!

[@ybrightr]

ดีจังครับ :D

[@DSCodetech]

Thanks, we're glad it could help :)

[@ShivangiMishra-qb1ez]

great work sir

[@DSCodetech]

Thanks

[@pixelcraftui]

Cool

[@DSCodetech]

Thanks!

[@DanGrant-t3f]

Amazing

[@DSCodetech]

Thank you! Cheers!

[@erichuanto4883]

bellisima

[@DSCodetech]

Thank you!

[@Natureplace740]

KZbin clone ui/ux design create

[@DSCodetech]

Coming soon

[@Natureplace740]

@@DSCodetech same KZbin alternative app possible

[@khanmeraj15]

can you give us the your final figma ui design , so we can see and create the app by our self

[@DSCodetech]

Of course you can get the free files, check description

[@M.MantraYT]

Superb ❤️

[@DSCodetech]

Thanks 🤗