آموزش اصول طراحی UI UX با فیگما - بخش اول: ابزارها و مبانی - آخرین آپدیت

مقدمه‌ای بر فیگما و بررسی کلی دوره Introduction to Figma & Course Overview

• مقدمه‌ای بر دوره جامع فیگما Introduction to Figma Essentials training course

• شروع کار با فیگما Getting started with Figma training

• فیگما برای چیست و آیا کدنویسی می‌کند؟ What is Figma for & does it do the coding?

• تفاوت UI و UX در فیگما چیست؟ Whats the difference between UI and UX in Figma

• در این دوره فیگما چه چیزی می‌سازیم؟ What we are making in this Figma course

• پروژه کلاسی اول: ایجاد بریف شخصی Class project 01- Create your own brief

وایرفریمینگ و ابزارهای بنیادی طراحی Wireframing & Foundational Design Tools

• تفاوت وایرفریم Lo-Fi و High-Fidelity در فیگما What is Lo Fi Wireframe vs High Fidelity in Figma

• ایجاد فایل طراحی و آشنایی با فریم‌ها در فیگما Creating our design file & introducing frames in Figma

• مبانی تایپ و فونت‌ها در فیگما The basics of type & fonts in Figma

• مستطیل‌ها، دایره‌ها، دکمه‌ها و گوشه‌های گرد در فیگما Rectangles, Circles Buttons & Rounded corners in Figma

رنگ‌ها، استروک‌ها و مبانی آبجکت‌ها Colors, Strokes & Object Basics

• نحوه استفاده از رنگ در فیگما How to use color in Figma

• استروک‌ها و به‌روزرسانی رنگ‌های پیش‌فرض در فیگما Strokes plus updating color defaults in Figma

• ویرایش آبجکت‌ها و نحوه خروج از حالت ویرایش Object editing and how to escape in Figma

• تفاوت ابزار Scale و Selection در فیگما Scale vs Selection Tool in Figma

• تفاوت فریم‌ها و گروه‌ها در فیگما Frames vs Groups in Figma

تمرین وایرفریم و طراحی آیکون Wireframe Practice & Icon Design

• پروژه کلاسی دوم: طراحی وایرفریم Class project 02- Wireframe

• منابع دریافت آیکون‌های رایگان برای فیگما Where to get Free icons for Figma

• یکسان‌سازی استروک آیکون‌ها Matching the stroke of our icons

• نحوه استفاده از پلاگین‌های آیکون در فیگما How to use Plugins in Figma for icons

• پروژه کلاسی سوم: طراحی آیکون‌ها Class project 03 - Icons

مبانی پروتوتایپینگ Prototyping Basics

• نحوه استفاده از صفحات (Pages) در فیگما How to use Pages in Figma

• نحوه ساخت پروتوتایپ در فیگما How to prototype in Figma

• انیمیشن‌های پروتوتایپ و تنظیمات Easing Prototype animation and easing in Figma

• تست طراحی روی گوشی با Figma Mirror Testing on your phone with Figma Mirror

• پروژه کلاسی چهارم: تست روی گوشی موبایل Class project 04 - Testing on your phone

انیمیشن و همکاری تیمی Animation & Collaboration

• انیمیشن هوشمند (Smart Animation) و تاخیرها در فیگما What is Smart Animation & delays in Figma

• پروژه کلاسی پنجم: اولین انیمیشن من Class project 05 - My first animation

• اشتراک‌گذاری و ثبت کامنت برای ذینفعان پروژه Sharing & Commenting on Figma file with Stakeholders

• اشتراک‌گذاری دسترسی ویرایش با سایر طراحان UX Share editing with other UX designers in Figma

الهام‌بخش‌های UX و مودبوردها UX Inspiration & Moodboards

• چگونه برای پروژه‌های UX ایده و الهام می‌گیرم؟ How I get inspiration for UX projects

• نحوه ساخت مودبورد (Mood Board) در فیگما How to create a mood board in Figma

• پروژه کلاسی ششم: ساخت مودبورد Class Project 06 - Moodboard

چیدمان‌ها، ستون‌ها و تکنیک‌های رنگی Layouts, Columns & Color Techniques

• نحوه کار با ستون‌ها و گرید در فیگما How to work with Columns & Grid in Figma

• نکات، ترفندها، تنظیمات و موارد خاص در فیگما Tips, Tricks, Preferences and Weirdness in Figma

• الهامات رنگی و ابزار Eyedropper در فیگما Color Inspiration & the eyedropper in Figma

• نحوه ایجاد پالت رنگی در فیگما How to create a color palette in Figma

• نحوه ساخت گرادینت در فیگما How to make gradients in Figma

• نحوه ایجاد و استفاده از استایل‌های رنگی (Color Styles) How to create & use Color Styles in Figma

• پروژه کلاسی: رنگ‌ها و ستون‌ها Class Project - Colors & Columns

تایپوگرافی و استایل‌دهی متن Typography & Text Styling

• تفاوت فونت‌های دسکتاپ و مرورگر در فیگما Font on Desktop vs Browser Figma

• استفاده از فونت‌ها و ترکیب فونتی (Font Pairing) What fonts can I use plus font pairing in Figma

• سایزهای رایج فونت در طراحی وب What common font sizes should I choose in web design

• نحوه ساخت استایل‌های کاراکتر (Character Styles) How to make Character Styles in Figma

• استفاده از متن‌های جایگزین (Lorem Ipsum) Lorem ipsum & Placeholder text in Figma

• نکات کاربردی درباره متن‌ها در فیگما Useful things to know about text in Figma

• نحوه رفع مشکل فونت‌های یافت‌نشده How fix missing fonts in Figma

• پروژه کلاسی هشتم: کار با متن Class project 08 - Text

اشکال، آیکون‌ها و ابزارهای Boolean Shapes, Icons & Boolean Tools

• نکات و ترفندهای ترسیم در فیگما Drawing tips and tricks in Figma

• ساخت دکمه‌های Squircle با گوشه‌های گرد iOS Squircle buttons with ios rounded courses in Figma

• ابزارهای Boolean (اتحاد، تفریق، اشتراک و حذف) Boolean Union Subtract Intersect Exclude Pathfinder in Figma

• تفاوت Union و Flatten در فیگما What is the difference Union vs Flatten Figma

• پروژه کلاسی نهم: خلق اشکال Class Project 09 - Making stuff

تصاویر، ماسک کردن و ابزارهای UX Images, Masking & UX Tools

• انتخاب هوشمند (Smart Selection) و مرتب‌سازی (Tidy up) Smart Selection & Tidy up in Figma

• آیا برای کار با فیگما نیاز به یادگیری ایلاستریتور هست؟ Do I need to know Illustrator with Figma

• نکات و ترفندهای استفاده از تصاویر در فیگما Tips & tricks for using images in Figma

• ماسک کردن و برش تصاویر در فیگما Masking Cropping images in Figma

• منابع تصاویر رایگان و پلاگین‌های کاربردی Free image & plugin for Figma

• آیا برای طراحی UX در فیگما به فتوشاپ نیاز دارید؟ Do you need Photoshop for UX design in Figma

• پروژه کلاسی: کار با تصاویر Class Project - Images