Design and Prototype a Delivery App for iOS in Figma

Design a food delivery app UI with Figma and Mobbin. Sponsored by https://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
➡https://www.figma.com/community/file/...
- Apple Design Resources – iOS 17 and iPadOS 17:
➡ https://www.figma.com/community/file/...
- Explore Mobbin:
➡ https://mobbin.com/browse/ios/flows
- Discount of 20%
➡ https://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 YouTube
➡    / @designcodeteam  

🚀 Follow this course on Design+Code's website
➡ https://designcode.io/mobbin-design

#figma #appdesign #uidesign