• اول یه نگاه کلی به صفحه‌های پروژه‌ات می‌ندازیم و بخش‌های تکراری رو پیدا می‌کنیم تا ببینیم کدوما باید کامپوننت بشن.
• چند نمونه رو برای تمرین انتخاب می‌کنیم و مشخص می‌کنیم هرکدوم کجا استفاده می‌شه و چه نیازی رو جواب می‌ده.
• با مثال‌های پروژه خودت فرق کامپوننت اصلی و instance رو یاد می‌گیری و می‌بینی تغییر هرکدوم چه اثری روی صفحه‌ها می‌ذاره.
• اجزای یکی از نمونه‌ها رو جدا می‌کنیم، لایه‌هاش رو مرتب می‌کنی و اولین کامپوننت رو می‌سازی.
• اگه از قبل کامپوننت ساختی، همون نمونه رو بررسی می‌کنیم و جاهایی رو که ساختارش نیاز به اصلاح داره پیدا می‌کنیم.
• کامپوننت رو توی چند جای پروژه استفاده می‌کنی و می‌بینیم کدوم تغییرها باید از کامپوننت اصلی انجام بشن و کدوما فقط به همون instance مربوط می‌شن.

خروجی: اولین کامپوننت پروژه‌ات رو می‌سازی یا اصلاح می‌کنی و می‌دونی تغییر کامپوننت اصلی و instance چه فرقی دارن.

• روی کامپوننتی که ساختی، چیدمان اجزا رو با Auto Layout تنظیم می‌کنی تا تغییر اندازه و محتوا ساختارش رو به‌هم نریزه.
• با مثال‌های پروژه یاد می‌گیری کجا از Hug، Fill یا اندازه ثابت استفاده کنی و هر انتخاب چه اثری روی اجزای داخل کامپوننت می‌ذاره.
• فاصله‌ها، padding و تراز اجزا رو تنظیم می‌کنی و می‌بینیم Auto Layoutهای تو در تو چطور با هم کار می‌کنن.
• برای متن، آیکون و بخش‌های محتوایی مشخص می‌کنیم چی باید اندازه‌اش تغییر کنه، چی ثابت بمونه و کجا به حداقل یا حداکثر اندازه نیاز داریم.
• کامپوننت رو توی عرض‌ها و ترکیب‌های محتوایی مختلف امتحان می‌کنی و جاهایی رو که با تغییر اندازه به‌هم می‌ریزن اصلاح می‌کنی.

خروجی: کامپوننتی داری که رفتار اجزاش موقع تغییر اندازه و محتوا مشخصه و با Auto Layout درست کار می‌کنه.

• برای هر کامپوننت مشخص می‌کنیم چه کاری باید انجام بده و چه نیازهایی خارج از وظیفه‌اش هستن.
• یاد می‌گیری کامپوننت‌های Variational و Non-Variational رو از هم تفکیک کنی و تشخیص بدی کدوم تفاوت‌ها به یک کامپوننت مشترک مربوط می‌شن.
• برای هر کامپوننت حدود وظیفه SEM و حدود انتظارات SOC رو تعیین می‌کنی تا برای موارد اشتباه ازش استفاده نشه.
• بخش‌های ثابت، قابل‌تغییر و قابل‌استفاده‌مجدد رو مشخص می‌کنیم و تصمیم می‌گیری کدوم بخش باید یک کامپوننت مستقل باشه.
• با MonoRepo و MultiRepo آشنا می‌شی و براساس نیاز پروژه تصمیم می‌گیریم کامپوننت‌ها رو توی یک فایل نگه داریم یا بین چند فایل سازمان‌دهی کنیم.
• ساختار رو با چند کاربرد واقعی و یک نیاز تازه امتحان می‌کنیم تا ببینیم کجا قابل‌گسترشه و کجا باید کامپوننت جدا بسازی.

خروجی: مرز وظیفه و ارتباط کامپوننت‌ها رو مشخص می‌کنی و برای گسترش یا جداکردنشون دلیل داری.

• با مثال‌های پروژه خودت تفاوت variant، Boolean، text، instance swap و Slot رو یاد می‌گیری.
• براساس معماری جلسه قبل مشخص می‌کنیم کدوم تفاوت واقعاً به حالت یا نوع جدا نیاز داره و کدوم فقط یک بخش اختیاری یا محتوای قابل‌تعویضه.
• برای کامپوننت‌ها پراپرتی تعریف می‌کنی و یاد می‌گیری هر تغییر رو با ویژگی مناسب کنترل کنی، بدون اینکه برای همه چیز واریانت تازه بسازی.
• حالت‌های موردنیاز پروژه رو می‌سازی و ترکیب‌های تکراری، بی‌استفاده یا ناسازگار رو کنار می‌ذاری.
• کامپوننت‌ها، واریانت‌ها، ویژگی‌ها و مقدارهاشون رو با اسم‌های استاندارد مرتب می‌کنی تا پنل تنظیمات واضح و شفاف باشه.
• ویژگی‌ها رو روی instanceهای توی صفحه امتحان می‌کنی و می‌بینیم طراح بعدی می‌تونه بدون detach کردن یا overrideهای شکننده ازشون استفاده کنه یا نه.

خروجی: ویژگی‌ها و واریانت‌هایی می‌سازی که نیازهای پروژه رو پوشش می‌دن و استفاده ازشون واضح و شفافه.

• کامپوننت‌ها رو توی صفحه‌های پروژه‌ات، اندازه‌های مختلف و حالت‌هایی مثل جابه‌جایی یا نبودن آیکون امتحان می‌کنی.
• ایرادهایی رو که توی استفاده واقعی پیدا می‌کنیم اصلاح می‌کنی و برای مواردی که راه‌حل جدا می‌خوان، محل درست حلشون رو مشخص می‌کنیم.
• اسم کامپوننت‌ها و لایه‌ها رو مرتب می‌کنی تا خودت و بقیه طراح‌ها راحت توی Assets پیداشون کنین و توی UI Kit یا دیزاین‌سیستم ازشون استفاده کنین.
• روش استفاده، محدودیت‌ها و بخش‌های قابل‌تغییر رو مستند می‌کنی؛ اگه کتابخونه مشترک داری، اثر انتشار تغییرها روی نمونه‌های استفاده‌شده رو هم بررسی می‌کنیم.
• یک نیاز تازه رو روی یکی از کامپوننت‌ها بررسی می‌کنی و توضیح می‌دی چرا باید گسترشش بدی یا یک کامپوننت جدا بسازی.
• قاعده‌های گسترش و نگهداری رو می‌نویسیم تا بعد از دوره هم بتونی کامپوننت‌ها رو بدون پیچیدگی بی‌دلیل توسعه بدی.

خروجی: کامپوننت‌های امتحان‌شده و مستند داری و می‌دونی چطور توی UI Kit یا دیزاین‌سیستم نگهشون داری و گسترششون بدی.