لطفا جهت اطلاع از آخرین دوره ها و اخبار سایت در
کانال تلگرام
عضو شوید.
آموزش 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
افزودن فریم به فایل ما
چند میانبر مفید
نمای کلی فایل طراحی
افزودن اشکال و رنگ
منوی اندازه – دستکاری اشکال و قابها
تراز کردن، مرتب کردن، و اندازه گیری
افزودن و کار با متن
قاب های تودرتو - ابرقدرت Figma
قابها در مقابل گروهها
طراحی با قاب های تو در تو
شبکه های قابل استفاده مجدد با سبک
انجمن و افزونه های Figma
افزودن تصاویر
طراحی در Figma
مقیاسسازی در Figma
معرفی اجزاء
استفاده مجدد از عناصر با مؤلفهها و نمونهها
نمونه های نادیده گرفته شده
چه چیزی را نادیده بگیریم و چه چیزی را نپذیریم
برگرداندن مؤلفهها و لغوها
اجزای Nest
مجموعه های مؤلفه با انواع
انتقال اجزاء به صفحه خودشان
سازماندهی اجزا
معرفی ویژگی های جزء پیشرفته
متغیرها و سبکها
مقدمه ای بر متغیرها
کار با متغیرهای رنگ
سازماندهی با مجموعه ها و گروه های متغیر
متغیرهای اندازه و فاصله
و سبکها چطور؟
تایپوگرافی و سبک ها
مستندسازی متغیرها و سبکها
طراحی واکنشگرا
طرح بندی خودکار چیست؟
افزودن طرحبندی خودکار
جزئیات و متغیرهای طرح بندی خودکار
تغییر اندازه تنظیمات
خودکار یا فاصله بین
طرح بندی خودکار تودرتو با سیستم
موقعیت یابی مطلق
صفحات طرح بندی خودکار
محدودیتها در Figma
محدودیتها و شبکهها
از چه اندازه قاب باید استفاده کنم؟
نمونه اولیه اولیه
نمونه سازی در Figma
تنظیم رفتار اسکرول
اتصال صفحه نمایش
منوی کشویی با همپوشانی
انواع انیمیشن
مولفه های تعاملی
Figma Mirror – پیش نمایش در دستگاه شما
اشتراک گذاری با طراحان و توسعه دهندگان دیگر
اشتراک گذاری و دعوت از دیگران
تنظیم تصویر کوچک
کتابخانههای تیم مشترک در Figma
راه اندازی یک کتابخانه تیم مشترک
اتصال به کتابخانه مشترک تیم
بهروزرسانی کتابخانههای تیم مشترک
اشتراک گذاری طرح، اجزاء، سبک ها و متغیرها
حالت برنامهنویس: اشتراکگذاری با برنامهنویس
از Figma برای ارتقای چشم انداز خود در طراحی UI، رابط کاربری، طراحی تجربه کاربری، طراحی UX و طراحی وب استفاده کنید، و مسیر شما را برای ایمن کردن شغلی که با UX/UI Design در Figma کار می کند، تسهیل می کند.
میتوانید با استفاده از فایل اصلی من، برنامهای کوچک ایجاد کنیم:
برای دانلود فایل های تمرین ,
فایل باید مستقیماً در حساب 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
من در سطح بینالمللی، داخلی و از راه دور روی پروژههایی برای برندها، آژانسها و استارتآپهای پیشرو کار کردهام. من عمیقاً به ایجاد محصولاتی با فکر و زیبایی اهمیت می دهم. کارهای من از ایدههای اولیه گرفته تا طرحها، وایرفریمها، نمونهسازی اولیه و تنظیم جلویی را شامل میشود.
علاوه بر پروژههای مشتری (بازدید برای منابع)، من در حال ساختن یک پلتفرم یادگیری آنلاین برای طراح UX/UI. من همچنین در مورد کد طراحی در رسانه و من می نویسم.
برای اطلاعات بیشتر درباره من لطفاً به من مراجعه کنید صفحه LinkedIn .
نمایش نظرات