Figma MCP: اتصال Figma به Claude Code و عوامل هوش مصنوعی

گرفتن اسکرین‌شات از یک فریم Figma و جای‌گذاری آن در Claude Code همان چیزی است که به شما «حس و حال» می‌دهد. اتصال Figma MCP همان چیزی است که کامپوننت‌هایی می‌دهد که تا سطح توکن با سیستم طراحی‌تان تطابق دارند.

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

وقتی متصل شد، عامل هوش مصنوعی دیگر حدس نمی‌زند که «فاصله ۲۰ پیکسلی» یعنی چه و شروع می‌کند به خواندن توکن فاصله‌گذاری واقعی که شما تعیین کرده‌اید. دیگر رنگ اختراع نمی‌کند و از پالت واقعی شما می‌کشد. دیگر Button شما را تقریبی نمی‌زند و همان را که از قبل ساخته‌اید صدا می‌زند.

MCP یک مترجم است، نه عصای جادویی

MCP مخفف Model Context Protocol است. Anthropic آن را در اواخر ۲۰۲۴ عرضه کرد. Figma در ۲۰۲۵ یک سرور رسمی برای آن منتشر کرد. هر ابزار هوش مصنوعی ارزشمندی در ۲۰۲۶ از آن پشتیبانی می‌کند.

MCP را مثل یک پورت USB برای عوامل هوش مصنوعی تصور کنید. قبل از MCP، هر ابزاری که می‌خواست با یک مدل هوش مصنوعی صحبت کند، مجبور بود یک یکپارچه‌سازی سفارشی بسازد. بعد از MCP، ابزارها فقط پروتکل را صحبت می‌کنند و هر عاملی که از MCP آگاه باشد می‌تواند آن‌ها را بخواند. Figma، GitHub، Slack، Linear، فایل‌سیستم شما، پایگاه داده، هر چیزی. یک پروتکل، استانداردشده، قابل استفاده مجدد.

کار مشخص سرور MCP در Figma: داده‌های ساختاری داخل فایل‌های Figma شما را برای هر عامل هوش مصنوعی که متصل می‌کنید، در دسترس می‌گذارد. آی‌دی فریم‌ها، نام لایه‌ها، کامپوننت‌های تودرتو، مقادیر فاصله‌گذاری، متغیرهای رنگ، استایل‌های تایپوگرافی، تنظیمات auto-layout، همه چیز. هوش مصنوعی آنچه فایلتان واقعاً دارد را می‌خواند، نه آنچه یک JPEG از فایلتان به نظر می‌رسد.

MCP جادو نیست. یک کابل است. کار هنوز باید از هر دو طرف خوب باشد.

آنچه سرور MCP در Figma واقعاً در معرض دید می‌گذارد

سرور به عوامل هوش مصنوعی دسترسی خواندن به یک مجموعه مشخص از داده‌های Figma شما می‌دهد. دانستن دقیق آنچه می‌تواند و نمی‌تواند ببیند، هم برای نتایج و هم برای امنیت اهمیت دارد.

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

این محدوده اهمیت دارد زیرا یعنی یک هوش مصنوعی بد آموزش‌دیده نمی‌تواند در فضای کاری Figma شما پرسه بزند. آنچه به آن می‌دهید را می‌خواند، نه بیشتر.

نصب در Claude Code (پنج دقیقه)

اگر Claude Code را از قبل راه‌اندازی کرده‌اید (اگر نه، Claude Code برای طراحان را ببینید)، MCP فقط یک ویرایش پیکربندی فاصله دارد.

مرحله ۱: در Figma desktop، به Preferences بروید و «Enable local MCP server» را زیر تنظیمات Dev Mode فعال کنید. Figma یک سرور روی دستگاه شما روی پورت پیش‌فرض راه‌اندازی خواهد کرد.

مرحله ۲: در ترمینال، دستور زیر را اجرا کنید:

claude mcp add figma http://127.0.0.1:3845/mcp --transport http

این دستور ساده سرور محلی MCP در Figma را با Claude Code ثبت می‌کند. بدون ویرایش JSON، بدون جستجو در فایل‌های پیکربندی.

مرحله ۳: Claude Code را ری‌استارت کنید. در جلسه بعدی، Claude Code به طور خودکار Figma را در دسترس می‌بیند.

با /mcp داخل یک جلسه Claude Code تأیید کنید. باید Figma را در لیست ببینید.

برای استفاده، یک URL از Figma را در پرامپت خود جای‌گذاری کنید. Claude Code فریم را از طریق MCP، نه اسکرین‌شات، تجزیه می‌کند و با ساختار واقعی کار می‌کند.

نصب در Cursor (همچنین پنج دقیقه)

برای کاربران Cursor، جریان کمی متفاوت است اما ایده یکسان است.

مرحله ۱: مثل بالا. سرور محلی MCP در Figma را در Figma desktop فعال کنید.

مرحله ۲: در Cursor، Settings را باز کنید، به بخش MCP بروید، روی «Add MCP Server» کلیک کنید. این موارد را وارد کنید:

Name: figma
URL: http://127.0.0.1:3845/mcp
Transport: HTTP

مرحله ۳: ذخیره کنید و Cursor را ری‌استارت کنید. Figma به عنوان یک منبع داده موجود در پنل عامل ظاهر خواهد شد.

Cursor با MCP کمی بصری‌تر از Claude Code برخورد می‌کند، با یک گزینه مبتنی بر UI برای هر سرور. از نظر عملکردی، دو تجربه یکسان هستند: یک URL از Figma جای‌گذاری می‌کنید، عامل فریم واقعی را می‌خواند، خروجی با سیستم شما تطابق دارد.

پنج جریان کاری که باز می‌کند

طراحی به کد با وفاداری. یک URL فریم Figma جای‌گذاری می‌کنید. Claude Code ساختار لایه، مقادیر auto-layout، اتصالات متغیر، نمونه‌های کامپوننت را می‌کشد. کامپوننت React تولیدشده از Button واقعی شما، Card واقعی شما، توکن‌های فاصله واقعی شما استفاده می‌کند. بدون تقریب، بدون کلاس‌های اختراعی. این جریان کاری اصلی است و به تنهایی ارزش نصب پنج دقیقه‌ای را دارد.

تأیید Code Connect. اگر از قابلیت Code Connect در Figma استفاده می‌کنید (که کامپوننت‌های Figma را به کامپوننت‌های کد شما نقشه می‌زند)، MCP به عامل اجازه می‌دهد هنگام تولید کد، نقشه‌برداری را تأیید کند. کامپوننت جدیدی که یکی از قبل توسط Code Connect ثبت‌شده را تکرار کند، نخواهد ساخت. اختراعات تصادفی کمتر.

بررسی همگام‌سازی متغیر. فرض کنید هفته گذشته یک توکن رنگ را تغییر نام دادید. از Claude Code بپرسید: «فریم این URL از Figma را بخوان و هر ارجاع متغیری که با فایل توکن‌های فعلی ما مطابقت ندارد را فهرست کن.» در یک پاس انحراف را علامت‌گذاری می‌کند. این قبلاً یک جلسه ۴۵ دقیقه‌ای Loom با یک توسعه‌دهنده بود.

بازگشت اسکرین‌شات به کامپوننت. اگر MCP نتواند فایل را بخواند (متعلق به مشتری، اشتراک‌گذاری‌نشده، یا فریم auto-layout نیست)، عامل به تحلیل تصویر بازمی‌گردد. می‌توانید ترکیب کنید: MCP برای کار خودتان، اسکرین‌شات برای مراجعه‌های یک‌باره مشتری. پرامپت یکسان، هر دو کار می‌کنند.

QA طراحی. جهت معکوس. از Claude Code بخواهید یک اسکرین‌شات صفحه مستقرشده را با یک فریم Figma مقایسه کند: «این URL صفحه پروداکشن است. این URL از Figma است که باید با آن مطابقت داشته باشد. تفاوت‌های بصری را فهرست کن.» این مشکل «طراح تأیید کرد اما توسعه‌دهنده padding اشتباه ارسال کرد» را قبل از رسیدن به پروداکشن می‌گیرد.

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

امنیت: آنچه Figma می‌بیند و آنچه هوش مصنوعی شما می‌بیند

دو سوال جداگانه، هر دو ارزش فهمیدن دارند.

آنچه Figma می‌بیند. سرور MCP به صورت محلی روی دستگاه شما اجرا می‌شود، نه روی سرورهای Figma. Figma می‌بیند که شما MCP را فعال کرده‌اید و به کدام فایل‌ها دسترسی داده می‌شود، زیرا احراز هویت از طریق جلسه Figma شما جاری می‌شود. برای حساب‌های enterprise، مدیران می‌توانند MCP محلی را در سطح سازمان غیرفعال کنند.

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

آنچه دستگاه شما را ترک می‌کند. اگر از Claude Code با API Anthropic استفاده می‌کنید، داده‌های فریمی که درخواست می‌کنید به عنوان بخشی از زمینه پرامپت به Anthropic ارسال می‌شود. این موضوع اهمیت دارد اگر فایل Figma شما حاوی کارهای محرمانه مشتری یا طراحی‌های محصول منتشرنشده باشد. قبل از اتصال MCP به فایل‌های حساس، سیاست هوش مصنوعی تیمتان را بخوانید.

برای بیشتر کارهای طراحی، این خوب است. برای صنایع تنظیم‌شده یا NDA هایی با بندهای سخت‌گیرانه داده، اول بررسی کنید.

جایی که Figma MCP هنوز کم می‌آورد

صادق باشیم. این Figma MCP در آوریل ۲۰۲۶ است، نه یک نسخه آینده صیقلی.

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

پروتوتایپ‌ها و تعاملات ترجمه نمی‌شوند. MCP ساختار استاتیک را در معرض دید می‌گذارد. اگر فایل Figma شما اتصالات پروتوتایپ، حالت‌های hover، smart animate، یا variant switching داشته باشد، عامل هیچ‌کدام از آن‌ها را نمی‌بیند. هنوز منطق انیمیشن را به صورت دستی می‌نویسید.

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

عملکرد روی فایل‌های بزرگ کاهش می‌یابد. یک فایل با بیش از ۵۰۰ فریم تجزیه‌شدنش بیشتر طول می‌کشد تا یک فایل با ۲۰ فریم. برای بهترین نتایج، در صفحات محدودشده کار کنید، نه یک فایل هیولا.

فرضیات auto-layout اهمیت دارند. عامل خروجی تمیزترش را تولید می‌کند وقتی فریم‌های Figma شما به درستی از auto-layout استفاده کنند. طرح‌بندی‌های آزاد با موقعیت‌یابی مطلق بدجور ترجمه می‌شوند. این یک مشکل انضباط Figma است، نه مشکل MCP، اما اینجاست که بیشتر نمایان می‌شود.

هیچ‌کدام از این‌ها معامله‌شکن نیستند. همه آن‌ها دلایلی هستند که MCP را با prompt engineering خوب ترکیب کنید، نه اعتماد کور.

سوالات متداول

آیا Figma MCP رایگان است؟

بله. سرور MCP بدون هزینه اضافی در Figma desktop تعبیه شده است. شما برای Figma پرداخت می‌کنید و برای ابزار هوش مصنوعی خود (Claude، Cursor، و غیره). اتصال به خودی خود رایگان است.

آیا Figma MCP روی نسخه وب کار می‌کند؟

سرور محلی MCP یک ویژگی Figma desktop است. کاربران وب‌تنها هنوز به آن دسترسی ندارند. برای کارهای جدی طراحی به کد، desktop در هر صورت راه‌اندازی بهتری است.

آیا می‌توانم از MCP با چندین ابزار هوش مصنوعی به طور همزمان استفاده کنم؟

بله. چندین عامل می‌توانند همان سرور محلی MCP را بخوانند. Claude Code، Cursor، Claude Desktop، و هر کلاینت دیگری که از MCP آگاه است، می‌توانند به طور همزمان متصل شوند.

اگر در طول یک جلسه فایل‌های Figma را عوض کنم چه می‌شود؟

عامل فریم را در URL که به آن می‌دهید تجزیه می‌کند. عوض کردن URL ها زمینه را عوض می‌کند. می‌توانید به چندین فایل در یک مکالمه بدون ری‌استارت کردن چیزی اشاره کنید.

آیا MCP جایگزین Figma Dev Mode می‌شود؟

نه. Dev Mode ابزار بازرسی رو به انسان است. MCP لایه داده رو به عامل است. آن‌ها مکمل هم هستند. در واقع، همان داده‌ای که Dev Mode نشان می‌دهد همان چیزی است که MCP به عامل در معرض دید می‌گذارد.

اسکرین‌شات گرفتن از Figma را متوقف کنید

هر تیم طراحی یک عادت بد مشترک دارد: گرفتن اسکرین‌شات از یک فریم Figma، جای‌گذاری آن در ChatGPT یا Claude، و درخواست کد. خروجی همیشه «حس و حال» است، هرگز توکن. سپس یک ساعت صرف تصحیح «حس و حال» به صورت دستی می‌کنید.

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

MCP را در Figma فعال کنید. کانکتور را در ابزار هوش مصنوعی خود نصب کنید. URL جای‌گذاری کنید، نه اسکرین‌شات.

تفاوت در کیفیت خروجی بین «قبل از MCP» و «بعد از MCP» ظریف نیست. این بزرگ‌ترین نصب ROI به ازای دقیقه در جعبه ابزار طراح مدرن است.

اسکرین‌شات گرفتن از Figma را متوقف کنید.