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 TH-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!

[@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 :)

[@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!

[@ALPHAxphenix]

Thanks for sharing this AWESOME 😎 work

[@DesignCodeTeam]

Thanks for watching!

[@KallThunder]

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

[@olivierturpinlavallee6153]

Thank you so much 🤗❤

[@DesignCodeTeam]

You’re welcome 😊

[@MACH_SDQ]

Very well explain !!!!

[@DesignCodeTeam]

Glad it was helpful!

[@macbook_adventurer]

This design makes me hungry !😁

[@uifry]

Incredible :)

[@DesignCodeTeam]

Thanks :)

[@jamesmiths72]

Que belleza de diseños. Gracias.

[@ShampooAki]

Very nice intro!😍

[@DesignCodeTeam]

Thanks 😋

[@Thereal_samuel6]

It’s nice

[@DesignCodeTeam]

Thanks!

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

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

[@Mirzix7]

I've gotta to be serious after this

[@DesignCodeTeam]

Great to hear that! Good luck with your work.

[@tolivich]

You can reduce the background music

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

[@gamingwithsachinsingh]

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

[@StoryJokes.]

How to launch the app or website ???

[@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!