آموزش ملزومات طراحی Figma UI UX - آخرین آپدیت

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

شروع شدن Getting Started

• دوره آموزشی مقدمه ای بر Figma Essentials Introduction to Figma Essentials training course

• شروع آموزش Figma Getting started with Figma training

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

• تفاوت بین UI و UX در Figma چیست Whats the difference between UI and UX in Figma

• آنچه ما در این دوره آموزشی Figma می سازیم What we are making in this Figma course

• پروژه کلاس 01- مختصر خود را ایجاد کنید Class project 01- Create your own brief

• پروژه کلاس 01- مختصر خود را ایجاد کنید Class project 01- Create your own brief

Wireframing - وفاداری کم Wireframing - Low Fidelity

• Lo Fi Wireframe در مقابل High Fidelity در Figma چیست What is Lo Fi Wireframe vs High Fidelity in Figma

• ساخت فایل طراحی و معرفی فریم ها در Figma Creating our design file & introducing frames in Figma

معرفی نوع، رنگ و نماد Type, Color & Icon Introduction

• اصول اولیه نوع و فونت در Figma The basics of type & fonts in Figma

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

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

• Strokes به علاوه به روز رسانی پیش فرض های رنگ در Figma Strokes plus updating color defaults in Figma

• ویرایش اشیاء و نحوه فرار در Figma Object editing and how to escape in Figma

• مقیاس در مقابل ابزار انتخاب در Figma Scale vs Selection Tool in Figma

• فریم ها در مقابل گروه ها در Figma Frames vs Groups in Figma

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

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

• از کجا می توان نمادهای رایگان Figma را دریافت کرد Where to get Free icons for Figma

• مطابق با سکته مغزی نمادهای ما Matching the stroke of our icons

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

• پروژه کلاس 03 - نمادها Class project 03 - Icons

• پروژه کلاس 03 - نمادها Class project 03 - Icons

صفحات Pages

• نحوه استفاده از Pages در Figma How to use Pages in Figma

نمونه سازی - سطح 1 Prototyping - Level 1

• نحوه نمونه سازی در Figma How to prototype in Figma

• نمونه اولیه انیمیشن و آسان سازی در Figma Prototype animation and easing in Figma

• با Figma Mirror روی گوشی خود تست کنید Testing on your phone with Figma Mirror

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

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

انیمیشن سطح 1 Animation Level 1

• انیمیشن هوشمند و تاخیر در Figma چیست What is Smart Animation & delays in Figma

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

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

اظهار نظر Commenting

• به اشتراک گذاری و اظهار نظر در مورد فایل Figma با سهامداران Sharing & Commenting on Figma file with Stakeholders

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

Moodboard - وفاداری بالا Moodboard - High Fidelity

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

• نحوه ایجاد تابلوی خلق و خو در Figma How to create a mood board in Figma

• کلاس پروژه 06 - Moodboard Class Project 06 - Moodboard

• کلاس پروژه 06 - Moodboard Class Project 06 - Moodboard

ستون ها Columns

• نحوه کار با Columns & Grid در Figma How to work with Columns & Grid in Figma

نکته ها و ترفندهای Tips & Tricks

• نکات ترفندهای ترجیحات و عجیب بودن در Figma Tips Tricks Preferences and Weirdness in Figma

رنگ ها Colors

• رنگ الهام بخش و قطره چکان در Figma Color Inspiration & the eyedropper in Figma

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

• نحوه ایجاد گرادیان در Figma How to make gradients in Figma

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

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

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

متن و فونت پیشرفته Text & Fonts Advanced

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

• از چه فونت هایی می توانم به علاوه جفت کردن فونت در Figma استفاده کنم What fonts can I use plus font pairing in Figma

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

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

• متن Lorem ipsum & Placeholder در Figma Lorem ipsum & Placeholder text in Figma

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

• نحوه رفع فونت های از دست رفته در Figma How fix missing fonts in Figma

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

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

طراحی Drawing

• نکات و ترفندهای طراحی در Figma Drawing tips and tricks in Figma

• دکمه های Squircle با دوره های گرد ios در Figma Squircle buttons with ios rounded courses in Figma

• اتحاد Boolean Subtract Intersect Exclude Pathfinder در Figma Boolean Union Subtract Intersect Exclude Pathfinder in Figma

• تفاوت Union و Flatten Figma چیست؟ What is the difference Union vs Flatten Figma

• کلاس پروژه 09 - ساختن چیزها Class Project 09 - Making stuff

• کلاس پروژه 09 - ساختن چیزها Class Project 09 - Making stuff

• Smart Selection & Tidy up در Figma Smart Selection & Tidy up in Figma

کار با ایلوستریتور Working with Illustrator

• آیا باید ایلوستریتور را با Figma بشناسم؟ Do I need to know Illustrator with Figma

تصاویر Images

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

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

• تصویر و پلاگین رایگان برای Figma Free image & plugin for Figma

• کار با فتوشاپ Working with Photoshop

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

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

• طرح بندی خودکار و محدودیت ها Autolayout & Constraints

• پروژه کلاس 11 - دکمه ها Class project 11 - Buttons

• پروژه کلاس 11 - دکمه ها Class project 11 - Buttons

• طرح بندی خودکار برای فاصله Auto Layout for spacing

• نحوه استفاده از محدودیت ها در figma How to use constraints in figma

• ترکیب قاب‌های تودرتو، چیدمان خودکار و محدودیت‌ها در Figma Combining Nested frames Auto Layout & Constraints in Figma

• افزودن Text Box Autoheight به Autolayout در Figma Adding Text Box Autoheight to Autolayout in Figma

• کلاس پروژه 12 - طراحی واکنشگرا Class Project 12 - Responsive Design

• کلاس پروژه 12 - طراحی واکنشگرا Class Project 12 - Responsive Design

• افکت‌های زیبای drop shadow & Inner drop shadow در Figma Nice drop shadow & Inner drop shadow effects in Figma

جلوه ها Effects

• Blur Layer & Background Blur & Image Blur در Figma Blur Layer & Background Blur & Image Blur in Figma

• نحوه ساخت دکمه های Neumorphic UI در Figma How to make Neumorphic ui buttons in Figma

• پروژه کلاس 13 - جلوه ها Class project 13 - Effects

• پروژه کلاس 13 - جلوه ها Class project 13 - Effects

ذخیره و تاریخچه Saving & History

• نحوه ذخیره محلی و ذخیره تاریخ در Figma How to save locally & save history in Figma

مولفه ها و نمونه ها Components & Instances

• اجزای موجود در Figma چیست؟ What are components in Figma

• به روز رسانی و تغییر و تنظیم مجدد اجزای خود Updating & Changing & Resetting your components

• شما نمی توانید اجزای اصلی را در Figma بکشید You can’t kill main components in Figma

• اجزای اصلی خود را در Figma کجا باید نگه دارید Where should you keep your main components in Figma

• مقدمه ای بر قرارداد اسلش جلو/نامگذاری در Figma Intro to the forward slash / naming convention in Figma

• پروژه کلاس 14 - اجزاء Class Project 14 - Components

• پروژه کلاس 14 - اجزاء Class Project 14 - Components

انواع و متغیرها Variants & Variables

• نحوه ساخت کامپوننت متغیر در Figma How to make a variable component in Figma

• روش دیگری برای ایجاد متغیر در Figma Another way to make variables in Figma

• نحوه ساخت یک متغیر چند بعدی در Figma How to make a Multi Dimensional Variant in Figma

• پروژه کلاس 15 - انواع Class Project 15 - Variants

• پروژه کلاس 15 - انواع Class Project 15 - Variants

ساخت فرم Making a form

• نحوه ساخت فرم با استفاده از انواع در Figma How to make a form using variants in Figma

• پروژه کلاس 16 - فرم Class Project 16 - Form

• پروژه کلاس 16 - فرم Class Project 16 - Form

• قرار دادن همه آنها در یک مثال دسکتاپ Putting it all together in an desktop example

نمونه سازی - سطح 2 Prototyping - Level 2

• نحوه افزودن مودال همپوشانی پاپ آپ در Figma How to add a popup overlay modal in Figma

• نحوه ساخت و نمونه سازی نوک ابزار در Figma How to make & prototype a tool tip in Figma

• Flow ها در Figma چیست؟ What are Flows in Figma

• روی همپوشانی منوی ناوبری موبایل در Figma اسلاید کنید Slide in mobile nav menu overlay in Figma

• پروژه کلاس 17 - نمونه سازی Class project 17 - Prototyping

• پروژه کلاس 17 - نمونه سازی Class project 17 - Prototyping

• نحوه پین ​​کردن ناوبری به بالا در Figma How to pin navigation to top in Figma

• نحوه ایجاد سوایپ اسکرول افقی در Figma How to make horizontal scrolling swipe in Figma

• به صورت خودکار صفحه را به پایین اسکرول کنید تا نقطه لنگر در Figma ایجاد شود Automatic scroll down the page to anchor point in Figma

تیم ها و پروژه ها Teams & Projects

• Teams vs Projects vs Files در Figma چیست؟ What are Teams vs Projects vs Files in Figma

کتابخانه ها Libraries

• چگونه از کتابخانه های تیم در Figma استفاده می کنید؟ How do you use team libraries in Figma

انیمیشن و تعاملات خرد Animation & Micro Interactions

• تفاوت بین انیمیشن و تعاملات خرد The difference between animation & micro interactions

• انیمیشن با کاهش سفارشی در Figma Animation with custom easing in Figma

• پروژه کلاس 18 - انیمیشن دوم من Class Project 18 - My Second Animation

• پروژه کلاس 18 - انیمیشن دوم من Class Project 18 - My Second Animation

• نحوه ایجاد انتقال متحرک در Figma How to make animated transitions in Figma

• پروژه کلاس 19 - انتقال صفحه Class Project 19 - Page transition

• پروژه کلاس 19 - انتقال صفحه Class Project 19 - Page transition

• تعاملات میکرو با استفاده از اجزای تعاملی در Figma Micro interactions using interactive components in Figma

• سوئیچ ضامن تعامل میکرو در Figma Micro interaction toggle switch in Figma

• منوی برگر Micro Interaction در Figma به کراس تبدیل شد Micro Interaction burger menu turned into cross in Figma

• پروژه کلاس 20 - تعامل خرد Class Project 20 - Micro interaction

• پروژه کلاس 20 - تعامل خرد Class Project 20 - Micro interaction

به روز رسانی بند انگشتی Thumbnail update

• نحوه تغییر تصویر کوچک برای فایل های Figma How to change the thumbnail for Figma Files

صادرات Exporting

• نحوه صادرات تصاویر از Figma How to export Images out of Figma

• چگونه سند خود را با مشتریان و سهامداران به اشتراک بگذاریم How to share you document with clients & stakeholders

• در اوایل فرآیند طراحی figma با توسعه دهنده خود صحبت کنید Talking to your developer early in the figma design process

• اشتراک گذاری Figma با توسعه دهندگان و مهندسین Sharing Figma with developers & engineers handoff

• دسته بعدی که سیستم های طراحی نامیده می شوند چیست؟ What are the next level handoffs aka design systems

• کلاس پروژه 21 - طراحی خود را به پایان برسانید Class Project 21 - Finish your design

• کلاس پروژه 21 - طراحی خود را به پایان برسانید Class Project 21 - Finish your design

بعدش چی What next

• بعد از آن برای شما و فیگما What next for you and Figma