آموزش Figma جدید 2023: کلاس مبتدی تا حرفه ای در کمتر از 4 ساعت!

NEW Figma 2023: Beginner to Pro Class in under 4h!

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره:

شروع به کار با Figma (3.5 ساعت)

دوره مبتدی در طراحی UX/UI با Figma

این دوره مقدمه ای جامع بر Figma از مبتدی مطلق تا ویژگی های پیشرفته است. کوتاه و متمرکز، تمام آنچه را که برای مقابله با هر طرحی باید بدانید در اختیار شما قرار می دهد.

ما با راه‌اندازی حساب Figma و آشنایی با ساختار فایل آن، از ابتدا شروع می‌کنیم. سپس، به اصول Figma می پردازیم، مانند تنظیم فریم ها و تودرتو کردن آنها، اضافه کردن اشکال، متن، رنگ ها و شبکه ها، و ایجاد طرح های رابط کاربری جامد. وقتی با اصول اولیه راحت شدید، به موضوعات پیشرفته‌تری مانند ایجاد طرح‌های رابط کاربری جامد و کار با مؤلفه‌های عناصر قابل استفاده مجدد می‌پردازیم.

با نحوه ایجاد سبک‌ها و متغیرها برای سازگاری، ایجاد طرح‌های پاسخگو آشنا خواهید شد. با طرح‌بندی خودکار، و نمونه‌سازی اولیه را اضافه کنید تا طرح‌های خود را زنده کنید—همیشه با در نظر گرفتن همکاری با توسعه.

با تمرینات گام به گام و نکات و ترفندهای ارزشمند، در کمتر از 4 ساعت در Figma مهارت خواهید داشت. این برای مبتدیان یا کسانی که از سایر نرم افزارهای طراحی مانند Sketch یا Adobe XD به Figma سوئیچ می کنند عالی است.

شروع به کار

1. دریافت Figma - فرآیند ثبت نام

2. Figma در مرورگر در مقابل برنامه Figma

3. مرورگر فایل Figma – خانه Figma

4. ایجاد فایل های طراحی در Figma

مبانی Figma

  1. افزودن فریم به فایل ما

  2. چند میانبر مفید

  3. نمای کلی فایل طراحی

  4. افزودن اشکال و رنگ

  5. منوی اندازه – دستکاری اشکال و قاب‌ها

  6. تراز کردن، مرتب کردن، و اندازه گیری

  7. افزودن و کار با متن

  8. قاب های تودرتو - ابرقدرت Figma

  9. قاب‌ها در مقابل گروه‌ها

  10. طراحی با قاب های تو در تو

  11. شبکه های قابل استفاده مجدد با سبک

  12. انجمن و افزونه های Figma

  13. افزودن تصاویر

  14. طراحی در Figma

  15. مقیاس‌سازی در Figma

معرفی اجزاء

  1. استفاده مجدد از عناصر با مؤلفه‌ها و نمونه‌ها

  2. نمونه های نادیده گرفته شده

  3. چه چیزی را نادیده بگیریم و چه چیزی را نپذیریم

  4. برگرداندن مؤلفه‌ها و لغوها

  5. اجزای Nest

  6. مجموعه های مؤلفه با انواع

  7. انتقال اجزاء به صفحه خودشان

  8. سازماندهی اجزا

  9. معرفی ویژگی های جزء پیشرفته

متغیرها و سبک‌ها

  1. مقدمه ای بر متغیرها

  2. کار با متغیرهای رنگ

  3. سازماندهی با مجموعه ها و گروه های متغیر

  4. متغیرهای اندازه و فاصله

  5. و سبک‌ها چطور؟

  6. تایپوگرافی و سبک ها

  7. مستندسازی متغیرها و سبک‌ها

طراحی واکنشگرا

  1. طرح بندی خودکار چیست؟

  2. افزودن طرح‌بندی خودکار

  3. جزئیات و متغیرهای طرح بندی خودکار

  4. تغییر اندازه تنظیمات

  5. خودکار یا فاصله بین

  6. طرح بندی خودکار تودرتو با سیستم

  7. موقعیت یابی مطلق

  8. صفحات طرح بندی خودکار

  9. محدودیت‌ها در Figma

  10. محدودیت‌ها و شبکه‌ها

  11. از چه اندازه قاب باید استفاده کنم؟

نمونه اولیه اولیه

  1. نمونه سازی در Figma

  2. تنظیم رفتار اسکرول

  3. اتصال صفحه نمایش

  4. منوی کشویی با همپوشانی

  5. انواع انیمیشن

  6. مولفه های تعاملی

  7. Figma Mirror – پیش نمایش در دستگاه شما

اشتراک گذاری با طراحان و توسعه دهندگان دیگر

  1. اشتراک گذاری و دعوت از دیگران

  2. تنظیم تصویر کوچک

  3. کتابخانه‌های تیم مشترک در Figma

  4. راه اندازی یک کتابخانه تیم مشترک

  5. اتصال به کتابخانه مشترک تیم

  6. به‌روزرسانی کتابخانه‌های تیم مشترک

  7. اشتراک گذاری طرح، اجزاء، سبک ها و متغیرها

  8. حالت برنامه‌نویس: اشتراک‌گذاری با برنامه‌نویس

از Figma برای ارتقای چشم انداز خود در طراحی UI، رابط کاربری، طراحی تجربه کاربری، طراحی UX و طراحی وب استفاده کنید، و مسیر شما را برای ایمن کردن شغلی که با UX/UI Design در Figma کار می کند، تسهیل می کند.

این یک دوره آموزشی اصلی با یادگیری ماه است

© moonlearning.io با یادگیری ماه

می‌توانید با استفاده از فایل اصلی من، برنامه‌ای کوچک ایجاد کنیم:

برای دانلود فایل های تمرین ,

فایل باید مستقیماً در حساب Figma شما باز شود. بسته به تنظیمات شما ممکن است در مرورگر باز شوند، اما در DRAFTS شما ذخیره می‌شوند و می‌توانید از آنجا به هر تیم یا پروژه دیگری منتقل کنید. از طرف دیگر، در مرورگر، به سادگی روی نام فایل کلیک کنید، و همچنین می توانید آن را برای هر تیم یا پروژه دیگری ارسال کنید. لذت ببرید!

فونتی که من استفاده می کنم Poppins است، یک فونت گوگل. اگر برنامه Figma را نصب کرده‌اید (نگران نباشید این موضوع را با جزئیات بیشتر توضیح خواهم داد)، باید به طور خودکار نشان داده شود. اگر با Figma در مرورگر کار می کنید، لطفاً حتما دانلود و نصب کنید: https://fonts.google.com/specimen/Poppins


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

درس ها Lessons

  • نمونه سازی - 03 کتابخانه های تیم مشترک در Figma PROTOTYPING - 03 Shared team libraries in Figma

  • نمونه سازی - 04 منوی کشویی با پوشش PROTOTYPING - 04 Dropdown menu with overlays

  • فیگما چیست؟ کد نویسی را چه کسی انجام می دهد؟ What Is Figma? Who does the coding?

  • مبانی - 06 تراز، مرتب کردن، و اندازه گیری BASICS - 06 Align, tidy up, and measure

  • پاسخگو - 08 صفحات طرح بندی خودکار RESPONSIVE - 08 Auto layout pages

  • اجزاء - 03 چه چیزی را نادیده بگیریم و چه چیزی را نپذیریم COMPONENTS - 03 What to override and what not to

  • نمونه سازی - 07 به اشتراک گذاری طراحی، اجزاء، سبک ها و متغیرها PROTOTYPING - 07 Sharing design, components, styles, and variables

  • RESPONSIVE - 04 کارت پاسخگو با تغییر اندازه RESPONSIVE - 04 Responsive card with resizing

  • کامپوننت ها - 08 سازماندهی اجزا COMPONENTS - 08 Keeping components organised

  • مبانی - 15 روش کپی کردن BASICS - 15 Duplicating methods

  • نمونه سازی - 03 اتصال صفحات PROTOTYPING - 03 Connecting screens

  • BASICS - 02 چند میانبر مفید BASICS - 02 A few handy shortcuts

  • VARIABLES - 04 متغیرهای اندازه و فاصله VARIABLES - 04 Size and spacing variables

  • نمونه سازی - 02 تنظیم رفتار اسکرول PROTOTYPING - 02 Setting scroll behaviour

  • پاسخگو - 06 طرح بندی خودکار تودرتو با سیستم RESPONSIVE - 06 Nesting auto layout with system

  • نمونه سازی - 05 اتصال به یک کتابخانه تیم مشترک PROTOTYPING - 05 Connecting to a shared team library

  • پاسخگو - 05 خودکار یا فاصله بین RESPONSIVE - 05 Auto or space between

  • پاسخگو - 03 اجزای طرح بندی خودکار و متغیرها RESPONSIVE - 03 Auto layout components and variables

  • مبانی - 10 طراحی با قاب های تو در تو BASICS - 10 Designing with nested frames

  • پاسخگو - محدودیت های 09 در Figma RESPONSIVE - 09 Constraints in Figma

  • پاسخگو - 02 اضافه کردن طرح خودکار RESPONSIVE - 02 Adding auto layout

  • BASICS - 08 قاب های تودرتو - ابرقدرت Figma BASICS - 08 Nesting frames – The Figma superpower

  • پاسخگو - 11 از کدام اندازه فریم باید استفاده کنم؟ RESPONSIVE - 11 Which Frame Size Should I Use?

  • متغیرها - 03 سازماندهی با مجموعه ها و گروه های متغیر VARIABLES - 03 Organising with variable collections and groups

  • VARIABLES - 01 مقدمه ای بر متغیرها VARIABLES - 01 Introduction to variables

  • SETUP - 03 مرورگر فایل Figma – خانه Figma SETUP - 03 The Figma file browser – Figma's home

  • نمونه سازی - 02 تنظیم یک تصویر کوچک PROTOTYPING - 02 Setting up a thumbnail

  • مقدمه Intro

  • کامپوننت - 06 مجموعه کامپوننت با انواع COMPONENTS - 06 Component sets with variants

  • SETUP - 04 ایجاد فایل های طراحی SETUP - 04 creating design files

  • نمونه سازی - 08 حالت توسعه دهنده به اشتراک گذاری با توسعه PROTOTYPING - 08 Dev mode Sharing with development

  • نمونه سازی - 07 Figma Mirror - پیش نمایش در دستگاه شما PROTOTYPING - 07 Figma Mirror – Preview on your device

  • BASICS - 07 اضافه کردن و کار با متن BASICS - 07 Adding and working with text

  • SETUP - 01 دریافت فرآیند ثبت Figma SETUP - 01 Getting Figma Registration Process

  • STYLES - 06 تایپوگرافی و سبک ها STYLES - 06 Typography and styles

  • پاسخگو - 10 محدودیت و شبکه RESPONSIVE - 10 Constraints and grids

  • نمونه سازی - 01 فضای کاری نمونه اولیه Figma PROTOTYPING - 01 The Figma prototype workspace

  • کامپوننت ها - 04 برگرداندن مولفه ها و لغو COMPONENTS - 04 Reverting components and overrides

  • مبانی - 09 فریم در مقابل گروه ها BASICS - 09 Frames vs Groups

  • نمونه سازی - 04 راه اندازی یک کتابخانه تیم مشترک PROTOTYPING - 04 Setting up a shared team library

  • BASICS - 03 نمای کلی فایل طراحی BASICS - 03 Design file overview

  • پاسخگو - 07 موقعیت یابی مطلق RESPONSIVE - 07 Absolute positioning

  • SETUP - 02 Figma در مرورگر در مقابل SETUP - 02 Figma in the Browser vs

  • STYLES - 05 و در مورد سبک ها چطور؟ STYLES - 05 And what about styles?

  • نمونه سازی - 06 به روز رسانی کتابخانه های تیم مشترک PROTOTYPING - 06 Updating shared team libraries

  • پاسخگو - 01 طرح خودکار چیست؟ RESPONSIVE - 01 What is auto layout?

  • مبانی - 13 اضافه کردن تصاویر BASICS - 13 Adding images

  • مبانی - 12 انجمن و پلاگین Figma BASICS - 12 Figma community and Plugins

  • کامپوننت ها - 01 دوباره از عناصر با کامپوننت ها و نمونه ها استفاده کنید COMPONENTS - 01 Re use elements with components and instances

  • اجزاء - 07 اجزاء را به صفحه خود منتقل کنید COMPONENTS - 07 Move components to their own page

  • مبانی - 16 طراحی در Figma BASICS - 16 Drawing in Figma

  • نمونه سازی - 06 اجزای تعاملی PROTOTYPING - 06 Interactive components

  • مبانی - 17 مقیاس گذاری در Figma BASICS - 17 Scaling in Figma

  • نمونه سازی - 05 انواع انیمیشن PROTOTYPING - 05 Animation types

  • کامپوننت ها - 02 نمونه های برتر COMPONENTS - 02 Overriding instances

  • مبانی - 11 شبکه قابل استفاده مجدد با سبک BASICS - 11 Re usable grids with styles

  • کامپوننت ها - 09 معرفی ویژگی های اجزای پیشرفته COMPONENTS - 09 Advanced component features introduction

  • اشتراک گذاری - 01 اشتراک گذاری و دعوت از دیگران SHARING - 01 Sharing and inviting others

  • کامپوننت ها - 05 اجزای تودرتو COMPONENTS - 05 Nesting components

  • BASICS - 01 افزودن فریم به فایل ما BASICS - 01 Adding frames to our file

  • BASICS - منوی اندازه 05 - دستکاری اشکال و فریم ها BASICS - 05 Size menu – manipulating shapes and frames

  • VARIABLES & STYLES - 07 مستندسازی متغیرها و سبک ها VARIABLES & STYLES - 07 Documenting variables and styles

  • 99 متشکرم 99 Thank You

  • BASICS - 04 اضافه کردن اشکال و رنگ BASICS - 04 Adding shapes and colours

  • VARIABLES - 02 کار با متغیرهای رنگ VARIABLES - 02 Working with colour variables

نمایش نظرات

آموزش Figma جدید 2023: کلاس مبتدی تا حرفه ای در کمتر از 4 ساعت!
جزییات دوره
3h 18m
65
Skillshare (اسکیل شیر) Skillshare (اسکیل شیر)
(آخرین آپدیت)
374
- از 5
ندارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Christine Vallaure Christine Vallaure

UI/UX DESIGN + CODE

طراح UX/UI با علاقه به کد و بنیانگذار .

من در سطح بین‌المللی، داخلی و از راه دور روی پروژه‌هایی برای برندها، آژانس‌ها و استارت‌آپ‌های پیشرو کار کرده‌ام. من عمیقاً به ایجاد محصولاتی با فکر و زیبایی اهمیت می دهم. کارهای من از ایده‌های اولیه گرفته تا طرح‌ها، وایرفریم‌ها، نمونه‌سازی اولیه و تنظیم جلویی را شامل می‌شود.

علاوه بر پروژه‌های مشتری (بازدید برای منابع)، من در حال ساختن یک پلتفرم یادگیری آنلاین برای طراح UX/UI. من همچنین در مورد کد طراحی در رسانه و من می نویسم.

برای اطلاعات بیشتر درباره من لطفاً به من مراجعه کنید صفحه LinkedIn .