Design and Prototype a Delivery App for iOS in Figma

Design a food delivery app UI with Figma and Mobbin. Sponsored by mobbin.com
Learn to create a food delivery app UI from scratch and build a basic prototype. Discover simple prototyping techniques with Lottie animations, smart animate, and more, while exploring UX research and design insights with Mobbin.
Resources and Community Links:
- My Figma File
➡www.figma.com/community/file/...
- Apple Design Resources - iOS 17 and iPadOS 17:
➡ www.figma.com/community/file/...
- Explore Mobbin:
➡ mobbin.com/browse/ios/flows
- Discount of 20%
➡ mobbin.com/?referrer_workspac...
What You'll Learn:
- Using Mobbin for UX Research: Learn how to explore and study design flows to find inspiration.
- Designing a Food Delivery App: Start from scratch and learn the step-by-step process to design a food delivery app using Figma. Understand the principles of interface design specific to iOS platforms.
- Advanced Figma Techniques: Dive deep into Figma’s capabilities including auto layout and gradients to enhance visual aesthetics. Learn how to effectively use styles and plugins to streamline your design process and increase productivity.
- Prototyping and Animation: Get hands-on experience with basic prototype animations using Lottie’s animations. Explore Figma’s smart animate features for smooth transitions. Implement advanced prototyping techniques such as creating scrolling and sticky scrolls, and utilizing overlays to demonstrate app functionality.
Follow me
➡ / sourasith.design
➡ / titepommee
➡ / sourasith.design
We’re so glad you’ve chosen to learn with us. We’re here to support you every step of the way, so don’t hesitate to reach out if you need anything. We can’t wait to see what you’ll create!
00:00 Intro
00:39 UX Patterns
1:16 Mobbin
1:32 Design Flows
2:04 Sponsoring
2:50 Resources
3:00 Start Designing
5:18 Fonts
6:06 3D icons Figma Community
7:11 Cards
8:31 Button
10:39 Navigation Bar
12:30 Color Styles
13:17 Corner Radius
14:10 Searchfield
16:36 Freepik Plugin
19:09 Beautiful Shadow Plugin
20:56 Content Reel Plugin
21:49 Logo Creator Plugin
23:00 Gradients
27:24 RemoveBG Plugin
29:58 Lottie Animation
31:30 Smart Animate
33:20 Create Lottie
34:03 Interactive Components
35:13 Scrolling
36:15 Sticky Scroll
38:30 Overlay
🪄 Join this channel to watch the entire course on UA-cam
➡ / @designcodeteam
🚀 Follow this course on Design+Code's website
➡ designcode.io/mobbin-design
#figma #appdesign #uidesign

[@briansloops4724]

Fantastic tutorial! I love how you broke everything down to get it fully setup and designed and the process as to why you did everything to make this great design. Awesome job! 💯

[@DesignCodeTeam]

Thank you so much for the positive feedback! I’m glad you found the tutorial helpful. Let me know if there’s anything specific you’d like to see next!

[@moooodmusik4906]

Great work, we appreciate these free videos !

[@DesignCodeTeam]

Glad you like them!

[@CreativeDesignTools]

Thanks for your video, very good for the community

[@DesignCodeTeam]

Glad you enjoyed it!

[@zorinabedford1340]

I’m like.. BRAND new to figma and ux as a whole . I’m so grateful to people like you who make videos to help people like me ❤❤❤ thank you

[@DesignCodeTeam]

Thank you so much! I'm glad to help :)

[@ALPHAxphenix]

Thanks for sharing this AWESOME 😎 work

[@DesignCodeTeam]

Thanks for watching!

[@olivierturpinlavallee6153]

Thank you so much 🤗❤

[@DesignCodeTeam]

You’re welcome 😊

[@MACH_SDQ]

Very well explain !!!!

[@DesignCodeTeam]

Glad it was helpful!

[@KallThunder]

Perfeição, é a unica palavra que tenho a dizer...Mega parabéns.

[@jamesmiths72]

Que belleza de diseños. Gracias.

[@macbook_adventurer]

This design makes me hungry !😁

[@uifry]

Incredible :)

[@DesignCodeTeam]

Thanks :)

[@Thereal_samuel6]

It’s nice

[@DesignCodeTeam]

Thanks!

[@ShampooAki]

Very nice intro!😍

[@DesignCodeTeam]

Thanks 😋

[@rakibulislamsohan]

How do you make measurements of round corner opacity ,size,spacing etc.?

[@New_bie_026]

Hi Mam,
I was looking for some academic projects, so any suggestions will be really helpful.
Thanks in advance.

[@benwilliams7107]

Great! How did you make the thumbnail with the phones in another orientation?

[@prodhekomi]

Now this looks good on the iPhone screen you selected. But do I really have to copy, paste and adapt every page to the different screens or is there an easier way to align everything, no matter the device (on mobile)?

[@maranton7173]

Excellent work, I want more videos like this, by the way, what music is in the video?

[@DesignCodeTeam]

Thank you so much for your feedback! I'm glad you enjoyed the video and I'll definitely keep your request in mind for future content. The music in the video is "Our Summer Matrika" by Upbeat.

[@chochothin4195]

how to add layer blur in effect ?

[@matisscukurs5535]

I dont have the "mode" toggle to switch between dark and white

[@gamingwithsachinsingh]

how can i make this in jetpack anyone gimme suggestions ...

[@StoryJokes.]

How to launch the app or website ???

[@Mirzix7]

I've gotta to be serious after this

[@DesignCodeTeam]

Great to hear that! Good luck with your work.

[@heidar_dev]

could you please tell me some info about your stunning monitor
my mens the name and the model

[@sudipchaugule9552]

Hello, I have one question, Can you please tell me how you get all the font styles from? Is it predefined by you or it it from ios style guides.

[@DesignCodeTeam]

I use the text style from Apple. You can add their library 'Apple Design Resources' with a paid Figma account, or you have to go directly on their file. The font is SF Pro.

[@sudipchaugule9552]

@@DesignCodeTeam Ur great...! Thank you so much

[@AbhishekHaverikar]

Hi everyone , can anyone assist me as i am unable to make categories and cards scroll horizontal ,which are designed horizontally in page . Thank you.

[@tolivich]

You can reduce the background music

[@feelcollins4358]

hi, is there a similar design resource for android? i'm referring to the apple design resource

[@DesignCodeTeam]

Yes, there is a similar design resource for Android called the Material Design Kit. You can find it in the Figma community. Also, you can visit Mobbin and check out the Android section to see examples of how Android apps are designed. This will help you :)

[@saman6199]

💪

[@DesignCodeTeam]

Thanks!

[@chukwuebukanwagwu1771]

I didn't get the name of the plugin well.
Is it loverfies

[@DesignCodeTeam]

It's LottieFiles :)

[@chukwuebukanwagwu1771]

Is it loverfiles

[@chukwuebukanwagwu1771]

Thanks you

[@metinkucuk734]

lottie files

[@francisismaila5850]

Sharp new design 🥹🥹🥹

[@DesignCodeTeam]

Glad you like it!