‏از فیگما تا کد: نقشه‌ی راهی برای دنیای شلوغ AI

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

لایه‌ی اول MCP‌ـه (Model Context Protocol)، یعنی همون سیمی که Claude رو به فیگما وصل می‌کنه. نویسنده MCP رو به USB-C تشبیه می‌کنه: یه استاندارد واحد که Claude رو به فیگما، Notion یا هر ابزار دیگه وصل می‌کنه تا رنگ، فاصله‌گذاری و فونت واقعی طرح رو ببینه، نه فقط یه اسکرین‌شات. مشکلی که می‌مونه اینه که MCP فقط ظاهر طرح رو می‌بینه، نه کدهای واقعی پروژه، برای همین هر بار یه دکمه‌ی شبیه‌سازی‌شده‌ی تازه می‌سازه، نه همون کامپوننت واقعی تو کدبیس.

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

لایه‌ی سوم اسکیله، یه پوشه با یه SKILL.md که کار تکراری رو دقیقاً به یه شکل مشخص هر بار انجام می‌ده - مثل یه کارت دستور پخت به‌جای توضیح شفاهی هر شب. لایه‌ی چهارم و مهم‌ترین‌شون mapping‌ـه که تو فیگما بهش Code Connect می‌گن: اینجا رسماً می‌گی این دکمه‌ی تو فیگما دقیقاً همون کامپوننت واقعیه تو کدبیس (مثلاً تو Storybook). این تنها لایه‌ایه که واقعاً طراحی و کد رو به هم وصل می‌کنه، ولی نیاز به تیم توسعه و نگهداری مداوم داره.

نویسنده می‌گه باید فایل فیگما رو اول تمیز کرد - رنگ‌ها به‌صورت استایل یا variable، فاصله‌ها با auto-layout - چون هر لایه فقط با ورودی تمیز خوب کار می‌کنه. بعدش پیشنهاد می‌ده هر تیم بسته به اندازه‌ش لایه‌ها رو انتخاب کنه: یه طراح تنها فقط به MCP و یه فایل مارک‌داون نیاز داره؛ یه تیم کوچیک یه اسکیل و یه عادت انسانی برای هماهنگی هم اضافه می‌کنه؛ ولی فقط تیم‌های صاحب یه سیستم طراحی جدی باید سراغ mapping و Code Connect برن.

نویسنده در مورد ابزارهایی مثل Lovable، v0 و Bolt هم می‌گه که ظاهراً کل این استک رو دور می‌زنن، ولی درواقع فقط لایه‌ی اول و شاید کمی از دوم رو دارن و mapping رو کلاً ندارن، برای همین بازم دچار drift می‌شن. به گفته‌ی خودش این ابزارها برای امتحان سریع یه ایده یا ساخت یه چیز یک‌بارمصرف عالی‌ان، نه برای محصولی که باید مقیاس بگیره و پایدار بمونه.

نکات کلیدی:

• MCP اولین لایه‌ست: سیمی که Claude رو به فیگما وصل می‌کنه تا رنگ و فاصله‌ی واقعی طرح رو ببینه
• فایل مارک‌داون مثل CLAUDE.md قانون‌ها و دلیل تصمیم‌های طراح رو حفظ می‌کنه، ولی خودبه‌خود اجباری نیست
• اسکیل کار تکراری رو استاندارد می‌کنه؛ mapping (مثل Code Connect) تنها لایه‌ایه که واقعاً طراحی و کد رو یکی می‌کنه
• تیم‌ها باید لایه‌ها رو متناسب با اندازه‌ی خودشون انتخاب کنن، نه کپی از یه تیم بزرگ‌تر