فیگما +
سوال اصلی اینه: چرا فیگما؟! به همین سادگی اما مهم
مقدمه و آشنایی با نرم افزار فیگما ویدئو
این جلسه در مورد فیگما باهاتون صحبت میکنم
این که چرا فیگما رو برای طراحی رابط کاربری انتخاب میکنیم تو این قسمت جواب داده میشه 👈 این شروع یه داستان جذاب تو دوره ی فیگما پلاسه. مطمئن باش قراره مسیر فوق العاده ای رو با هم طی کنیم 🚀
مقدمه ای برای شروع به کار با این نرم افزار دوست داشتنی
راه اندازی فیگما ویدئو
خیلیا فک میکنن فیگما نرم افزاریه که به سختی میشه بهش دسترسی داشت. اما این طور نیست، فیگما انواع راه های ساده رو در اختیار ما میذاره تا بتونیم رایگان ازش استفاده کنیم
معرفی workspace و بخش های داخلی فیگما ویدئو
بهتون میگم هر بخش از نرم افزار چیه و چیکار میکنه
در این بخش موقع اش شده خیلی عملی با بخش های مختلف فیگما آشناتون کنم
Frame در فیگما ویدئو
در این بخش کار با فریم هارو به شما آموزش میدم
شورتکات های کیبورد ویدئو
واقعا دونستن شورتکات های کیبورد فیگما، سراعت رو بالا میبره و به راحتی میشه در فیگما به این شورتکات ها مسلط شد.
ترسیم اشکال هندسی ویدئو
ترسیم اشکال هندسی به روش های مختلف رو در این قسمت به شما یاد میدم
طراحی Wireframe ویدئو
ازینجا به بعد همه چیزو در قالب یک پروژه جمع و جور واقعی به شما آموزش میدم
Text ها در فیگما ویدئو
کار با ابزار و تنظیمات Text در فیگما در این قسمت آموزش داده میشه
گروه بندی لایه ها ویدئو
همیشه مدیریت کردن لایه ها از اهمیت ویژگی ای برخورداره! جلوتر بیشتر این مورد رو درک میکنین
تنظیمات Alignment و ترازبندی ویدئو
این قسمت به شما یاد میدم طرحتونو به راحتی ترازبندی کنین
Fill & Stroke در فیگما ویدئو
تنظیمات مربوط به رنگ Fill و Stroke
ایجاد استایل های مختلف ویدئو
کار با استایل ها خیلی رو سرعت شما تاثیر گذاره! این قسمت به شما در موردش میگم
ساخت Component ویدئو
کامپاننت ها میتونن کار رو برای شما مثل استایل ها به شدت راحت و جذاب کنن
Page در فیگما ویدئو
صفحات برای مدیریت پروژه خیلی لازم و ضروریه. این قسمت میریم سراغش
ارتباط بخش ها - Flowchart ویدئو
بعد از تموم شدن کار وایرفریم، خیلی جذاب میشه اگه طرح هارو با فلش به هم وصل کنیم. به این میگن ترسیم فلوچارت
Community ویدئو
کامیونیتی فیگما از قشنگترین امکانات فیگماست - دنیای فایلهای طراحی رایگان
Auto layout ویدئو
آشنایی با تنظیمات Auto layout
تنظیمات Nested Auto layout ویدئو
این قسمت دانشتون در مورد auto layout کمی عمیق تر میشه
تکمیل طراحی وایرفریم ویدئو
این بخش رو با تکمیل طراحی وایرفریم به پایان میرسونیم تا آماده بخش بعدی بشین
در این بخش موقع اش شده خیلی عملی با بخش های مختلف فیگما آشناتون کنم
مقدمات شروع طراحی Ui ویدئو
این قسمت برای شروع طراحی رابط کاربری آماده میشین
Frame Size ویدئو
اندازه فریم باید چه عددی باشد؟!
Grid layout ویدئو
تنظیم Grid Layout و استایل بندی آن
Color Style ویدئو
استایل های رنگی رو به شما معرفی میکنم و آموزش میدم چطور ازشون استفاده کنین
Text style ویدئو
اصول ایجاد استایل برای تایپوگرافی به دقت تو این جلسه برای شما تشریح میشه
Image placement ویدئو
روش های درج تصویر در فیگما رو بهتون میگم
Responsive ویدئو
در این قسمت خیلی موجز در مورد ریسپانسیو صحبت میکنم و شما رو برای یادگیری کامل اون آماده میکنم
Boolean Operation ویدئو
تنظیمات Boolean Operation در فیگما در این قسمت مورد بررسی قرار میگیره
ست کردن استایل ها روی متن ویدئو
حالا که استایل هارو ساختیم نوبت به این میرسه ازشون استفاده کنیم
ایجاد Component برای بخشNavbar ویدئو
نوبت به این میرسه برای بخش های مختلف کامپاننت ایجاد کنیم، این قسمت به سراغ نو بار میرم
Component Set ویدئو
ایجاد ٰVarient کامپاننت به روش Component Set رو به شما آموزش میدم
Next Step ویدئو
طراحی صفحه Calendar به صورت کاملا ریسپانسیو
تکمیل طراحی رابط کاربری ویدئو
طراحی صفحات Moods برای کامل شدن بخش یو آی
طراحی صفحه بلاگ ویدئو
در این بخش هم به سراغ آخرین صفحات رابط کاربری این پروژه میریم و با هم طراحیش میکنیم
تو این بخش به شما یاد میدم از آپشن هایی که فیگما برای پرزنت کارها داره استفاده کنین
Present & Preview ویدئو
بهتون یاد میدم با بخش های پرزنت و پریویو در فیگما کار کنین
Mirror phone ویدئو
با این آموزش یاد میگیرین طرحی که روی فیگما مشغول طراحیش هستین رو توی گوشیتون به صورت زنده ببینین
Over flow scrolling ویدئو
خیلی مواقع ما لازم داریم صفحات طولانی طراحی کنیم تو این قسمت بهت میگم چیکار کنی که کارت حرفه ای باشه
Share ویدئو
اگه برات سواله که چطوری باید کارامونو برای کارفرما و یا تیم دولوپ بفرستیم، این جلسه در موردش صحبت میکنم
Inspect ویدئو
حتما برات سواله که تیم دولوپ چه چیزی از فیگما میتونه بدست بیاره تا توی کدنویسی کمکش کنه. باید بگم همه چیز این جلسه بهش میپردازیم
Export - خروجی گرفتن در فیگما ویدئو
همیشه نیاز میشه از بعضی آبجکت ها در فیگما خروجی بگیریم این قسمت موضوعمون همینه
Exporting libraries ویدئو
تو این آموزش بهتون یاد میدم که چطوری میتونین از کامپاننت ها و استایل های یک پروژه توی بقیشون هم استفاده کنین
Thumbnail - تنظیم تامبنیل برای فایل ها ویدئو
تو این ویدیو بهتون یاد میدم بقیه چطوری برای فایلاشون تامبنیل میذارن
این بخش بهت در مورد این میگم که چطوری میتونی از امکانات پریمیوم فیگما به صورت رایگان استفاده کنی
Education plan ویدئو
تا 2 سال از فیگما رایگان استفاده کن
دونستن یه سری نکات خیلی مهمه تا بتونی بهترین عملکرد و کیفیت رو داشته باشی
Pixel & resulution ویدئو
شاید برای خیلیا بدیهی باشه اما خیلیای دیگه هنوز معنی دقیق پیکسل و تاثیری که روی کیفیت داره رو نمیدونن این ویدیو برای شماست
Point means ویدئو
تو این قسمت در مورد پوینت صحبت میکنیم. واحدی که کلی کار ما رو راحت میکنه
بهترین رزولوشن برای همه دستگاه ها ویدئو
تو این ویدیو به این میپردازیم که با توجه به مواردی که در مورد پوینت و پیکسل دونستیم چیکار کنیم که همه جا کارمون با کیفیت باشه
تو این بخش به سراغ رنگ ها میریم. خیلی مهمه که رنگ درستی انتخاب و استفاده کنیم
Color theory ویدئو
تو این ویدیوی کوتاه با ۵ تا از تئوری های رایج رنگ آشناتون میکنم
Color sources - از کجا رنگ پیدا کنیم؟ ویدئو
این قسمت به سراغ یه سری سایت خفن که میتونیم ازشون رنگ های خودمونو تهیه کنیم میرم
نام گذاری اصولی رنگ ها ویدئو
شاید خیلی پر اهمیت بنظر نرسه ولی نام گذاری رنگ ها بشدت دارای اهمیته.
استفاده صحیح از رنگ در طراحی ویدئو
حالا که بهتون گفتم رنگو از کجا بیاریم و چجور نامگذاری کنیم نوبت میرسه به این که چطور ازش استفاده کنیم
خیلی جمو جور بهتون میگم که چطور باید پروتوتایپ ایجاد کنیم
ایجاد Flow point ویدئو
هر وقت صحبت از پروتوتایپ میشه اولین چیزی که باید بدونیم، فلو هست. این قسمت به سراغش میریم
ایجاد interaction - پروتوتایپ ویدئو
این قسمت به شما میگم که با چه روش هایی میتونیم بخش های مختلف رو به هم متصل کنیم
Prototype panel ویدئو
وقتی یک اینتراکشن ایجاد میکنیم، پنل پروتوتایپ برای ما باز میشه. این قسمت بخش های این پنل رو بررسی میکنم
آپدیت ۱۵ آذر ۴۰۲
مباحث حرفه ای و پیشرفته Auto layout و Constraint به پنل دانشجویان اضافه شد.
نوبت این رسیده حرفه ای تر به سراغ آپشن های فیگما بریم و مجدد بررسیشون کنیم
Constraint ویدئو
همونطور که قبلا هم به شما در موردش گفتم با این ابزار کارهای زیادی میشه انجام داد حتما بعد از هر جلسه موارد گفته شده رو تمرین کنین
horizental & vertical constraints ویدئو
تو این قسمت کمی عمیق تر شما رو با کانسترینت افقی و عمودی آشنا میکنم
Constraints & grid ویدئو
به جاهای جالب کانسترینت رسیدیم. اینجا بهتون میگم چطوری میشه با کانسترینت و گرید ها یک تقسیم بندی باحال ایجاد کنین
Nested Grid Layout & constraints ویدئو
اینجا جالب میشه که میتونین برای هر فریم یک گرید درست کنین و بهش تنظیمات کانسترینت رو بدین!
Limitation of constrains ویدئو
آیا میتونیم همه جا از این تکنیک استفاده کنیم؟ این جلسه یکی از محدودیت های اونو میگم
Fix position ویدئو
بعضی چیزا تو صفحه باید ثابت باشن مثل هدر و نوبار. این جلسه بهتون میگم چطوری میشه اینکارو کرد
تو این بخش هر چیزی که برای طراحی Responsive بهش نیاز دارین رو به شما آموزش میدم
Auto layout intro ویدئو
حالا که با Constraint عمیقا آشنا شدین و دونستین باهاش چه کارهایی میتونیم انجام بدیم، نوبت به یادگیری عمیق Auto layout میرسه
Setting up auto layout ویدئو
شروع کار با تنظیمات Auto layout.
کجاها میشه از Auto layout استفاده کرد؟! ویدئو
این قسمت جاهایی که میتونین از این آپشن استفاده کنین رو به شما میگم
Auto layout menu ویدئو
به سراغ منوی این آپشن میریم و شما رو با بخش های اون آشنا میکنم
advanced auto layout menu ویدئو
حالا که با منوی این آپشن آشنا شدین، برگردیم و حرفه ای تر بهتون بگم توی این منو چخبرمونه!
Resizing ویدئو
ریسایز رو قبلا بهتون گفتم حالا نوبت به این رسیده تخصصی تر باهاش کار کنیم
Responsive card with auto layout ویدئو
بهتون یاد میدم که با اوتولی‌اوت یک کارت ریسپانسیو طراحی کنین
Responsive multi column card ویدئو
تو این آموزش چند قدم جلوتر میریم و یک کارت با چند ستون رو به صورت ریسپانسیو طراحی میکنیم
auto layout و کامپاننت ها ویدئو
قبلا به شما گفتم که در کامپاننت ها هم میتونیم از این آپشن استفاده کنیم. بریم سراغش
Wrap auto layput ویدئو
جادوی Auto layout رو تو این جلسه بهتون آموزش میدم. با دقت همراهم باشین
Nesting auto layout frames ویدئو
همونطور که بهتون گفتم ما میتونیم فریم های تو در تو داشته باشیم. این جلسه بهتون میگم چطوری میشه برای همشون Auto layout رو اعمال کنیم
Absolute positioning ویدئو
یکی از آپشن های فیگما اینه که میتونیم یک آبجکت رو از قلب Auto layout خارج کنیم و هر جا که دوست داشتیم قرارش بدیم. این جلسه در همین مورد صحبت میکنم
طراحی چند کارت پیچیده به صورت ریسپانسیو ویدئو
تو این جلسه چنتا کارت خفن و ریسپانسیو رو با هم طراحی میکنیم
طراحی یک صفحه کامل به صورت ریسپانسیو ویدئو
نوبت به طراحی یک صفحه کامل و ریسپانسیو رسیده همراهم باشین
محدودیت های Auto layout ویدئو
تو این جلسه در مورد محدودیت های Auto layout صحبت میکنم
آپدیت ۲۶ بهمن ۴۰۲
مباحث حرفه ای و پیشرفته BreakPoint ها،Local Variable ها، Component ها و دیزاین سیستم اختصاصی کاکتوس به پنل دانشجویان اضافه شد.
بریک پوینت ها نقاطی هستند که در آن ها تغییرات ریسپانسیو صورت میگیره
یک طرح برای همه صفحه نمایش‌ها مناسب نیست! ویدئو
چرا باید برای اندازه های مختلف صفحه نمایش طراحی کنیم
رویکردی که در مورد کامپاننت‌ها باید داشته باشیم ویدئو
گاهی یه جابه جایی ساده میتونه همه چیزو حل کنه!
بریک پوینت در دنیای CSS ویدئو
نحوه نوشتن کد سی اس اس بریک پوینت ها
از چه اندازه‌هایی برای بریک پوینت باید استفاده کرد ویدئو
بررسی اندازه های استاندارد برای بریک پوینت ها
تنظیم Breakpoint در فیگما ویدئو
شروع به کار با بریک پوینت ها
تست ریسپانسیو کامپاننت‌ها ویدئو
آموزش نحوه تست ریسپانسیو از کامپاننت ها
مستند نویسی در طراحی ریسپانسیو ویدئو
انتقال اصول طراحی به تیم های طراحی و توسعه از طریق مستندنویسی
استفاده از ورینت ها در بریک پوینت ویدئو
تکنیکی ساده برای رفع محدودیت‌های بریک پوینت در فیگما
بریک پوینت‌ها و گرید ویدئو
طراحی لی اوت های متنوع برای انواع صفحه نمایش
تایپوگرافی و بریک پوینت ها ویدئو
تایپوگرافی رو در بریک پوینت ها فراموش نکن
پلاگین کاربردی بریک پوینت ویدئو
معرفی پلاگین بریک پوینت
لوکال وریبل ها از امکانات جذاب فیگما برای مدیریت پروژه های طراحی رابط کاربریست.
معرفی لوکال وریبل‌ها ویدئو
آشنایی اولیه با لوکال وریبل ها
شروع به کار با Local Variable ویدئو
آموزش ساخت لوکال وریبل در فیگما
انواع Local Variable ویدئو
مدل های مختلف لوکال وریبل ها
ساخت Local Variable ویدئو
آموزش عملی ساخت لوکال وریبل ها
طراحی فریم با Local Variable ها ویدئو
طراحی صفحات بوسیله لوکال وریبل ها
نکات تکمیلی Local Variable ها ویدئو
استفاده حرفه‌ای از لوکال وریبل ها
در این بخش با تنظیمات کامپاننت‌ها بیشتر آشنا خواهید شد. این بخش پیش نیاز ورود به بخش دیزاین سیستم است.
Component variants ویدئو
مدل‌های مختلف از یک کامپاننت - Component variants
variants Property ویدئو
انواع پراپرتی‌ها در مدیریت کامپاننت
nested instance properties ویدئو
پراپرتی‌های نست شده درون یک کامپاننت
در این بخش با تمام دانشی که در طول دوره به دست آورده اید،شروع به طراحی یک دیزاین سیستم اختصاصی میکنیم.
Design systems ویدئو
معرفی و بررسی دیزاین سیستم های معروف
آشنایی با مفاهیم اولیه ویدئو
شروع به کار در طراحی دیزاین سیستم
Color Styles ویدئو
ساخت استایل های رنگی
Color Styles modes ویدئو
ساخت حالت‌های رنگی
انتقال رنگ ها به Local variable ویدئو
انتقال استایل های رنگی به لوکال وریبل
Typography styles ویدئو
ساخت استایل تایپوگرافی
Layout styles ویدئو
استایل‌های ترکیب‌بندی
More element styles ویدئو
استایل المان‌های بیشتر
طراحی کامپاننت - Badge ویدئو
بخشی از دیزاین سیستم برای نمایش اطلاعات به صورت سریع
طراحی کامپاننت - Button ویدئو
طراحی انواع مدل های دکمه در طراحی رابط کاربری
طراحی کامپاننت - Group button ویدئو
طراحی نمایش چنتایی دکمه ها در کنار یکدیگر
طراحی کامپاننت - Cards ویدئو
کامپاننت مربوط به کارت ها در دیزاین سیستم
طراحی کامپاننت - Constructive ویدئو
طراحی کانستراکتیو المنت برای نمایش اطلاعات اطلاعات به صورت لیستی
چند نکته قبل از این که ادامه بدیم ... ویدئو
چند نکته مهم که در ادامه باید در نظر گرفته شود
طراحی کامپاننت - Chip ویدئو
طراحی چیپ ها برای استفاده بعنوان تگ و... در طراحی رابط کاربری
طراحی کامپاننت - Split button ویدئو
دکمه های دوگانه که در دیزاین بخش های مختلف بسیار کاربردی است
طراحی کامپاننت - Input ویدئو
طراحی فیلد های ورودی داده در دیزاین سیستم
طراحی کامپاننت - ChekBox ویدئو
طراحی چک باکس در دیزاین سیستم
طراحی کامپاننت - Radio Button ویدئو
طراحی دکمه رادیو در دیزاین سیستم
آپدیت تو راهه! مباحثی که در آپدیت بعدی به دوره اضافه خواهند شد: بررسی تجربه کاربری (Ux) به صورت تخصصی | کیس استادی و پیشبرد یک پروژه واقعی و حرفه ای
