تبدیل فیگما به HTML: از طرح تا کد، قدم به قدم

تبدیل فیگما به HTML و CSS چطور انجام می‌شود؟ مراحل واقعی کار، ابزارها، اشتباه‌های رایج و نکته‌هایی که خروجی را پیکسل‌پرفکت و سریع می‌کند.

طرح فیگما هر چقدر هم دقیق باشد، تا وقتی به کد تبدیل نشده فقط یک تصویر است. تبدیل فیگما به HTML یعنی همان تصویر را به صفحه‌ای زنده تبدیل کنیم که روی هر اندازه‌ی صفحه درست نمایش داده شود، سریع بالا بیاید و بعداً هم بشود راحت تغییرش داد.

در این نوشته مسیری را که خودم برای هر پروژه طی می‌کنم توضیح می‌دهم؛ از لحظه‌ای که لینک فیگما می‌رسد تا وقتی کد تحویل داده می‌شود.

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

پلاگین‌ها و ابزارهایی هستند که ادعا می‌کنند با یک کلیک فیگما را به کد تبدیل می‌کنند. برای یک نمونه‌ی اولیه شاید جواب بدهند، ولی خروجی‌شان معمولاً این مشکل‌ها را دارد:

• عرض و ارتفاع‌ها ثابت و بر حسب پیکسل است، پس صفحه در موبایل به هم می‌ریزد.
• ساختار HTML پر از div تودرتو است و برای سئو و دسترس‌پذیری ارزشی ندارد.
• کلاس‌ها اسم‌های بی‌معنی دارند و توسعه‌ی بعدی را سخت می‌کنند.
• حالت‌های هاور، فوکوس و انیمیشن‌ها پیاده نمی‌شوند.

یعنی کد «شبیه» طرح است، ولی سایت واقعی نیست. فرق کار دستی همین‌جاست.

قدم ۱: خواندن طرح، قبل از نوشتن حتی یک خط کد

اولین کار باز کردن فایل و گشتن در همه‌ی فریم‌هاست. دنبال این چیزها هستم:

• سیستم طراحی: رنگ‌ها، فونت‌ها، اندازه‌ی متن‌ها و فاصله‌های تکرارشونده. اگر طراح از Variables و Styles استفاده کرده باشد کار خیلی راحت‌تر است.
• کامپوننت‌ها: دکمه، کارت، فرم و هر چیزی که چند بار تکرار شده.
• نسخه‌های مختلف: آیا طرح موبایل و تبلت هم دارد؟ اگر نه، باید رفتار هر بخش را در اندازه‌های کوچک خودم طراحی کنم.
• جزئیات پنهان: حالت هاور، منوی باز، فرم خطادار، اسلایدر و هر چیزی که فقط در یک فریم کنار صفحه آمده.

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

قدم ۲: تبدیل سیستم طراحی به متغیرهای CSS

قبل از ساختن صفحه‌ها، پایه را می‌سازم. رنگ‌ها، فونت‌ها، فاصله‌ها و شعاع گوشه‌ها به متغیرهای CSS تبدیل می‌شوند:

:root {
  --color-primary: #2b1a12;
  --color-accent: #e8743b;
  --radius-md: 14px;
  --space-section: clamp(64px, 10vw, 120px);
}

این کار دو فایده دارد. اول اینکه کل سایت یکدست می‌ماند. دوم اینکه اگر فردا رنگ اصلی برند عوض شد، فقط یک خط تغییر می‌کند.

برای اندازه‌ی متن‌ها از clamp() استفاده می‌کنم تا تیترها بین موبایل و دسکتاپ نرم کوچک و بزرگ شوند و لازم نباشد برای هر اندازه‌ی صفحه جدا تنظیمشان کنم.

قدم ۳: ساختار HTML معنایی

هر بخش طرح باید تگ درستش را بگیرد: header، nav، main، section، article و footer. تیترها به ترتیب درست از h1 تا h3 می‌آیند و فقط یک h1 در هر صفحه وجود دارد.

این فقط وسواس نیست. گوگل از همین ساختار برای فهمیدن محتوای صفحه استفاده می‌کند و صفحه‌خوان‌ها هم با همین ساختار صفحه را برای کاربران نابینا می‌خوانند.

قدم ۴: ساختن بخش‌ها، از موبایل به بالا

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

چند نکته که خیلی جاها رعایت نمی‌شود:

• تصاویر width و height مشخص می‌گیرند تا موقع بارگذاری صفحه نپرد.
• تصاویر پایین صفحه با loading="lazy" دیرتر بارگذاری می‌شوند.
• دکمه‌ها و لینک‌ها حالت فوکوس قابل‌دیدن دارند تا با کیبورد هم بشود از سایت استفاده کرد.

قدم ۵: جاوااسکریپت، فقط هر جا لازم است

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

انیمیشن‌ها هم تنظیم «کاهش حرکت» سیستم‌عامل کاربر را رعایت می‌کنند. کسی که حرکت زیاد اذیتش می‌کند، نسخه‌ی آرام سایت را می‌بیند.

قدم ۶: مقایسه با طرح، پیکسل به پیکسل

این مرحله همان چیزی است که خروجی را از «تقریباً شبیه» به «دقیقاً مثل طرح» می‌رساند. تصویر طرح را روی صفحه‌ی ساخته‌شده می‌گذارم و در حالت Difference مقایسه می‌کنم. هر جا اختلافی باشد، رنگ‌ها به هم نمی‌خورند و فوراً دیده می‌شود.

فاصله‌ها، اندازه‌ی فونت، ارتفاع خط و جای آیکون‌ها همه این‌جا تنظیم نهایی می‌شوند.

قدم ۷: سرعت و کیفیت

قبل از تحویل، صفحه را با Lighthouse می‌سنجم. هدف حداقل ۹۰ در هر چهار بخش سرعت، دسترس‌پذیری، استاندارد کد و سئوست. معمولاً این‌ها بیشترین اثر را دارند:

• فشرده‌سازی تصاویر و استفاده از فرمت WebP یا AVIF
• بارگذاری فقط زیرمجموعه‌ی لازم فونت‌ها
• حذف CSS و JS استفاده‌نشده

خروجی نهایی چه شکلی است؟

در پایان یک پوشه تحویل می‌گیری شامل فایل‌های HTML، یک فایل CSS مرتب، فایل JS و پوشه‌ی تصاویر و فونت‌ها. این خروجی روی هر هاستی اجرا می‌شود و اگر بعداً بخواهی، به راحتی به قالب وردپرس یا هر فریم‌ورک دیگری تبدیل می‌شود.

چقدر طول می‌کشد و هزینه‌اش چقدر است؟

یک لندینگ معمولاً ۲ تا ۴ روز کاری زمان می‌برد و هر صفحه‌ی داخلی حدود یک روز به آن اضافه می‌کند. قیمت دقیق به تعداد صفحه‌ها و گزینه‌هایی مثل انیمیشن یا دوزبانه بودن بستگی دارد. می‌توانی همین حالا در ماشین‌حساب تعرفه ببینی پروژه‌ات چقدر می‌شود.

اگر طرحت آماده است ولی مطمئن نیستی برای تحویل به برنامه‌نویس کامل است، چک‌لیست آماده‌سازی فایل فیگما را ببین.