راهنمای Figma و Adobe XD: آموزش طراحی UI/UX با 12 پروژه - آخرین آپدیت

سرفصل ها و درس ها

Introduction to Figma

• 1-ایجاد حساب کاربری در Figma 1.Creating Account in Figma

• 2-آشنایی با اندازه‌های فریم در Figma 2.Knowing About FrameSizes in figma

• 3-کاوش ابزارهای بیشتر در Figma 3.Exploring More Tools in Figma

• 4-یادگیری اشکال مختلف و کاربردهای آنها در Figma 4.Learning About Different Shapes & Their Uses in Figma

• 5-درک Autolayout و Masking 5.Understanding About Autolayout& Masking

• 6-درک درباره‌ی کامپوننت‌ها 6.Understanding About Components

• 7-نگاهی اجمالی به Prototyping 7.Brief Look on Prototyping

• 8-دانلود برخی از پلاگین‌های مفید در Figma 8.Downloading Some Useful Plugins in Figma

2-ایجاد افکت Slide Parallelox ساده در Figma 2.Making Simple Parallelox Slide Effect in Figma

• 1-ایجاد RollOver برای وب‌سایت 1.Creating A RollOver For Website

• 2-ایجاد LeftSlide 2.Creating a LeftSlide

• 3-ایجاد یک پس‌زمینه برای وب‌سایت 3.Creating A Background For WebSite

• 4-ایجاد دکمه‌ها و متن ساختگی 4.Creating a Buttons& Dummy Text

• 5-ایجاد افکت Parallelex در Figma 5.Creating a Parallelex Effect in Figma

3-ساخت وب‌سایت اجاره ماشین 3.Making A CarRental Website

• 1-ایجاد صفحه اصلی 1.Creating Front Page

• 2-افزودن لوگو و دکمه در صفحه اول 2.Adding Logos & Buttons in First Page

• 3-ایجاد صفحه وب دوم 3.Creating a Second WebPage

• 4-ساخت Prototype صفحه وب دوم ما 4.Prototyping Our Second WebPage

• 5-ایجاد صفحه وب سوم ما 5.Creating Our Third WebPage

• 6-ایجاد Prototype برای صفحه وب سوم 6.Creating Prototype For Third WebPage

• 7-ایجاد صفحه اشتراک 7.Creating A Subscribe Page

• 8-به پایان رساندن وب‌سایت ما 8.Finishing Our Website

4-ایجاد انیمیشن Webslide دستور پخت غذا 4.Creating a Food Recepie Webslide Animation

• 1-ایجاد صفحه وب دستور پخت غذا 1.Creating Food Recipe Webpage

• 2-ایجاد صفحه انتقال 2.Creating a Transistion Page

• 3-به پایان رساندن صفحه انتقال ما 3.Finishing Our transistion Page

• 4-به پایان رساندن انیمیشن صفحه انتقال ما 4.Finishing Our transition Page Animation

6-ساخت یک اپلیکیشن خرید کوچک برای پوشاک مردانه و زنانه 6.Making a Small ShoppingApp for Mens& Women Wear

• 1-ایجاد صفحه اپلیکیشن در Application 1.Creating a App Page in Application

• 2-ایجاد افکت اسکرول 2.Creating Scrolling Effect

• 3-ایجاد متن اضافی و برخی آیکون‌ها برای صفحه تی‌شرت Relaxed 3.Creating Additional Text & Some Icons for Relaxed T shirt Page

• 4- Protyping صفحه تی‌شرت Relaxed برای App 4. protyping Relaxed T shirt Page For App

• 5-ایجاد و Prototyping صفحه طراحی UI مردانه 5.Creating & Prototyping Men UI Design Page

• 6-به پایان رساندن تمام انیمیشن‌های تعاملی در App 6.Finishing All Interactive Animations in App

6-ایجاد یک صفحه وب کفش 6.Creating a Shoe Webpage

• 1-ایجاد صفحه وب اصلی کفش 1.Creating a Main Shoe Webpage

• 2-ایجاد برخی از قابلیت‌ها برای صفحه اصلی 2.Creating Some Functionality for Main Page

• 3-ایجاد یک متن در صفحه اصلی کفش 3.Creating a Text in Main Shoe Page

• 4-Prototyping متن در صفحه اصلی کفش 4.Prototyping Text in MainShoe Page

• 5-به پایان رساندن Prototyping ما برای صفحه اصلی کفش 5.Finishing Our Prototyping For MainShoe Page

• 6-طراحی صفحه جدید 6.Designing New Page

• 7-تنظیم تنظیمات تعامل در صفحه اصلی اول 7.Adjusting Interaction Settings in First Main Page

• 8-اتصال متن اصلی به صفحه بعدی در Figma با استفاده از تعامل 8.Connecting Main Text to Next Page in Figma Using Interaction

• 9-به پایان رساندن انیمیشن Interction وب‌سایت ما 9.Finishing Our Website Interction Animation

7-مقدمه‌ای بر Adobe Xd 7.Introduction to Adobe Xd

• 1-نگاهی اول به XD 1.FirstLook in XD

• 2-بحث درباره Artboards و Gridها 2.Discussing About Artboards & Grids

• 3-یادگیری ابزارهای متن در XD 3.Learning About Text Tools in XD

• 5-یادگیری ابزارهای Blur در XD 5.Learning About Blur Tools in XD

• 6-یادگیری ابزارهای Alignment 6.Learning About Alignment Tools

• 7-بحث درباره Assets و Components 7.Discussing About Assets&Components

• 8-یادگیری Girds تکراری 8.Learning About Repatitive Girds

• 9-.یادگیری درباره Responsiveness در XD 9..Learning About Responsiveness in XD

• 10-کاوش درباره Prototyping در Figma 10.Exploring About Prototyping in Figma

8-ایجاد یک اپلیکیشن غذا 8.Creating A Food App

• 1-ایجاد اولین صفحه UI اپلیکیشن در XD 1.Creating First UI App Page in XD

• 2-ایجاد Prototype کشیدن برای اپلیکیشن ما 2.Creaing Dragging Prototype for Our App

• 3-ایجاد صفحه آیتم اصلی اپلیکیشن غذا 3.Creating Main Food App Item Page

• 4-ایجاد صفحه روش پرداخت 4.Creating Payment Method Page

• 5-به پایان رساندن Prototyping صفحه روش پرداخت ما 5.Finishing Our Payment Method Page Prototyping

• 6-ایجاد صفحه ورود به سیستم پی‌پال 6.Creating A Paypal Login Page

• 7-ایجاد انیمیشن تعامل تایپ متن برای صفحه ورود 7.Creating a Type Text Interaction Animation For Login Page

• 8-.به پایان رساندن انیمیشن تعاملی تایپ متن 8..Finishing Type Text Interactive Animation

• 9-ایجاد یک صفحه درخواست پرداخت و صفحه جزئیات تراکنش 9.Creating a Requestpayment Page& Transaction Details Page

• 10-به طور کامل به پایان رساندن اپلیکیشن ما 10.Finishing Our App Completely

9-ساخت یک وب‌سایت پوشاک مردانه 9.Making a MensWear Website

• 1-ایجاد یک صفحه اول برای پوشاک بوتیک مردانه 1.Creating a First page for Mens Botquie Wear

• 2-ایجاد دکمه‌ها و RollOvers در صفحه اصلی 2.Creating Buttons & RollOvers in Main Page

• 3-به پایان رساندن طراحی صفحه اصلی 3.Finishing MainPage Design

• 4-تهیه Prototype برای صفحه وب اصلی 4.Preparing Prototype For Main WebPage

• 5-به پایان رساندن Prototype برای صفحه اصلی 5.Finishing Prototype For Main Page

• 6-ایجاد Prototyping تعاملی اضافی برای صفحه اصلی 6.Creating Additional Interaction Prototyping for Main Page

• 7-به پایان رساندن نام ورودی اول 7.Finished First Input name

• 8-ایجاد انیمیشن تعاملی برای فیلد ورودی کارت اعتباری 8.Creating Interactive Animation for Credit Card input Field

• 10-به پایان رساندن تمام فیلدهای ورودی 10.Finishing all the Input Fields

• 11-به پایان رساندن کل وب‌سایت 11.Finishing Entire WebSite

10-ساخت یک وب‌سایت انتقال پول دیجیتال 10.Making a Digital Money Transfer Website

• 1-ایجاد بخش Header برای صفحه وب 1.Creating a Header Part for WebPage

• 2-ایجاد بخش Footer 2.Creating A Footer Part

• 3-به پایان رساندن اولین صفحه وب برای وب‌سایت تجاری 3.Finishing First Webpage For Commercial WebSite

• 4-به پایان رساندن صفحه وب دوم ما 4.Finishing Our Second WebPage

• 5-به پایان رساندن صفحه Connect Now 5.Finishing Connect Now Page

• 6-طراحی صفحه Start Now 6.Designing Start Now Page

• 7-به پایان رساندن انیمیشن تعاملی برای صفحه شروع 7.Finishing Interactive Animation For Start Page

• 8-به پایان رساندن انیمیشن تعاملی برای دکمه Connect 8.Finishing Interactive animation for Connect Button

• 9-ایجاد و ProtoTyping صفحه ثبت‌نام 9.Creating and ProtoTyping Sign up Page

• 10-به پایان رساندن کل وب‌سایت ما 10.Finishing Our FullWebSite

11-ایجاد یک اپلیکیشن خرید در XD 11.Creating a Shopping App in XD

• 1-طراحی صفحه ورود برای اپلیکیشن خرید 1.Designing Login PageFor Shopping App

• 2-طراحی یک صفحه منوی کفش 2.Designing a Shoe Menu Page

• 3-افزودن متن و برخی لوازم جانبی و برخی RollOvers به صفحه منوی کفش 3.Adding Text & Some Accesories & Some RollOvers to Shoe Menu Page

• 4-درک درباره کشیدن تصاویر در XD با استفاده از روش ProtoType 4.Understanding About Dragging Images in XD By ProtoType Method

• 5-طراحی و Prototyping صفحه کفش Casual 5.Desiging& Prototyping Casual Shoe Page

• 6-دادن افکت اسکرول برای صفحه کفش Casual 6.Giving Scrolling Effect For Casual ShoePage

• 7-طراحی و Prototyping صفحه FootWear 7.Designing& Prototyping FootWear Page

• 8-به پایان رساندن انیمیشن نهایی کشیدن برای صفحه FootWear 8.Finishing Final Dragging Animation for FootWearPage

• 9-به پایان رساندن انیمیشن تعاملی صفحه KidsWear 9.Finishing KidsWear Page Interactiveanimation

• 10-طراحی صفحه حساب کاربری و آماده‌سازی برای Prototype 10.Designing Account Page& Preparing For Prototype

• 11-انجام انیمیشن تعاملی Prototype برای AccountPage 11.Doing Prototype Interactive Animation For AccountPage

• 12-اصلاح برخی از اصلاحات در صفحه NikeAir 12.Correcting Some Corrections in NikeAir Page

• 13-طراحی صفحه Add To Cart 13.Designing Add To Cart Page

• 14-به پایان رساندن انیمیشن تعاملی Prototype برای صفحه Add to Cart 14.Finishing Prototype Interactive Animation For Add to Cart Page

• 15-نهایی کردن کل اپلیکیشن 15.Finalzing The Entire App

12-ایجاد یک وب‌سایت حرفه‌ای 12.Creating A Professional WebSite

• 1-ایجاد یک دکمه در صفحه اصلی وب 1.Creating a Buttons in MainWebPage

• 2-طراحی و Prototyping برخی از انیمیشن‌ها در MainPage 2.Designing and Prototyping Some Animations in MainPage

• 3-ایجاد انیمیشن شروع برای وب‌سایت 3.Creating Starting Animation for Website

• 4-دادن انیمیشن تعاملی برای صفحه ورود 4.Giving Interactive Animation for Login Page

• 5-طراحی صفحه About Us 5.Designing About Us Page

• 6-به پایان رساندن صفحه انیمیشن تعاملی About us 6.Finishing About us Interactive Animation Page

• 7-آماده‌سازی برای صفحه Pricing 7.Preparing For Pricing Page

• 8-به پایان رساندن تمام طراحی اسلات‌های قیمت‌گذاری 8.Finishing all Pricing Slot Designs

• 9-به پایان رساندن Protptype برای صفحه Pricing 9.Finishing Protptype For Pricing Page

• 10-به پایان رساندن کل وب‌سایت 10.Finishing Full Website