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

Подписаться 7 тыс.

Просмотров 58 тыс.

50% 1

Welcome to our latest UI/UX design video! In this step-by-step tutorial, we'll take you through the step-by-step process of designing and prototyping a food ordering app in Figma, the powerful design tool loved by designers worldwide. The app features a user-friendly interface, intuitive navigation, and a visually appealing design that will make the ordering experience seamless and enjoyable. This app is designed to help users order their favorite foods in a simple and intuitive way.
This video is perfect for anyone interested in mobile app design or looking to enhance their Figma skills. Our tutorial is tailored to beginners and experienced designers alike, providing valuable insights into the world of app design. Don't miss out on this opportunity to learn new skills and elevate your design projects.
Figma is free to use-Sign up now! (+ free files 🎁)
👉 psxid.figma.com/dkbklpwripx3
Timestamps:
00:00 - Introduction
02:14 - Designing the home page
28:05 - Designing the first food product page
43:44 - Designing the second food product page
46:02 - Designing the third food product page
48:08 - Designing the fourth food product page
50:56 - Food customizable page design
1:09:44 - Design payment page
1:23:38 - Pop-up message design
1:28:52 - Designing the user profile page
1:43:24 - Design customer support page
1:56:04 - Splash screen design
2:04:38 - Prototyping the app
2:23:00 - Testing the prototype
2:24:02 - Create animation to floating button
2:28:52 - Create animation for burgers
2:38:44 - Create payment mothods to choose
2:44:18 - Create animation for User page picture
2:51:40 - Create animation for messages
2:57:20 - Outro
Don't forget to like and subscribe for more UI/UX design tutorials!
SUBSCRIBE to our channel: / dscodetech
More design tutorials:
⭐ Shoe App UI/UX Design in Figma: • UI/UX Design and Proto...
⭐ Cake App Design in Figma: • Cake Ordering Mobile A...
⭐ Coffee App Design in Figma: • Coffee Ordering Mobile...
FREE resource file (Food App UI Template)
bit.ly/20UITemplate
Also, please share your thoughts and questions in the comments section below. I'm happy to help!
Say hi on social:
🔵 Facebook - bit.ly/36KsK8X
🟢 Instagram - bit.ly/3xGDbXR
#figma #uiuxdesign #appdesign

Хобби

Опубликовано:

9 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 50

@DSCodetech Год назад

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

@yashas6747 Месяц назад

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

@DSCodetech 29 дней назад

Awesome, thank you!

@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 ❤️

@karika8624 5 месяцев назад

Thank you so much i learned a lot from this course

@DSCodetech 5 месяцев назад

You are welcome!

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

@saradia5989 20 дней назад

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

@DSCodetech 19 дней назад

Thank you! Will do!

@user-sj5si9tf5k Месяц назад

Bro Good Keep It up

@DSCodetech 29 дней назад

Thank you, I will

@akhilbabupalivela7503 2 месяца назад

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 2 месяца назад

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 2 месяца назад

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!

@pyotrk1uiux 27 дней назад

Cool

@DSCodetech 26 дней назад

Thanks!

@lighted1ts 4 месяца назад

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

@DSCodetech 4 месяца назад

Yes soon

@lighted1ts 4 месяца назад

OK bro we will wait @@DSCodetech

@mahmudulhassankhan7383 5 месяцев назад

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 5 месяцев назад

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

@nikhileshwaradam2097 7 месяцев назад

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 3 месяца назад

Sure, we'll try

@cookiedookie9658 23 дня назад

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

@peterfamuyiwa622 17 дней назад

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

@DSCodetech 15 дней назад

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

@AMParvez2254 Месяц назад

How to export full project pls tell me.

@DSCodetech 29 дней назад

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

@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

@michabednarski5555 14 дней назад

Where did you get the icon set from?

@DSCodetech 11 дней назад

From our free icon pack

@michabednarski5555 10 дней назад

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 !