قبل از اینکه طرح فیگما را برای کدنویسی بفرستی، این ۱۲ مورد را چک کن تا کار سریع‌تر، ارزان‌تر و دقیق‌تر انجام شود.
خیلی از تأخیرها و اختلاف‌های بین طرح و سایت نهایی، از خود کد نیست؛ از فایلی است که ناقص یا نامرتب به دست برنامه‌نویس رسیده. اسم این مرحله در دنیای طراحی «هندآف» است و چند دقیقه وقت گذاشتن رویش، چند روز از پروژه را جلو می‌اندازد.
این چک‌لیست همان چیزهایی است که وقتی یک فایل فیگما به دستم می‌رسد، اول دنبالشان می‌گردم.
ساختار فایل
۱. صفحه‌ها و فریم‌ها اسم درست داشته باشند
«Frame 1284» و «Copy of Desktop» هیچ کمکی نمی‌کنند. اسم‌هایی مثل «Home / Desktop» و «Home / Mobile» کافی است تا معلوم باشد هر فریم چیست و نسخه‌ی نهایی کدام است.
۲. نسخه‌های قدیمی جدا شوند
اگر چند نسخه از یک صفحه داری، نسخه‌ی نهایی را در یک صفحه‌ی جدا مثل «Ready for dev» بگذار و بقیه را به صفحه‌ی «Archive» ببر. بزرگ‌ترین اشتباه‌ها وقتی پیش می‌آید که برنامه‌نویس نسخه‌ی اشتباه را کد کند.
۳. از Auto Layout استفاده شود
فریم‌هایی که با Auto Layout ساخته شده‌اند، دقیقاً می‌گویند فاصله‌ها چقدر است و بخش‌ها وقتی صفحه کوچک می‌شود چه رفتاری دارند. این تقریباً همان چیزی است که در CSS با Flexbox ساخته می‌شود.
سیستم طراحی
۴. رنگ‌ها و فونت‌ها Style یا Variable باشند
وقتی رنگ‌ها به‌صورت Variable تعریف شده باشند، مستقیم به متغیرهای CSS تبدیل می‌شوند. اگر هر دکمه رنگ دستی خودش را داشته باشد، احتمال اینکه چند درجه‌ی کمی متفاوت از یک رنگ در طرح باشد زیاد است.
۵. کامپوننت‌ها واقعاً کامپوننت باشند
دکمه، کارت، فیلد فرم و آیتم منو باید Component باشند و نسخه‌هایشان (Variants) کنار هم. این‌طوری معلوم است دکمه‌ی اصلی، دکمه‌ی دوم و دکمه‌ی غیرفعال چه شکلی‌اند.
۶. فاصله‌ها از یک مقیاس پیروی کنند
اگر فاصله‌ها ۸، ۱۶، ۲۴ و ۳۲ پیکسل باشند، کد هم مرتب و قابل پیش‌بینی می‌شود. فاصله‌هایی مثل ۱۷ و ۲۳ پیکسل معمولاً اتفاقی‌اند و برنامه‌نویس نمی‌داند باید دقیقاً پیاده‌شان کند یا گردشان کند.
حالت‌ها و رفتارها
۷. حالت‌های تعاملی طراحی شده باشند
هاور، فوکوس، فعال و غیرفعال برای دکمه‌ها و لینک‌ها. برای فرم‌ها: حالت خطا، پیام موفقیت و حالت در حال ارسال.
۸. نسخه‌ی موبایل، یا حداقل توضیح رفتار
بهترین حالت داشتن طرح موبایل است. اگر نداری، کنار بخش‌های پیچیده یک یادداشت بگذار: «این سه کارت در موبایل زیر هم می‌آیند» یا «این جدول در موبایل اسکرول افقی دارد».
۹. انیمیشن‌ها توضیح داده شوند
اگر بخشی باید با انیمیشن ظاهر شود، یک پروتوتایپ یا حتی یک جمله توضیح کافی است: «کارت‌ها از پایین با محو شدن وارد می‌شوند».
دارایی‌ها
۱۰. تصاویر با کیفیت اصلی در فایل باشند
تصویری که در فیگما کوچک و فشرده شده، در خروجی هم بی‌کیفیت می‌شود. تصاویر اصلی را در فایل بگذار یا جدا بفرست.
۱۱. آیکون‌ها وکتور باشند
آیکون‌ها باید SVG خروجی بگیرند، نه PNG. اگر از یک مجموعه‌ی آیکون آماده استفاده کرده‌ای، اسمش را بگو.
۱۲. فونت‌ها مشخص باشند
اسم دقیق فونت و وزن‌هایی که استفاده شده را بنویس. اگر فونت تجاری است، فایل نسخه‌ی وبش لازم است. برای فونت‌های فارسی این مورد خیلی مهم است؛ نسخه‌ی وب فونت با نسخه‌ی دسکتاپ فرق دارد.
دسترسی به فایل
لینک فیگما با دسترسی View کافی است. حالت Dev Mode اگر در دسترس باشد کار را دقیق‌تر می‌کند، ولی ضروری نیست.
اگر همه‌ی این‌ها را نداری؟
نگران نباش. لازم نیست فایل بی‌نقص باشد؛ بخش زیادی از کار من مرتب کردن همین چیزهاست. ولی هر مورد از این لیست که رعایت شده باشد، یعنی سؤال کمتر، زمان کمتر و نتیجه‌ی دقیق‌تر.
اگر فایلت آماده است، قیمت و زمان تحویل را همین حالا ببین. اگر هم می‌خواهی بدانی بعد از ارسال فایل چه اتفاقی می‌افتد، راهنمای تبدیل فیگما به HTML را بخوان.