آموزش اتصال فیگما به کلاد؛ راهنمای ساده برای همه، از کاربر عادی تا برنامه‌نویس

شما می‌توانید اتصال فیگما به کلاد مستقیماً از داخل چت با کلاد، طرح بسازید یا کد بنویسید. برای این کار دو راه دارید. کاربران عادی فقط از تنظیمات Claude، کانکتور Figma را وصل می‌کنند و بدون نوشتن هیچ خطی کد کار می‌کنند. برنامه‌نویسان هم می‌توانند از طریق MCP سرور فیگما، کلاد را مستقیماً به فایل‌های Dev Mode وصل کنند تا کد را از روی طرح واقعی بسازند.

تا امروز شما طرح فیگما را باز می‌کردید، به کلاد توضیح می‌دادید «یک دکمه آبی با گوشه گرد بساز» و امیدوار بودید کلاد دقیقاً منظورتان را بفهمد. حالا این مرحله را حذف می‌کنید. با اتصال فیگما به کلاد، هوش مصنوعی مستقیماً طرح واقعی شما را می‌بیند.

در این مقاله دو مسیر را یاد می‌گیرید. مسیر اول برای کاربر عادی است و فقط چند کلیک نیاز دارد. مسیر دوم برای برنامه‌نویسانی است که می‌خواهند کد را دقیقاً از روی کامپوننت‌های فیگما بسازند.

چرا باید فیگما را به کلاد متصل کنیم؟

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

این اتصال سه فایده مستقیم دارد.

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

دوم، شما زمان کمتری صرف توضیح دادن می‌کنید.

سوم، گفتگو با کلاد ادامه‌دار می‌ماند. شما می‌توانید بیست دقیقه درباره یک مشکل طراحی حرف بزنید و در پایان بگویید «همین را در فیگما بساز»، بدون این‌که کل توضیحات را از اول تکرار کنید.

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

بررسی امکانات نسخه جدید اتصال فیگما به کلاد

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

کانکتور رسمی Figma در Claude، برای کاربران عادی

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

با این کانکتور می‌توانید فایل‌های Design یا FigJam تازه بسازید، دیاگرام‌های فلوچارت و نمودار زمانی تولید کنید و درباره فایل‌های موجود از کلاد بازخورد بگیرید. این مسیر نیاز به حساب Claude Pro دارد، اما حساب رایگان فیگما کافی است.

MCP سرور فیگما، برای برنامه‌نویسان

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

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

همگام‌سازی با Code Connect

اگر تیم شما از Code Connect استفاده می‌کند، کلاد می‌تواند کد نمونهٔ واقعی پروژه را در Dev Mode ببیند، نه یک تخمین خودکار. این یعنی کد تولیدشده توسط کلاد با استانداردهای کدبیس شما هم‌خوانی بیشتری دارد.

آموزش قدم‌به‌قدم برای کاربر عادی اتصال فیگما به کلاد (بدون کد)

این روش برای طراحان و کاربرانی مناسب است که نمی‌خواهند وارد تنظیمات فنی شوند.

۱. یک حساب Claude Pro داشته باشید. نسخه رایگان کلاد این کانکتور را نشان نمی‌دهد.

۲. وارد کلاد شوید و روی آیکون تنظیمات کلیک کنید. گزینه Connectors را انتخاب کنید.

۳. روی Browse connectors کلیک کنید و در لیست، Figma را پیدا کنید.

۴. روی Connect کلیک کنید. مرورگر شما صفحه ورود فیگما را باز می‌کند.

۵. با حساب فیگما خود وارد شوید و روی Allow کلیک کنید تا دسترسی را تایید کنید.

۶. به کلاد برگردید. حالا در کادر پیام، دکمه به‌علاوه (+) را بزنید و مطمئن شوید کانکتور Figma فعال است.

۷. یک پیام ساده بنویسید، مثلاً «یک دیاگرام فرآیند ثبت‌نام کاربر در Figma بساز» یا «طرح این صفحه را در فیگما به من نشان بده». کلاد کار را مستقیماً در فیگما انجام می‌دهد.

آموزش قدم‌به‌قدم برای برنامه‌نویس اتصال فیگما به کلاد (اتصال MCP)

این روش برای کسانی مناسب است که از Claude Code استفاده می‌کنند و می‌خواهند کد را دقیقاً از روی طرح فیگما بسازند.

۱. آخرین نسخه اپلیکیشن دسکتاپ فیگما را نصب کنید. نسخه مرورگری این قابلیت را ندارد.

۲. یک فایل طراحی را باز کنید و به حالت Dev Mode بروید.

۳. در سایدبار سمت راست، گزینه فعال‌سازی MCP سرور را بزنید. فیگما یک آدرس محلی به شما نشان می‌دهد و آن را کپی کنید.

۴. Claude Code را روی سیستم خود نصب کنید، اگر قبلاً نصب نکرده‌اید.

۵. در ترمینال، دستور اتصال را با آدرسی که از فیگما کپی کردید اجرا کنید تا Claude Code سرور فیگما را به لیست ابزارهای خود اضافه کند.

۶. Claude Code را ری‌استارت کنید تا تنظیمات تازه اعمال شود.

۷. یک قطعه از طرح فیگما را انتخاب کنید و لینک آن را کپی کنید. این لینک را در Claude Code جای‌گذاری کنید و از کلاد بخواهید همان بخش را پیاده‌سازی کند.

نکته مهم: کاربران با پلن رایگان یا حساب‌های View و Collab، فقط تعداد محدودی درخواست در ماه دارند. برای کار جدی روی این ابزار، پلن Dev یا Full را در نظر بگیرید.

چه زمانی از هر روش استفاده کنیم؟

اگر فقط می‌خواهید ایده بگیرید، دیاگرام بسازید یا بازخورد طراحی دریافت کنید، کانکتور بدون کد کافی است. اگر می‌خواهید کدی تولید کنید که با کامپوننت‌های واقعی پروژه شما هم‌خوانی داشته باشد، مسیر MCP و Dev Mode را انتخاب کنید.

بسیاری از تیم‌ها هر دو روش را کنار هم استفاده می‌کنند. طراح از کانکتور ساده برای ایده‌پردازی استفاده می‌کند و برنامه‌نویس همان طرح را از طریق MCP به کد تبدیل می‌کند.

سؤالات متداول اتصال فیگما به کلاد

آیا اتصال فیگما به کلاد نیاز به حساب پولی دارد؟ برای روش کانکتور بدون کد، بله. شما به حساب Claude Pro نیاز دارید. حساب رایگان فیگما برای این کار کافی است.

آیا برای اتصال MCP باید کد بنویسم؟ شما نیازی به نوشتن کد پیچیده ندارید، اما باید چند دستور ساده در ترمینال اجرا کنید و اپلیکیشن دسکتاپ فیگما را نصب کنید.

فرق کانکتور Figma و MCP سرور Dev Mode چیست؟ کانکتور برای ساخت فایل‌های FigJam و Design و کارهای عمومی مناسب است. MCP سرور Dev Mode برای خواندن دقیق کامپوننت‌ها و متغیرها و تولید کد واقعی طراحی شده است.

آیا کلاد می‌تواند کد را دوباره به فیگما برگرداند؟ بله. با قابلیت جدید MCP، شما می‌توانید رابط کاربری ساخته‌شده در کد را به‌صورت لایه‌های قابل ویرایش به فیگما برگردانید.

آیا این اتصال روی نسخه رایگان فیگما هم کار می‌کند؟ کانکتور بدون کد با حساب رایگان فیگما کار می‌کند. اما MCP سرور Dev Mode معمولاً به پلن‌های پولی فیگما نیاز دارد.

جمع‌بندی

اتصال فیگما به کلاد فاصله بین ایده، طراحی و کد را از بین می‌برد. اگر کاربر عادی هستید، فقط با چند کلیک در تنظیمات کلاد این کار را انجام می‌دهید. اگر برنامه‌نویس هستید، MCP سرور Dev Mode کد واقعی طرح را مستقیماً به Claude Code می‌دهد.

هر دو مسیر یک هدف مشترک دارند: شما دیگر لازم نیست طرح را با کلمات توضیح دهید. کلاد آن را می‌بیند. کدام روش را امتحان می‌کنید؟ تجربه خودتان را در بخش نظرات با ما به اشتراک بگذارید.