Figma جدید 2024: شروع کلاس مبتدی تا حرفه ای

شروع به کار با 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