Figma MCP: اتصال Figma به Claude Code و عوامل کدنویسی هوش مصنوعی
Figma MCP واقعاً چه میکند، چطور در ده دقیقه نصبش کنید، پنج جریان کاری که باز میکند، و کجا هنوز خراب میشود.
گرفتن اسکرینشات از یک فریم Figma و پیست کردنش توی Claude Code را «کار کردن بر اساس حس و حال» بدان. وصل کردن Figma MCP را «گرفتن کامپوننتهایی که تا سطح توکن با سیستم طراحیات مطابقت دارند» بدان.
فاصله بین این دو جریان کاری حدود پنج دقیقه راهاندازی است. بیشتر طراحان این کار را نکردهاند چون هر آموزشی آن را فنی جلوه میدهد. نیست. یک دستور واحد است به علاوه فعال کردن یک تاگل داخل Figma. همین.
وقتی وصل شد، عامل هوش مصنوعی دیگر حدس نمیزند که «20px فاصله» چه معنایی دارد و به جایش توکن فاصله واقعی که اختصاص دادهای را میخواند. دیگر رنگ اختراع نمیکند و از پالت واقعیات میکشد. دیگر Button ات را تقریب نمیزند و همان چیزی را که خودت ساختهای صدا میزند. این فقط وقتی کار میکند که سیستم طراحی آن طرف واقعی باشد.
MCP یک مترجم است، نه یک عصای جادویی
MCP مخفف Model Context Protocol است. Anthropic آن را اواخر 2024 عرضه کرد. Figma یک سرور رسمی برایش در 2025 منتشر کرد. هر ابزار هوش مصنوعی که ارزش استفاده در 2026 داشته باشد از آن پشتیبانی میکند.
MCP را مثل یک پورت USB برای عوامل هوش مصنوعی بدان. قبل از MCP، هر ابزاری که میخواست با یک مدل هوش مصنوعی صحبت کند مجبور بود یک ادغام سفارشی بسازد. بعد از MCP، ابزارها فقط پروتکل را صحبت میکنند و هر عامل آشنا با MCP میتواند آنها را بخواند. Figma، GitHub، Slack، Linear، فایلسیستمت، پایگاههای داده، هر چیزی. یک پروتکل، استاندارد، قابل استفاده مجدد.
کاری که سرور MCP Figma به طور خاص انجام میدهد: دادههای ساختاری داخل فایلهای Figma ات را در اختیار هر عامل هوش مصنوعی که وصل میکنی قرار میدهد. شناسههای فریم، نام لایهها، کامپوننتهای تودرتو، مقادیر فاصله، متغیرهای رنگ، استایلهای تایپوگرافی، تنظیمات auto-layout، همهشان. هوش مصنوعی میخواند آنچه فایلت واقعاً دارد، نه آنچه یک JPEG از فایلت شبیه آن است.
MCP جادو نیست. یک کابل است. کار هنوز باید در هر دو طرف خوب باشد.
سرور MCP Figma واقعاً چه چیزی را نمایش میدهد
سرور دسترسی خواندن به مجموعه خاصی از دادههای Figma ات را به عوامل هوش مصنوعی میدهد. دانستن دقیق اینکه چه چیزی میتواند و نمیتواند ببیند هم برای نتایج و هم برای امنیت اهمیت دارد.
| آنچه هوش مصنوعی میتواند بخواند | چرا مهم است |
|---|---|
| ساختار فریم (شناسهها، نامها، سلسلهمراتب) | عامل میداند چه چیزی را هدف بگیرد |
| تنظیمات auto-layout (جهت، فاصله، padding) | فاصلهگذاری دقیقاً ترجمه میشود |
| ارجاعات متغیر (توکنهای رنگ، توکنهای فاصله، تایپوگرافی) | خروجی با سیستمت مطابقت دارد |
| نمونههای کامپوننت و overrideها | عامل کامپوننتهای موجود را صدا میزند |
| استایلهای متن و محتوا | کپی در جای درست قرار میگیرد |
| پر کردنهای تصویر (فقط URL، نه داده پیکسل به صورت پیشفرض) | تصاویر تمیز ارجاع داده میشوند |
آنچه نمیتواند بخواند: فایلهای خصوصی که مجاز نکردهای، کتابخانههای تیمی دیگر که به این فایل وصل نیستند، نظرات، تاریخچه نسخه، یا هر چیزی خارج از فایل خاصی که به آن اشاره میکنی.
آن محدوده مهم است چون یعنی یک هوش مصنوعی بدآموزش نمیتواند در فضای کار Figma ات ولگردی کند. میخواند آنچه تو به دستش میدهی، نه بیشتر.
در Claude Code نصبش کن (پنج دقیقه)
اگر Claude Code در حال اجرا داری (اگر نه، ببین Claude Code برای طراحان)، MCP فقط یک ویرایش تنظیمات است.
مرحله 1: در Figma desktop، به Preferences برو، و «Enable local MCP server» را در تنظیمات Dev Mode فعال کن. Figma یک سرور روی دستگاهت روی پورت پیشفرض شروع میکند.
مرحله 2: در ترمینالت، فایل تنظیمات Claude Code را باز کن:
claude mcp add figma http://127.0.0.1:3845/mcp --transport http
این دستور واحد سرور MCP محلی Figma را با Claude Code ثبت میکند. بدون ویرایش JSON، بدون جستجوی فایل config.
مرحله 3: Claude Code را ریستارت کن. در session بعدی، Claude Code به طور خودکار Figma را خواهد دید.
تأیید با: /mcp داخل یک session Claude Code. باید Figma را در لیست ببینی.
برای استفاده از آن، یک URL Figma را توی prompt بریز. Claude Code فریم را از طریق MCP حل میکند، نه یک اسکرینشات، و با ساختار واقعی کار میکند.
در Cursor نصبش کن (هم پنج دقیقه)
برای کاربران Cursor، جریان کمی متفاوت است اما ایده یکسان است.
مرحله 1: همان بالا. سرور MCP محلی Figma را در Figma desktop فعال کن.
مرحله 2: در Cursor، Settings را باز کن، به بخش MCP برو، «Add MCP Server» را کلیک کن. پیست کن:
Name: figma
URL: http://127.0.0.1:3845/mcp
Transport: HTTP
مرحله 3: ذخیره کن و Cursor را ریستارت کن. Figma به عنوان یک منبع داده موجود در پنل agent ظاهر میشود.
Cursor نسبت به Claude Code کمی بصریتر با MCP کار میکند، با یک toggle بصری برای هر سرور. از نظر عملکردی، دو تجربه یکسان هستند: URL Figma را پیست میکنی، عامل فریم واقعی را میخواند، خروجی با سیستمت مطابقت دارد.
پنج جریان کاری که باز میکند
طراحی به کد با وفاداری. URL فریم Figma را پیست میکنی. Claude Code ساختار لایه، مقادیر auto-layout، اتصالات متغیر، نمونههای کامپوننت را میکشد. کامپوننت React تولیدشده از Button واقعی، Card واقعی، توکنهای فاصله واقعیات استفاده میکند. بدون تقریب، بدون کلاسهای اختراعی. این جریان کاری اصلی است و به تنهایی ارزش نصب پنج دقیقهای را دارد.
تأیید Code Connect. اگر از قابلیت Code Connect Figma استفاده میکنی (که کامپوننتهای Figma را به کامپوننتهای کدت نگاشت میکند)، MCP به عامل اجازه میدهد نگاشت را هنگام تولید کد تأیید کند. کامپوننت جدیدی که Code Connect قبلاً ثبت کرده را تکراری نمیسازد. اختراع تصادفی کمتر.
بررسی همگامسازی متغیر. فرض کن هفته گذشته یک توکن رنگ را تغییر نام دادی. از Claude Code بخواه: «فریم را از این URL Figma بخوان و هر ارجاع متغیری که با فایل توکن فعلی ما مطابقت ندارد را لیست کن.» در یک پاس drift را پرچم میزند. این قبلاً یک session لوم 45 دقیقهای با یک دولوپر بود.
بازگشت به اسکرینشات به عنوان کامپوننت. اگر MCP نتواند فایل را بخواند (متعلق به مشتری، اشتراکگذارینشده، یا یک فریم auto-layout نیست)، عامل به تحلیل تصویر بازمیگردد. میتوانی ترکیب کنی: MCP برای کار خودت، اسکرینشات برای ارجاعات مشتری یکباره. همان prompt، هر دو کار میکنند.
QA طراحی. جهت معکوس. از Claude Code بخواه یک اسکرینشات صفحه deploy شده را با یک فریم Figma مقایسه کند: «این URL صفحه production است. این URL Figma است که باید مطابقت داشته باشد. تفاوتهای بصری را لیست کن.» این مشکل «طراح تأیید کرد اما دولوپر padding اشتباه ارسال کرد» را قبل از رسیدن به production میگیرد.
| جریان کاری | بدون MCP | با MCP |
|---|---|---|
| طراحی به کد | بر اساس حس و حال، نیاز به تصحیح دستی | دقیق با توکن، قابل استفاده در اولین پاس |
| Code Connect | مرحله دستی جداگانه | تأیید خودکار |
| drift متغیر | ممیزی دستی، ساعتها | یکخطی، دقیقهها |
| بازگشت به اسکرینشات | تنها گزینهای که داشتی | بازگشت هنگام عدم دسترسی MCP |
| QA طراحی | مقایسه دستی | گزارش تفاوت در ثانیهها |
اگر تجزیههای بیشتری از جریانهای کاری هوش مصنوعی میخواهی، بقیه Brainy Papers را مرور کن. اگر میخواهی MCP را در خط لوله کامل طراحی به کد تیمت وصل کنی، Brainy را استخدام کن.
امنیت: Figma چه میبیند و هوش مصنوعی چه میبیند
دو سوال جداگانه، هر دو ارزش فهمیدن دارند.
Figma چه میبیند. سرور MCP به صورت محلی روی دستگاهت اجرا میشود، نه روی سرورهای Figma. Figma میبیند که MCP را فعال کردهای و به کدام فایلها دسترسی پیدا شده، چون احراز هویت از طریق session Figma ات جریان مییابد. برای حسابهای enterprise، مدیران میتوانند MCP محلی را در سطح سازمان غیرفعال کنند.
عامل هوش مصنوعی چه میبیند. هر URL فایل Figma که پیست میکنی. عامل دسترسی مرور به کل فضای کار Figma ات ندارد. کتابخانههای تیمی دیگر را نمیبیند مگر اینکه به خصوص به آنها ارجاع دهی. نظرات، تاریخچه نسخه، یا فایلهای غیرمرتبط را نمیبیند. هر prompt به آنچه تو به دستش میدهی محدود میشود.
آنچه از دستگاهت خارج میشود. اگر از Claude Code با API Anthropic استفاده میکنی، دادههای فریمی که درخواست میکنی به عنوان بخشی از context prompt به Anthropic ارسال میشود. اگر فایل Figma ات حاوی کار مشتری محرمانه یا طراحیهای محصول منتشرنشده است، این مهم است. قبل از وصل کردن MCP روی فایلهای حساس، سیاست هوش مصنوعی تیمت را بخوان.
برای اکثر کارهای طراحی، این مشکلی ندارد. برای صنایع تنظیمشده یا NDAهایی با بندهای سختگیرانه داده، اول بررسی کن.
کجا Figma MCP هنوز کم میآورد
صادق باش. این Figma MCP در آوریل 2026 است، نه یک نسخه صیقلی آینده.
مدیریت داراییهای تصویری محدود است. MCP به عامل URLهای پر کردن تصویر میدهد، نه دادههای پیکسل واقعی. برای طرحبندیهایی که تصویر کار ترکیبی سنگینی انجام میدهد، عامل هنوز باید حدس بزند.
پروتوتایپها و تعاملات ترجمه نمیشوند. MCP ساختار ایستا را نمایش میدهد. اگر فایل Figma ات اتصالات پروتوتایپ، حالتهای hover، smart animate، یا تغییر variant داشته باشد، عامل هیچکدام از آنها را نمیبیند. منطق انیمیشن را هنوز با دست مینویسی.
پلاگینها قابل خواندن نیستند. اگر یک پلاگین Figma محتوا در فایلت تولید کرده (نمودارها، آیکونها، تجسمهای داده)، عامل خروجی را به عنوان یک لایه ایستا میبیند. نمیتواند منطق پلاگین را بازتولید کند.
عملکرد روی فایلهای بزرگ کاهش مییابد. یک فایل با 500+ فریم نسبت به یک فایل با 20 فریم بیشتر طول میکشد. برای بهترین نتایج، در صفحات محدود کار کن، نه یک فایل بزرگ و کلان.
فرضیات auto-layout مهم هستند. عامل پاکترین خروجی را تولید میکند وقتی فریمهای Figma ات به درستی از auto-layout استفاده میکنند. طرحبندیهای آزاد با موقعیتیابی مطلق بد ترجمه میشوند. این یک مشکل انضباط Figma است، نه یک مشکل MCP، اما بیشترین وضوح را اینجا نشان میدهد.
هیچکدام از اینها مانعساز نیستند. همه آنها دلایلی هستند برای جفت کردن MCP با مهندسی prompt خوب، نه اعتماد کورکورانه.
سوالات متداول
آیا Figma MCP رایگان است؟
بله. سرور MCP در Figma desktop بدون هزینه اضافی تعبیه شده است. برای Figma پول میدهی و برای ابزار هوش مصنوعیات (Claude، Cursor، و غیره). خود اتصال رایگان است.
آیا Figma MCP روی نسخه وب کار میکند؟
سرور MCP محلی یک قابلیت Figma desktop است. کاربران فقط-وب هنوز به آن دسترسی ندارند. برای کار جدی طراحی به کد، desktop به هر حال راهاندازی بهتری است.
آیا میتوانم از MCP با چند ابزار هوش مصنوعی به طور همزمان استفاده کنم؟
بله. چندین عامل میتوانند همان سرور MCP محلی را بخوانند. Claude Code، Cursor، Claude Desktop، و هر کلاینت آشنا با MCP دیگری میتوانند به طور همزمان وصل شوند.
اگر در طول یک session فایلهای Figma را عوض کنم چه اتفاقی میافتد؟
عامل فریم را از URL که به آن میدهی حل میکند. عوض کردن URLها context را عوض میکند. میتوانی در یک مکالمه بدون ریستارت کردن چیزی به چندین فایل ارجاع دهی.
آیا MCP جایگزین Figma Dev Mode میشود؟
نه. Dev Mode ابزار بازرسی برای انسان است. MCP لایه داده برای عامل است. مکمل هستند. در واقع، همان دادهای که Dev Mode نشان میدهد همان چیزی است که MCP به عامل نمایش میدهد.
اسکرینشات گرفتن از Figma را متوقف کن
هر تیم طراحی یک عادت بد مشترک دارد: گرفتن اسکرینشات از یک فریم Figma، پیست کردنش توی ChatGPT یا Claude، و درخواست کد. خروجی همیشه حس و حال است، هرگز توکن نیست. سپس یک ساعت صرف تصحیح دستی حس و حال میکنی.
پنج دقیقه نصب و آن جریان کاری مرده است. عامل فریم واقعی را میخواند. فاصله واقعی است. کامپوننتها کامپوننتهای واقعی هستند. توکنها توکنهای واقعی هستند. کد از همان بار اول به آماده برای ارسال نزدیکتر بیرون میآید.
MCP را در Figma فعال کن. کانکتور را در ابزار هوش مصنوعیات نصب کن. URL پیست کن، نه اسکرینشات.
تفاوت در کیفیت خروجی بین «قبل از MCP» و «بعد از MCP» ظریف نیست. این بزرگترین نصب با بیشترین بازده به ازای دقیقه در جعبه ابزار مدرن طراح است.
اسکرینشات گرفتن از Figma را متوقف کن.
Want Figma MCP wired into your team's workflow without the setup headaches? Brainy installs it end-to-end.
Get Started
