Design Delivery App in Figma with Prototype | Figma Tutorial for Beginners | UI Practice in Hindi
HTML-код
- Опубликовано: 29 июл 2024
- Design Delivery App in Figma with Prototype | Figma Tutorial for Beginners | UI Practice in Hindi
Learn how to design and prototype an interactive mobile app using Figma! This tutorial will cover UI best practices and is perfect for beginners looking to improve their Figma skills. Don't miss out on this valuable design tool for creating stunning mobile apps!
Speed Up Your Design Process: Food Delivery App Design in Figma Hindi Tutorial
Quick and Easy Figma Hacks for Speeding Up Your Food Delivery App Design
Figma Design Tutorial: Streamlining the UI Design Process for Food Delivery Apps
How to Design Food Delivery App in Figma, UI best Practice, Figma for Beginners, in Hindi and Urdu
How to Design Mobile App in Figma with Prototype | UI Best Practice, Complete Course Step by Step
Create an UberEats-style Layout in Figma | Master UI Design | Hindi
Design Food Delivery App in Figma with Prototype | Figma Tutorial for Beginners | UI Design Practice
0:00 Animation
0:05 Intro
0:55 Flows Setting up screen size
4:45 Making Logo
7:17 Duplicating iOS 14 UI Kit
12:42 Making Button With Variants
21:18 Setting Button with text
24:05 Making Variants of Logo
25:46 Placing Logo in Frame/Screen
26:02 Downloading images
26:52 Removing background
27:16 Images Placed in Screen
28:50 Making Social Buttons
36:06 Creating back button
37:25 Creating continue button
38:26 Grid System
40:32 button based on Size
41:13 Making Dropdown
55:16 Compiling screens
59:09 Creating Dropdown
1:07:15 Adding Drop Shadow
1:08:15 Reviewing Element
1:09:06 Creating Heading
1:11:43 Creating Tab Buttons
1:17:30 Making Banners
1:28:50 Creating the Main banner
1:34:36 Footer Part, Tab Bar
1:44:42 Compiling all screens
1:48:13 Prototyping
Further more, I used UberEats app as reference and practice.
#figma #mobileappdesign #figmatutorial #figmaforbeginners #interactive #completecourse
Useful videos for you, all are in Hindi and Urdu Language:
Animated button similar to a RUclips subscribe button 2024 | Figma tutorial for beginners in hindi
• Animated button simila...
How to create Interactive Scrolling Time Picker with prototype in Figma - in Hindi & Urdu-Figma Tips
• How to create Interact...
How to create Interactive Button with Variants in Figma | Figma tutorial for beginners 2024 - Hindi
• Figma Variant Buttons:...
How to create interactive google map in Figma | Figma tutorial | in Hindi and Urdu
• Figma Techniques: Desi...
How to create blinking circle animation for Google map in Figma | Figma Tutorial | in Hindi and Urdu
• Figma Pro Tips for Cre...
How to Create Interactive Rotated Text Circle and Loader animation in Figma | Figma tutorial (Hindi)
• The Ultimate Guide to ...
How to Select Best Clients in 99Designs.com - in Hindi
• How to Select Best Cli...
Playlist:
Design Tips
• Design Tips
Figma Tips and Tutorials:
• Figma Tips and Tutorials
Join my facebook group here:
/ 124040301475788
Want to learn complete Product Designing Course in Hindi, Urdu?
WhatsApp Now: +92 332 130 5878
Don't forget to write your name and city please.
About Myself:
Hi, My Name is Imtiaz Ahmed Qazi and I have been in this industry for 28 years. In other words, you can say I am an experienced designer. I always try to teach the real method, as I am a Product Designer, I try to explain how to do UI UX design, Web design, Mobile Application Design as well as Wireframes, Prototypes, Sitemaps, and lots of things.
I teach Figma, Photoshop, and Adobe Illustrator as well.
I love to do animation, especially animation in Figma.
All my videos are in Hindi and Urdu language.
![CENTRAL CEE - GEN Z LUV [VERTICAL VIDEO]](http://i.ytimg.com/vi/VIbidJm9q34/mqdefault.jpg)
MAKE MORE VIDEOS LIKE THIS, LEARNT A LOT FROM THIS VIDEO PLEASE MAKE SOMETHING RELATED TO DESKTOP APP OR WEBSITE IN FIGMA
Hi, Thanks for your appreciation. More appreciation means more videos. Sure, I will make one for the Web Desktop App.
Bohot Shukria Janab
Thanks bhai!
Really good tutorial shukriya
Thanks. Your Welcome :)
Please make more like this it helps a lot and thank you
Sure, IN SHA ALLAH
Good Tutorial in Simple Language !
Thanks buddy!
please sir bs thora sa voice over laud kiya kry mujha buht kuch sekhny ko mila thank you jazakallah allah apko ajar de ga inshallah
g Bhai IN SHA ALLAH zaroor, next videos may try karonga.
More tutorials please sir
Yes, working on it, complete header animation, you will learn alot.
@@ikazi1 thank you😍 i look forward to new tutorial
it would be better if you upload the icons of the last two skins and the video of making different patches
Thanks for your advice, but what do you mean by last two skin? and sure for patches you asked, will work on it. Didnt I get ya properly buddy!
@@ikazi1 Skipped some designs in the last two designs so that the video is not long At one hour and 47 minutes into this video, you said if the viewer wants to upload it,it is better to upload the skipped videos, and I am learning from this video.
Got it. but I already made separate subject for each section in video. Didnt it help you?
Hello, thank you for providing such informative tutorial videos. I have a question regarding the All Button Icons section. I followed along twice during that part (1:36:00-1:43:00). When I tried to change the color of the button icon and adjusted the properties to "selected Yes" or "No", the text of all button icons changed color but the icon itself did not. Except for the home icon, none of the other icons changed color, but the text below did change. I am a bit confused about this issue. Do you have any solutions to resolve it? thanks
Hi, is your icon is FLATTEN SECTION control E and the name of the icon is same?
@@ikazi1Hi there! I reviewed the frame and the name of the icon, and they are indeed all in the flattened section. However, I'm not sure if the names of the icons are the same. I changed the names to "home," "carts," and "account." Is it necessary to also rename the icon layer when modifying the layer text?(rename home to text 1:40:40)
Fortunately, I checked the nesting in the tab icons. In the button icon, the parent component is duplicated from the tab icon and only shows "home." So, I reselected the Nested instances and chose not to "Expose properties from Nested instances," but instead, I selected "Create new property - Instance swap - tab icon." After that, the icon changed color. Thank you for providing the solutions. As a beginner, your video has been really helpful in figuring out how to design apps in Figma, especially when it comes to components.
@@nomadic3502 Cool. this is good to hear that eventually you got the solution.
Would you make english videos?
Hi, yes, I am trying. in fact I made one youtube channel in english, you can view here:
ruclips.net/channel/UCV-C4efnbJn793PG4XMjmAQ
Let me know guys if you need Source File for this project.
Please Provide, Thanks
Yes I need please sir
@@SaminaGFX Hi, I will upload it on Monday iA
@@ikazi1 Thank you so much sir
Salam sir, I'm house wife, so I'm doing figma app, UI UX through your channel, now I've almost done my work where as you've taught,so how i can contact you for more help.... please consolidate me sir, I'm much impressed your teaching way🎉
files ???
Sure will share soon