دیزاین هندآف چیست؟ تحویل فایل Figma به فرانت‌اند

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

پیشنهادهای گوگل و جست‌وجوهای نزدیک معمولاً همین نیت را دارند: «دیزاین هندآف چیست»، «تحویل فایل فیگما به برنامه نویس»، «Dev Mode فیگما چیست»، «توکن فاصله و رنگ»، «وضعیت دکمه UI»، «Inspect فیگما» و «چرا فرانت بازکاری می‌شود». در این راهنما تعریف، فاصله و توکن، حالت دکمه و فرم، Dev Mode، و اثر روی بازکاری را می‌نویسیم. خودِ ابزار را در فیگما چیست ببینید، منبع مشترک قواعد را در سیستم دیزاین چیست، و اجرا را در خدمات UI/UX روبینش.

Dev Mode in Figma gives you everything you need to navigate design files and transform designs into code.

دیزاین هندآف چیست و چه چیزی نیست؟

دیزاین هندآف تحویل مشخصات قابل ساخت است: فریم آماده، دارایی صادرشدنی، نام لایه، رفتار تعامل، و یادداشت آنچه در این اسپرینت نیست. اگر فایل زیباست اما حالت خطا، فوکوس کیبورد و متن واقعی فارسی ندارد، هنوز هندآف نکرده‌اید؛ آرشیو ساخته‌اید. Inspect فاصله را نشان می‌دهد؛ زمینه را نه. زمینه یعنی این فاصله از توکن می‌آید یا استثنای موقت صفحهٔ کمپین است.

هندآف جلسهٔ تور لایه‌ها برای کارفرما نیست. ذی‌نفع مسیر را در پروتوتایپ می‌بیند؛ توسعه مشخصات را در Dev Mode و تیکت می‌خواند. قاطی کردن این دو جلسه، رنگ را به بحث پیکسل تبدیل می‌کند و اسکوپ گم می‌شود. مسیر کار را اول در یوزر فلو چیست یکی کنید، بعد همان فریم را برای ساخت علامت بزنید. پروتوتایپ تعامل را نشان می‌دهد؛ هندآف قرارداد ساخت است. نمونهٔ قابل کلیک را در راهنمای پروتوتایپ جدا نگه دارید.

خروجی مفید یک چک‌لیست کوتاه است نه یک PDF چهل‌صفحه‌ای. کدام صفحه در اسکوپ است، کدام دکمه خارج است، تصویر با چه فرمت و اندازه صادر می‌شود، و انیمیشن ضروری است یا تزئینی. اگر این چهار مورد در تیکت نباشد، فرانت حدس می‌زند و بازبینی به جنگ سلیقه تبدیل می‌شود.

فاصله و توکن را چطور تحویل دهیم؟

عدد خام در بیست صفحه، فردا وقتی برند عوض شود شکار دستی می‌شود. توکن فاصله و رنگ نام نقش است: space.md یا color.action.default، نه «۱۶ پیکسل آبی». در هندآف بنویسید کدام مقدار از توکن می‌آید و کدام استثناست. استثنا را محدود و تاریخ‌دار کنید وگرنه سیستم در همان اسپرینت می‌میرد.

Auto Layout در فیگما وقتی به توکن وصل باشد، Inspect برای فرانت خوانا می‌شود. لایهٔ بدون نام و گروه تو در تو، Dev Mode را به باستان‌شناسی تبدیل می‌کند. اگر فرانت از قبل کتابخانه دارد، نام‌ها را با همان کتابخانه هم‌خوان کنید. ساختن زبان موازی در فیگما اختلاف را بیشتر می‌کند. جزئیات هرم توکن را در مقالهٔ سیستم دیزاین بخوانید؛ اینجا قرارداد همین صفحه است.

نسخهٔ موبایل را جدا علامت بزنید. کوچک کردن دسکتاپ هندآف نیست. فاصلهٔ انگشت، طول برچسب فارسی و جای CTA ممکن است عوض شود. اگر فقط فریم دسکتاپ Ready for dev باشد، اسپرینت موبایل دوباره حدس می‌شود.

وضعیت دکمه و فرم را از قلم نیندازید

دکمهٔ پیش‌فرض کافی نیست. پیش‌فرض، هاور، فوکوس، غیرفعال، بارگذاری و فشار داده شده باید دیده شوند — حداقل در کامپوننت، اگر نه در هر صفحه. فرم هم همین است: خالی، پر، خطا کنار فیلد، در حال ارسال، موفقیت. متن خطا باید راه بدهد نه سرزنش. اگر فقط حالت خوش‌بینانه تحویل شود، توسعه پیام را از خودش می‌سازد و لحن برند می‌شکند.

مثال عمودی کمک می‌کند حدس کم شود. فرم مشاورهٔ حقوقی باید حوزه و پیام بعد از ارسال را نشان دهد، نه شعار برد؛ مسیر را در طراحی سایت وکالت ببینید. رزرو رستوران ظرفیت پر و تأیید را می‌خواهد؛ ویترین را در طراحی سایت رستوران جدا نگه دارید. احراز صرافی وضعیت مدرک را از ثبت‌نام جدا می‌کند — طراحی سایت صرافی. این‌ها نمونهٔ حالت‌اند نه تضمین رتبه.

Dev Mode چه کمکی می‌کند و چه چیزی را نمی‌سازد؟

Dev Mode فضای خواندن فایل برای توسعه است: مشخصات، مقایسهٔ نسخهٔ فریم، دارایی قابل صدور، و در صورت آماده‌سازی طراح، وضعیت Ready for dev. کد تولیدشده را کپی کور نکنید؛ نقطهٔ شروع است نه محصول. توکن وقتی در متغیر فیگما باشد در پنل دیده می‌شود. اگر طراح همه چیز را با رنگ خام کشیده، Dev Mode همان حدس را زیباتر نشان می‌دهد.

نشانهٔ Ready for dev را جدی بگیرید وگرنه فرانت فریم پیش‌نویس را می‌سازد. حاشیه و لینک تیکت را روی همان فریم بگذارید. افزونهٔ ویرایشگر کد کار جابه‌جایی را کم می‌کند اما جلسهٔ اسکوپ را حذف نمی‌کند. بازبینی بعد از پیاده‌سازی بخشی از هندآف است: فوکوس، خطا، RTL و دسترسی معمولاً از یک پیکسل مهم‌ترند. مرز نقش را در تفاوت UI و UX بخوانید اگر جلسه هنوز روی گرادیان است.

چرا هندآف خوب بازکاری را کم می‌کند؟

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

هندآف وعدهٔ صفر باگ نیست. محدودیت مرورگر و دادهٔ واقعی اختلاف می‌سازد. توافق کنید کدام انحراف عمدی است و کدام باید برگردد. تیم کوچک می‌تواند همین قرارداد را در یک صفحهٔ کوتاه نگه دارد؛ ویکی طولانیِ مرده بدتر از پنج گلوله در تیکت است.

اشتباهات رایج در دیزاین هندآف

• ارسال لینک فایل بدون فریم نهایی
• فقط مسیر موفق؛ بدون خطا و بارگذاری
• رنگ و فاصلهٔ خام به‌جای توکن
• لایهٔ بی‌نام و گروه تو در تو
• فریم دسکتاپ به‌جای موبایل
• کپی کور CSS از Inspect
• عوض کردن فایل بدون خبر به تیکت

چک‌لیست قبل از Ready for dev

1. فریم اسکوپ و فریم خارج از اسکوپ جدا شده‌اند.
2. توکن فاصله و رنگ به لایه وصل است یا استثنا نوشته شده.
3. وضعیت دکمه و فرم دیده می‌شود.
4. متن فارسی واقعی طول دکمه را خراب نمی‌کند.
5. دارایی با فرمت و اندازه صادر می‌شود.
6. نسخهٔ موبایل اولویت جدا دارد.
7. تیکت به همان فریم و نسخه وصل است.
8. بازبینی بعد از پیاده‌سازی در تقویم است.

جمع‌بندی: قرارداد بسازید، نه گالری

دیزاین هندآف چیست؟ تحویل مشخصات قابل ساخت از طراحی به فرانت، با توکن، حالت و اسکوپ. Dev Mode عدد می‌دهد؛ قرارداد زمینه می‌دهد. فاصلهٔ نام‌گذاری‌شده و دکمهٔ کامل، بازکاری حدسی را کم می‌کند — نه تضمین زمان یا رتبه.

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