ساخت کامپوننت و نسخه در Figma
کامپوننت و نسخه در Figma پایهٔ سیستم طراحی و تحویل حرفه‌ای‌اند. از چیدمان خودکار تا ویژگی و نسخهٔ روشنخاموش، ساخت دکمه، فیلد و کارت را گام‌به‌گام یاد می‌گیرید.
چرا کامپوننت و نسخه در کار حرفه‌ای ضروری‌اند؟
قبل از کامپوننت هر دکمه کپی می‌شد و با یک تغییر رنگ برند باید صدها لایه دستی به‌روز می‌شد. کامپوننت در Figma نسخهٔ مادر است؛ نمونه‌ها در صفحات محصول از مادر تبعیت می‌کنند. نسخه این مدل را یک سطح بالاتر می‌برد: یک مجموعه با حالت‌ها و سبک‌های مختلف (اصلی و فرعی، پیش‌فرض و هاور و غیرفعال) در یک جا مدیریت میشود.
برای تیم Nova Lab و پروژه‌های نمونه‌کار، ساخت کامپوننت نشان می‌دهد مثل طراح محصول فکر می‌کنید، نه فقط صفحه‌ساز. برنامه‌نویس از ساختار کامپوننت برای نگاشت به جزء کد استفاده میکند. یکدستی فاصله، شعاع و تایپ در کل محصول بدون کامپوننت تقریباً ناممکن است.
نسخه در Figma با ویژگی کامپوننت (روشنخاموش، متن، تعویض نمونه) انعطاف زیادی دارد. هدف: کمترین تعداد مادر با پوشش بیشترین موقعیت — نه چهل کامپوننت جدا برای هر ترکیب حالت.
چیدمان خودکار: پیش‌نیاز کامپوننت مقیاس‌پذیر
قبل از تبدیل به کامپوننت، فریم را با چیدمان خودکار بسازید. دکمه: چیدمان افقی، فاصلهٔ داخلی ثابت، فاصله بین آیکون و برچسب، تراز وسط. فیلد: چیدمان عمودی برای برچسب و فیلد، یا افقی برای جستجو با آیکون.
رفتار تغییر اندازه مهم است: چسبیدن به محتوا برای دکمه‌ای که طول متن عوض میشود؛ پر کردن ظرف برای فیلد تمام‌عرض. حداقل و حداکثر عرض تا دکمه خیلی پهن نشود یا برچسب بد بریده نشود.
چیدمان تو در تو: کارت با چیدمان عمودی شامل ردیف سر (افقی: عنوان و آیکون)، بدنه و دکمه‌های پایین. هر سطح جدا تغییر اندازه می‌دهد — این ساختار مستقیم به فلکس در سی‌اس‌اس نگاشت میشود و تحویل را آسان میکند.
ساخت مجموعه دکمه با نسخه
شروع: یک دکمهٔ پیش‌فرض بسازید (چیدمان خودکار به‌علاوهٔ متن و آیکون اختیاری). تبدیل به کامپوننت. تکثیر نسخه برای حالت‌ها: هاور (تیره‌تر کردن پر)، فشرده، غیرفعال (شفافیت یا کم‌رنگ)، بارگذاری (تعویض با چرخ).
ترکیب نسخه‌ها: ویژگی «نوع» = اصلی | فرعی | شبح؛ ویژگی «اندازه» = کوچک | متوسط | بزرگ؛ ویژگی «حالت» = پیش‌فرض | هاور | غیرفعال. Figma ماتریس نسخه می‌سازد — فقط خانه‌هایی را طراحی کنید که واقعاً لازم است؛ بقیه را حذف کنید یا از مادر به ارث ببرید.
ویژگی روشنخاموش «آیکون دارد» برای نمایش یا پنهان کردن آیکون بدون تکثیر مجموعه. ویژگی متن روی برچسب برای بازنویسی در نمونه. تعویض نمونه برای آیکون چپ و راست یا چرخ. قرارداد نام: دکمه / اصلی / متوسط / پیش‌فرض — در پنل دارایی خوانا.
فیلد، چک‌باکس و کارت: الگوهای رایج
نسخهٔ فیلد: حالت = پیش‌فرض | تمرکز | خطا | غیرفعال؛ روشنخاموش اختیاری «متن راهنما دارد». حالت خطا حاشیهٔ قرمز به‌علاوهٔ متن راهنما؛ حلقهٔ تمرکز برای دسترس‌پذیری. برچسب لایهٔ متن جدا یا بخشی از کامپوننت — فاصلهٔ ثابت هشت پیکسل بین برچسب و فیلد.
چک‌باکس و کلید: روشنخاموش انتخاب‌شده؛ حالت غیرفعال. گروه چک‌باکس در فرم از فهرست نمونه استفاده کند، نه کپی جداشده. رادیو: نسخه برای انتخاب‌شده و نشده با منطق انحصاری در پیش‌نمونه.
کارت: نسخهٔ «ارتفاع» = تخت | برجسته؛ «تصویر دارد» روشنخاموش؛ جای محتوا با تعویض نمونه. کارت نباید همهٔ محتوا را در مادر قفل کند — متن نمونه در مادر، محتوای واقعی در بازنویسی نمونه.
ویژگی کامپوننت و مستند
در پنل راست برای هر کامپوننت توضیح بنویسید: کی استفاده شود، کی نشود، نکتهٔ دسترس‌پذیری. پیوند به راهنما در توضیحات Figma.
متغیرها (توکن طراحی) برای رنگ، فاصله و شعاع را به کامپوننت وصل کنید. وقتی توکن عوض شود همهٔ نمونه‌ها به‌روز می‌شوند. توکن معنایی مثل «رنگ / عمل / اصلی» بهتر از کد رنگ مستقیم روی پر است.
سازمان صفحه: جزءها / اتم / دکمه، مولکول / فیلد جستجو، ارگانیسم / سرصفحه. کتابخانهٔ منتشرشده برای تیم: انتشار سبک و کامپوننت. تاریخچهٔ نسخه برای تغییر شکسته.
نمونه، بازنویسی و ضدالگو
بازنویسی نمونه برای متن، رنگ موردی، لایهٔ پنهان مجاز است — اما جدا کردن نمونه فقط در مورد خاص. جدا کردن سیستم طراحی را می‌شکند. اگر بازنویسی تکراری دیدید، شاید نسخه کم دارید.
نسخهٔ بیش از حد: دویست خانه که صد و هشتاد تایش تکراری است. از کم شروع کنید: دو نوع در سه حالت، بعد گسترش دهید. نسخهٔ کم‌تر از حد: پانزده کامپوننت جدا دکمهٔ اصلی کوچک و بزرگ — نگهداری کابوس است.
تو در توی عمیق: کامپوننت داخل کامپوننت داخل کامپوننت بدون نام — تعویض نمونه سخت میشود. قاعده: حداکثر سه سطح مگر طراحی اتمی واقعاً لازم داشته باشد.
تحویل به توسعه و چک‌لیست نهایی
حالت توسعه: فاصلهٔ داخلی، فاصله، نام توکن را ببینید. نام کامپوننت باید به نام جزء کد نزدیک باشد (دکمه، فیلد). نام ویژگی نسخه برابر ویژگی در کد.
خروجی: آیکون به‌صورت SVG؛ جای تصویر مستند شود. رفتار واکنش‌گرا: توضیح دهید دکمه به محتوا می‌چسبد یا عرض ثابت دارد. حالت تاریک: حالت جدا در متغیرها یا ویژگی نسخه.
چک‌لیست Nova Lab قبل از انتشار: چیدمان خودکار، توکن، همهٔ حالت‌ها، تمرکز قابل دیدن، توضیح، نام‌گذاری، آزمون نمونه در صفحهٔ ماکت. یک ساعت نظم در Figma ساعت‌ها اشکال در توسعه را کم میکند.
سوالات متداول
مجموعهٔ کامپوننت و کامپوننت جدا چه فرقی دارد؟
مجموعه ظرف نسخههای مرتبط است (مثلاً همهٔ حالتهای دکمه). کامپوننت تکی یک مادر بدون ماتریس نسخه است. وقتی بیش از یک حالت معنادار دارید، مجموعه بسازید.
روشنخاموش یا نسخهٔ جدا برای آیکون؟
برای آیکون اختیاری، روشنخاموش «آیکون دارد» معمولاً تمیزتر است. برای آیکون متفاوت (فلش در برابر بهعلاوه)، تعویض نمونه روی جای آیکون بهتر است.
کتابخانه را با تیم چطور همگام کنم؟
کتابخانهٔ تیمی Figma را منتشر کنید. تیم بهروزرسانی را میپذیرد. برای تغییر نام شکسته، در توضیح تاریخچه بنویسید و در پیامرسان اطلاع دهید. در دورهٔ Nova Lab پروژهٔ کتابخانهٔ تیمی شبیهسازی میشود.
چیدمان خودکار با راستبهچپ فارسی چطور کار میکند؟
جهت فریم را راستبهچپ بگذارید یا از منطق آینه استفاده کنید. فاصلهٔ شروع و پایان را بهجای چپ و راست فکر کنید. آیکون انتهایی در راستبهچپ باید سمت چپ برچسب بیاید — با محتوای فارسی واقعی تست کنید.