کامپوننت و المان ادوبی XD؛ قطعات قابل استفاده مجدد UI

کامپوننت در ادوبی XD قطعه اصلی UI است که نمونه‌هایش در صفحات تکرار می‌شوند: دکمه، اینپوت، چک‌باکس، تب، مودال و کارت. دسته «کامپوننت و المان» زیرمجموعه XD در نگارچی برای ساخت سیستم طراحی داخل XD است تا به‌جای کشیدن دوباره هر کنترل، از قطعات استاندارد استفاده کنید.

وقتی دکمه اصلی را عوض می‌کنید، نمونه‌ها هم به‌روز می‌شوند و یکدستی محصول حفظ می‌شود. این بخش برای تیم‌هایی است که به Design System سبک داخل XD نیاز دارند، نه لزوماً یک قالب کامل اپ از قبل صفحه‌بندی‌شده.

چه زمانی این دسته را انتخاب کنیم؟

  • شروع سیستم طراحی: تعریف دکمه، رنگ و وضعیت‌ها.
  • سرعت صفحه‌آرایی: درگ کردن المان به‌جای رسم از صفر.
  • هماهنگی چند صفحه: جلوگیری از انحراف استایل.
  • تحویل به توسعه: نام‌گذاری تمیز کامپوننت‌ها.

پس از دانلود، فایل را به‌عنوان کتابخانه یا سورس کامپوننت باز کنید، نام‌گذاری را با زبان تیم خود هماهنگ کنید و وضعیت‌های hover/disabled را قبل از استفاده گسترده کامل کنید. اگر به صفحه کامل اپ نیاز دارید به قالب اپلیکیشن XD بروید.

ساخت Design System سبک با کامپوننت XD

اول دکمه، اینپوت و رنگ را قفل کنید بعد صفحه بسازید؛ برعکسش بدهی طراحی می‌آورد. کامپوننت‌ها را با نام‌گذاری واضح مثل Button/Primary/Large بچینید تا تیم سردرگم نشود. وضعیت‌های غیرفعال و خطا را از همان ابتدا بسازید. تغییرات Master را در یک فایل منبع نگه دارید و صفحات محصول را به آن لینک کنید.

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

قانون‌گذاری کامپوننت قبل از رشد فایل

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

هر دو هفته یک‌بار فایل منبع را پاکسازی کنید و نمونه‌های Detach‌شده را دوباره وصل کنید. این نظم کوچک، سرعت طراحی را در میان‌مدت چند برابر می‌کند و دسته کامپوننت را از یک پوشه شلوغ به سیستم واقعی UI ارتقا می‌دهد.

جمع‌بندی

کامپوننت و المان XD مصالح سیستم UI شماست. قطعات را وارد پروژه کنید، توکن رنگ و فونت را اعمال کنید و فایل خام را توزیع مجدد نکنید.