Complete Figma UI/UX Design Course with Projects 2024
HTML-код
- Опубликовано: 6 авг 2024
- 📌 Enroll Now: www.udemy.com/course/learn-fi...
🌐 Try Figma : bit.ly/try-figma-free
🌐 Try Figma Pro : bit.ly/try-figma-pro
🚀Join Mobbin : bit.ly/mobbin-signup
🎨 Welcome to the Ultimate UI/UX Design Course! 🖌️
Are you ready to dive into the fascinating world of User Interface and User Experience design? Whether you're a beginner looking to start a new career, or a seasoned designer aiming to refine your skills, this course is perfect for you.
🌟 What You'll Learn:
00:00 Intro
00:24 Course Intro
02:12 Course Overview
08:24 Download Figma
10:21 Figma Interface Introduction and Frame Explained
15:39 Grid and Type Of Grid in Figma with Example
22:11 Device Breakpoints for Mobile Tablet and Desktop Screens
26:12 Color Theory And Color Harmony Explained with Example
34:41 Solid Colors, Gradients and Image Manipulation in Figma
39:56 How To Generate Amazing Color Palette with Plugin in Figma
42:25 How to Save Plugin and use EyeDropper Tool in Figma
44:12 Stroke Explained in Figma
46:25 Effects - Drop Shadow and Inner Shadow in Figma Explained
48:30 Effects- Layer Blur and Background Blur in Figma Explained with Example
53:19 Export in Figma Explained with Example
55:03 Shapes in Figma - Rectange Explained
58:21 Line and Arrow Tools in Figma Explained with Example
1:02:01 Ellipse and Circle (Sweep,Ratio) in Figma Explained
1:06:58 Polygon and Star Tool in Figma
1:10:27 Directly place the image inside the object in Figma
1:11:51 Alignment Tools Explained in Figma
1:15:34 Create Vector Shapes with Pen Tool & Pencil Tool in Figma
1:21:57 Boolean operation in Figma
1:25:48 Text and Typography Theory - Serif and Sans Serif Typefaces
1:28:31 Text and Typography Tool in Figma
1:33:36 Introduction to Three Pillar of Figma
1:34:11 AutoLayout Basics with Padding and Alignment in Figma Explained (Example 1)
1:38:24 AutoLayout Space Beween, Strokes, Canvas Stacking in Figma Explained
1:42:31 AutoLayout Text BaseLine Alignment in Figma Example 3
1:44:51 AutoLayout Absolute Positioning in Figma Example 4
1:46:53 AutoLayout Fill, Hug, Fixed Properties in Figma Explained Example 5
1:51:04 Component In Detail in Figma with Example
1:54:50 Variants in Figma Explained with Example
1:58:45 Component Properties (Variant, Boolean, Instance Swap and Text Property) in Figma
2:07:14 PROJECT 1 - Design Edtech Platform in Figma
2:49:51 PROJECT 2 - Travel Agency Website Design in Figma
3:22:12 PROJECT 3 - UI/UX Designer Portfolio Design Project in Figma
3:43:16 Upload UI/UX Project to Behance
Enroll now to unlock your potential and embark on a creative journey into the digital realm. Be prepared to create designs that captivate and engage users, leaving a lasting impact on their digital experiences!
Don't miss out on this opportunity to become a UI/UX design pro!
📆 Course Details:
💼 Instructor: @ujjwalsinghdev
📚 Level: Beginner to Advanced
📢 Connect with Me:
💻 Website: www.ujjwalsingh.com/courses
📷 Instagram: / ujjwalsinghdev
🐦 Twitter: / ujjwalsinghdev
🔗 LinkedIn: / ujjwalsinghdev
🤝 Let's design a better digital world together. Enroll now and let your creativity flow! 💡
#ux #ui #uxdesign #figma #appdesign #design #figmatutorial #udemy #userexperience #webdesign #mobileapp
All design source files, Discord community access, PDF e-book, and Q&A sessions are exclusively available through the Udemy course.
www.udemy.com/course/learn-figma-web-design/?referralCode=6BB9BD258C19CEB185C8
Hello. Are these materials enough to use Figma or do you have complete videos? If so, what should I do if I can't use Adam?
Brother, You help us thank you. 😍
your videos are THE BEST out there. please keep posting more such videos about projects and portfolio.
One of the best crash course on youtube
Dude you are making a best video . keep doing great work
I appreciate you!! This video is much informative. You taught so many things in single video
Thanks a lot 🙏🏼
thank you bro
Thankyou. This video is very helpful. Kindly upload more videos on figma
Thank you sir god bless you.
This is so helpful ✨
really informative and knowledge full video! really helpful for me Thank u so much !
Is this video enough for uiux
Good lecture
great job
just subscribed
Thank you for popping in my feed i will definitely buy your course
yaar figma ccount lunk
To on/off the Grid, shortcut key is SHIFT+G
Here are the keyboard shortcuts for turning on and off the layout grid:
• Shift+G (both Mac and Windows)
• Control+G (Mac)
• CTRL+Shift+4 (Windows)
These are the keyboard shortcuts for grouping the elements together:
•CMD+G (Mac)
•CTRL+G (Windows)
@@ujjwalsinghdev you did an amazing work. I appreciate your efforts and dedication to make this course.
Hi, Please I have a question as regard auto layout. I major in Mobile UI design, but I have difficulty in designing one-screen UI for all screen sizes and I understand auto layout to an extent. I design using the latest iPhone screen size frame in Figma, after adding auto layout, I tried previewing it on an Android screen size but the frame itself isn't showing full screen. I am out of ideas on what to do, and I do not want to go through the route of designing the same design for different screen sizes. Please any idea on what to do?
You don't have to repeatedly design from scratch for every mobile screen size.
First, create a design for the specific mobile screen size you're targeting. Then, for any other screen size, simply take a frame of that size and copy-paste the elements, resizing and scaling them accordingly. If you have created the elements with an auto layout approach, they can be resized and scaled easily without breaking the UI components.
In this case, since you've initially designed based on the standard size of an iPhone screen, it might not perfectly fit the screen size of an Android device. The solution is to take the frame size of an Android screen and copy-paste the elements, adjusting their size and scale accordingly.
Hi bro I am facing difficulty in case study, like how to choose template for the case study and what should we add in our case study. Can you please guide me?
Choosing a template for a UI/UX project involves considering the specific needs of the project, the target audience, and the design goals. Here are a few points to cover when creating a UI/UX project case study: Introduction, Project Overview, Problem Statement, Research and Discovery, User Personas, Design Process, Prototyping and Testing, and Conclusion.
You can also explore some case studies on Behance to gain better clarity.
@@ujjwalsinghdev Thank you bro!!
hindi language a course available?
Can we include the projects done in the course and share them in our own behence as work?
am not sure that's why can i get your opinion/views on this? thank you!
Absolutely, you can include any projects from my course in your personal portfolio and modify them as you prefer.
Can get that PDF ? You are using please
I truly understand your enthusiasm. Since these are preview lectures from a paid Udemy course, sharing exclusive resources from other platforms is not allowed. Thank you for your understanding.
@@ujjwalsinghdev ohk ! Genuinely lecture was wonderful 🙌
I have completed my 12th. I donot want to degree course. i want to learn uiux design. will I get job as a uiux designer without degree.
With BTech CSE job nhi mil raha hai aur without kaha se milega
is it complete course or different from the paid one?
These are the initial 4 hours preview from the paid course. The complete course is accessible on Udemy. Here is the link to the course: www.udemy.com/course/learn-figma-web-design/?referralCode=6BB9BD258C19CEB185C8 .
@@ujjwalsinghdev how much course lenght of course is😅
For trying the color compass, they are asking for $30..😭😭😭what should i do now??
Type the keyword 'tint and shade' in the Figma community's search bar and hit search. You will find a variety of plugins that offer similar functionality. Feel free to explore and select the one that best fits your needs for creating a palette.
@@ujjwalsinghdev thank you so much..🙏
I think foundation plugin is better