تا همین اواخر، وقتی میخواستیم یک طرح فیگما را با کمک هوش مصنوعی به کد تبدیل کنیم، معمولاً یک تصویر از صفحه را در اختیار مدل میگذاشتیم. مدل ظاهر صفحه را میدید، درباره ساختار آن حدس میزد و کد تولید میکرد. نتیجه گاهی خوب بود، اما اطلاعات مهمی از طراحی در این مسیر از دست میرفت.
Figma MCP Server این روند را یک مرحله جلوتر برده است. سرور MCP فیگما به ابزارهای هوش مصنوعی اجازه میدهد به اطلاعات ساختاریافته طراحی، مانند کامپوننتها، متغیرها و اطلاعات چیدمان دسترسی داشته باشند. در قابلیتهای جدیدتر نیز عامل هوش مصنوعی میتواند، در شرایط پشتیبانیشده، محتوای واقعی و قابل ویرایش فیگما را ایجاد یا تغییر دهد.
به این ترتیب، مسیر فقط «تبدیل طراحی به کد» نیست. فیگما در حال تبدیل شدن به بخشی از یک روند کاری دوطرفه میان طراحی، کد و هوش مصنوعی است.
در این مقاله ابتدا میبینیم MCP فیگما دقیقاً چیست و چه مشکلی را حل میکند. سپس تفاوت آن با تصویر صفحه و رابط برنامهنویسی فیگما را بررسی میکنیم، راهاندازی آن را توضیح میدهیم و سراغ کاربردهای واقعی برای طراحان و توسعهدهندگان فرانتاند میرویم.
Figma MCP Server چیست؟
پروتکل MCP یا Model Context Protocol استانداردی برای ارتباط میان مدلها و عاملهای هوش مصنوعی با ابزارها و سرویسهای مختلف است.
Figma MCP در همین چارچوب، فیگما را به محیطهای توسعه مبتنی بر هوش مصنوعی متصل میکند. به زبان ساده، به جای اینکه فقط یک تصویر از طراحی را به هوش مصنوعی بدهیم، میتوانیم اطلاعات بیشتری از ساختار واقعی طراحی را در اختیار آن قرار دهیم.
فیگما میگوید سرور MCP این امکان را فراهم میکند که عاملهای هوش مصنوعی به اطلاعاتی مانند کامپوننتها، متغیرها و دادههای مربوط به چیدمان دسترسی پیدا کنند. سپس همین اطلاعات میتواند برای تولید کد یا اجرای کارهای مرتبط با طراحی استفاده شود.
البته یک نکته مهم وجود دارد: MCP خودش مدل هوش مصنوعی نیست.
MCP کد تولید نمیکند و جای مدل هوش مصنوعی یا برنامهای مانند Cursor و Codex را نمیگیرد. سرور MCP نقش واسطه را دارد و اطلاعات و ابزارهای لازم را در اختیار برنامه متصل قرار میدهد. کدی که در نهایت تولید میشود، به مدل و برنامهای که از MCP استفاده میکند بستگی دارد.
برای درک بهتر، این اجزا را از هم جدا کنیم:
فناوری | وظیفه |
|---|---|
مدل هوش مصنوعی (LLM) | تحلیل، استدلال و تولید متن یا کد |
عامل هوش مصنوعی | اجرای یک روند کاری چندمرحلهای با کمک مدل و ابزارها |
MCP | ایجاد یک روش استاندارد برای اتصال عامل به ابزار و اطلاعات |
Figma MCP | اتصال عامل هوش مصنوعی به اطلاعات و ابزارهای فیگما |
فیگما | محیط طراحی، سیستم طراحی، فایلها و بوم طراحی |
پس اگر بخواهیم خیلی ساده بگوییم:
MCP مغز هوش مصنوعی نیست؛ پل ارتباطی آن با ابزارهاست.
MCP چیست و چه ارتباطی با عامل هوش مصنوعی دارد؟
فرض کنید یک مدل هوش مصنوعی میتواند درباره یک صفحه وب کد بنویسد. اگر فقط یک تصویر از آن صفحه داشته باشد، اطلاعات محدودی در اختیارش است.
اما اگر قرار باشد همان مدل یک روند کاری کامل را اجرا کند، به ابزار و اطلاعات بیشتری نیاز دارد.
برای مثال، از عامل هوش مصنوعی میخواهید:
این صفحه ورود را از روی فیگما پیادهسازی کن، از کامپوننتهای موجود پروژه استفاده کن و نسخه واکنشگرای آن را بساز.
برای انجام این کار، عامل باید بتواند اطلاعات طراحی را ببیند. سپس باید کد پروژه را بررسی کند و در نهایت تصمیم بگیرد از چه اجزایی استفاده کند.
اینجاست که MCP اهمیت پیدا میکند.
در یک روند ساده میتوان گفت:
مدل هوش مصنوعی ← عامل هوش مصنوعی ← MCP ← ابزار
و در مورد فیگما:
مدل هوش مصنوعی ← عامل هوش مصنوعی ← Figma MCP ← فیگما
بنابراین MCP به خودی خود هوش مصنوعی نیست. همچنین کیفیت خروجی فقط به MCP بستگی ندارد؛ مدل، عامل، اطلاعات طراحی و ساختار پروژه همگی روی نتیجه اثر میگذارند.
Figma MCP چگونه کار میکند؟
در نسخههای اولیه، کاربرد اصلی MCP فیگما را میشد اینطور خلاصه کرد:
فیگما ← MCP ← عامل هوش مصنوعی ← کد
برنامهنویس یک فایل، صفحه یا بخش مشخصی از طراحی را در اختیار ابزار هوش مصنوعی قرار میداد. MCP اطلاعات مرتبط با آن طراحی را منتقل میکرد و مدل بر اساس این اطلاعات کد تولید میکرد.
فیگما سرور MCP را با هدف دسترسی عاملهای هوش مصنوعی به اطلاعات ساختاریافته طراحی معرفی کرد تا کد تولیدشده بیشتر با طراحی واقعی محصول هماهنگ باشد.
اما قابلیتهای جدید، مسیر را دوطرفه کردهاند:
فیگما ↔ MCP ↔ عامل هوش مصنوعی ↔ بوم فیگما
در این حالت، عامل فقط اطلاعات را از فیگما نمیخواند. در قابلیتهای پشتیبانیشده میتواند تغییرات را نیز روی فایل فیگما اعمال کند.
این همان تغییری است که قابلیت Write to Canvas به وجود آورده است.
در نتیجه میتوان مسیر تحول را اینگونه دید:
خواندن اطلاعات طراحی ← تولید کد ← خواندن و نوشتن در طراحی
این تغییر، MCP را از یک ابزار صرفاً مرتبط با تبدیل طراحی به کد، به بخشی از روندهای کاری دوطرفه میان طراحی و توسعه تبدیل میکند.
MCP فیگما چه اطلاعاتی از طراحی دریافت میکند؟
ارزش اصلی MCP در این است که هوش مصنوعی را به اطلاعات بیشتری از ظاهر یک صفحه متصل میکند.
فیگما اعلام کرده است که عاملهای متصل میتوانند اطلاعاتی مانند کامپوننتها، متغیرها، دادههای چیدمان، محتوای FigJam و منابع Figma Make را دریافت کنند. همچنین امکان تولید کد از Frame انتخابشده و استفاده از Code Connect نیز وجود دارد.
برای مثال، یک صفحه ورود ممکن است شامل این موارد باشد:
Frame
Component
Variant
Variable
Auto Layout
رنگها و مقادیر طراحی
ساختار چیدمان
اجزای سیستم طراحی
تصویر صفحه فقط ظاهر این موارد را نشان میدهد.
اما اطلاعات ساختاریافته میتواند به عامل بگوید یک دکمه از چه کامپوننتی استفاده میکند، چه متغیری برای رنگ آن تعریف شده و ساختار چیدمان چگونه است.
این تفاوت برای تولید کد اهمیت زیادی دارد.
فرض کنید در طراحی یک Button استاندارد دارید. در تصویر صفحه، هوش مصنوعی فقط ظاهر آن را میبیند. اما با Context ساختاریافته، میتواند اطلاعات بیشتری درباره کامپوننت موجود دریافت کند.
در نتیجه، به جای ساختن یک دکمه جدید، احتمال استفاده از ساختار موجود بیشتر میشود.
تفاوت MCP فیگما با تصویر صفحه و Figma API
در اینجا یک اشتباه رایج وجود دارد: بعضی کاربران تصور میکنند MCP نسخه جدید Figma API است.
این تصور درست نیست.
Figma MCP جایگزین Figma API نیست.
رابط برنامهنویسی فیگما برای دسترسی نرمافزاری به دادهها و امکانات فیگما استفاده میشود. MCP در عوض، روشی استاندارد برای در اختیار گذاشتن ابزار و اطلاعات به عاملهای هوش مصنوعی است.
بنابراین این دو میتوانند در کنار یکدیگر استفاده شوند.
ویژگی | تصویر صفحه | Figma API | Figma MCP |
|---|---|---|---|
نمایش ظاهر طراحی | بله | غیرمستقیم | بله |
اطلاعات ساختاریافته | بسیار محدود | بله | بله |
مناسب برای عامل هوش مصنوعی | محدود | نیازمند پیادهسازی | بله |
دسترسی به کامپوننتها | محدود | بله | بله |
دسترسی به متغیرها | خیر | بله | بله |
تبدیل طراحی به کد | محدود | قابل پیادهسازی | کاربرد اصلی |
اتصال مستقیم به روند کاری هوش مصنوعی | محدود | نیازمند توسعه | بله |
نوشتن روی بوم | خیر | وابسته به API و پیادهسازی | در قابلیتهای پشتیبانیشده بله |
پس اگر یک توسعهدهنده قصد ساخت یک اتصال نرمافزاری اختصاصی داشته باشد، Figma API میتواند انتخاب مناسبی باشد.
اما اگر هدف این باشد که یک عامل هوش مصنوعی در محیط توسعه بتواند از اطلاعات طراحی فیگما استفاده کند، MCP راه سادهتری برای این ارتباط فراهم میکند.
قابلیت Write to Canvas چیست؟
یکی از مهمترین تغییرات MCP فیگما، قابلیت Write to Canvas یا «نوشتن روی بوم» است.
در روش قدیمی، عامل طراحی را میخواند و کد تولید میکرد.
حالا در نسخههای جدید، عاملهای پشتیبانیشده میتوانند از طریق ابزار use_figma محتوای واقعی فیگما را ایجاد یا تغییر دهند. این تغییرات میتواند شامل Frame، Component، Variable و Auto Layout باشد.
فرض کنید یک سیستم طراحی در فیگما دارید و میخواهید یک صفحه تنظیمات جدید بسازید.
میتوانید فایل فیگما یا یک Selection را در اختیار عامل قرار دهید و از آن بخواهید:
با استفاده از کامپوننتهای موجود، یک صفحه تنظیمات جدید ایجاد کن.
عامل میتواند ابتدا ساختار موجود را بررسی کند و سپس عناصر واقعی فیگما را روی بوم ایجاد کند.
این تفاوت مهمی با تولید یک تصویر دارد.
خروجی، یک تصویر ثابت نیست. عناصر ایجادشده در فیگما قابل بررسی و ویرایش هستند.
فیگما توضیح میدهد که ابزار use_figma برای ایجاد و تغییر اشیای واقعی فیگما استفاده میشود و مهارت figma-use نیز دستورالعمل لازم برای استفاده درست از این ابزار را در اختیار عامل قرار میدهد.
البته نباید از این قابلیت انتظار طراحی کاملاً خودکار داشت.
عامل ممکن است کامپوننت نامناسبی انتخاب کند یا چیدمان پیشنهادی آن نیاز به اصلاح داشته باشد. خود فیگما نیز اشاره میکند که خروجیهای تولیدشده در دوره بتا ممکن است به اصلاح دستی نیاز داشته باشند.
Figma MCP با چه ابزارهایی کار میکند؟
فهرست برنامههای سازگار با MCP فیگما در حال توسعه است و بهتر است برای آخرین وضعیت همیشه کاتالوگ رسمی فیگما بررسی شود.
در مستندات فعلی، ابزارهایی مانند Cursor، VS Code، Codex، Claude Code و Gemini CLI برای اتصال به Figma MCP راهنمای رسمی دارند.
در کنار این موارد، مستندات رسمی فیگما ابزارهای دیگری مانند Android Studio، Xcode، Warp، Replit و برخی محیطهای دیگر را نیز در فهرست Clientهای پشتیبانیشده آوردهاند. وضعیت پشتیبانی هر ابزار میتواند متفاوت باشد؛ برای مثال ممکن است یک Client از سرور Remote پشتیبانی کند اما قابلیت خاصی مانند نوشتن روی بوم را نداشته باشد.
Figma MCP و Cursor
Cursor میتواند به اطلاعات ساختاریافته فیگما دسترسی پیدا کند، از آن برای تولید کد استفاده کند و در روندهای پشتیبانیشده تغییرات را دوباره به فیگما برگرداند.
Figma MCP و VS Code
در VS Code میتوانید سرور Remote فیگما را به تنظیمات MCP اضافه کنید و پس از احراز هویت، از آن در روند توسعه استفاده کنید.
Figma MCP و Codex
Codex نیز به Context ساختاریافته فیگما دسترسی دارد و میتواند در روندهای پشتیبانیشده برای خواندن طراحی، تولید کد و نوشتن روی بوم استفاده شود.
Figma MCP و Claude Code
Claude Code نیز در مستندات رسمی فیگما به عنوان یکی از ابزارهای متصل به MCP معرفی شده است.
Figma MCP و Gemini CLI
Gemini CLI نیز میتواند به اطلاعات طراحی فیگما دسترسی داشته باشد و در روندهای پشتیبانیشده از قابلیتهای MCP استفاده کند.
نکته مهم این است که MCP کیفیت کد را به تنهایی تعیین نمیکند. مدلی که ابزار موردنظر استفاده میکند و نحوه اجرای آن عامل نیز روی خروجی نهایی اثر دارند.
آموزش نصب و راهاندازی Figma MCP
فیگما در حال حاضر دو روش اصلی برای اتصال MCP ارائه میکند:
Remote MCP Server
Desktop MCP Server
فیگما برای بیشتر کاربران استفاده از Remote MCP را پیشنهاد میکند. این نسخه مستقیماً به سرور میزبانیشده فیگما متصل میشود و گستردهترین مجموعه قابلیتها را در اختیار میگذارد. Desktop MCP از طریق برنامه دسکتاپ فیگما اجرا میشود و بیشتر برای برخی نیازهای سازمانی و Enterprise در نظر گرفته شده است.
راهاندازی Remote MCP
نشانی رسمی سرور Remote این است:
https://mcp.figma.com/mcp
برای نمونه، تنظیمات VS Code میتواند به شکل زیر باشد:
{
"inputs": [],
"servers": {
"figma": {
"url": "https://mcp.figma.com/mcp",
"type": "http"
}
}
}
در VS Code، فیگما راهنمای مشخصی برای اضافهکردن این سرور به mcp.json ارائه کرده است. بعد از راهاندازی، باید فرآیند احراز هویت را با حساب فیگما انجام دهید.
اما یک نکته مهم را در نظر بگیرید:
تنظیمات همه ابزارها یکسان نیست.
اگر از Cursor، Codex یا Client دیگری استفاده میکنید، راهنمای همان برنامه را دنبال کنید. فیگما برای ابزارهای اصلی راهنمای جداگانه ارائه کرده است.
بعد از اتصال چه کاری انجام دهیم؟
بعد از اینکه MCP را متصل کردید، میتوانید لینک یک فایل فیگما یا لینک یک Selection را در اختیار عامل قرار دهید.
برای مثال:
این صفحه را بررسی کن و ساختار React آن را پیشنهاد بده.
یا:
از کامپوننتهای موجود در این فایل استفاده کن و یک صفحه تنظیمات مشابه بساز.
فیگما توضیح میدهد که در Remote MCP، عامل از لینک فایل یا لایه برای شناسایی بخش موردنظر استفاده میکند.
Remote MCP یا Desktop MCP؛ کدام گزینه بهتر است؟
برای بیشتر کاربران، Remote MCP انتخاب مناسبتری است.
Remote MCP روی زیرساخت فیگما اجرا میشود و نیازی به اجرای برنامه دسکتاپ فیگما برای برقراری اتصال ندارد.
Desktop MCP از طریق برنامه دسکتاپ فیگما اجرا میشود و برای برخی روندهای کاری سازمانی و Enterprise کاربرد دارد.
طبق راهنمای فعلی فیگما، Remote MCP روی همه نوع صندلی و پلن در دسترس است، در حالی که Desktop MCP به صندلی Dev یا Full در پلنهای پولی نیاز دارد. فیگما همچنین Remote MCP را برای دسترسی به گستردهترین مجموعه قابلیتها پیشنهاد میکند.
مورد | Remote MCP | Desktop MCP |
|---|---|---|
محل اجرا | سرورهای فیگما | برنامه دسکتاپ فیگما |
مناسب برای بیشتر کاربران | بله | معمولاً خیر |
نیاز به برنامه دسکتاپ | خیر | بله |
دسترسی به گستردهترین قابلیتها | بله | محدودتر |
کاربرد سازمانی | بله | بهویژه برای برخی سناریوهای سازمانی |
اگر تازه میخواهید MCP را امتحان کنید، معمولاً بهتر است از Remote شروع کنید.
Figma MCP برای React و توسعهدهندگان فرانتاند
برای یک توسعهدهنده React، ارزش MCP زمانی مشخص میشود که آن را در کنار کد واقعی پروژه قرار دهیم.
فرض کنید یک صفحه Dashboard در فیگما دارید و میخواهید آن را در یک پروژه React و TypeScript پیاده کنید.
روند کار میتواند اینطور باشد:
فیگما ← MCP ← Cursor یا Codex ← React + TypeScript ← بازبینی توسعهدهنده
عامل هوش مصنوعی میتواند اطلاعات طراحی را دریافت کند و یک پیادهسازی اولیه پیشنهاد دهد.
اگر سیستم طراحی و Code Connect نیز بهدرستی تنظیم شده باشند، اطلاعات بیشتری درباره کامپوننتهای واقعی پروژه در اختیار عامل قرار میگیرد.
اما خروجی نباید بدون بررسی وارد محصول نهایی شود.
توسعهدهنده باید موارد زیر را بررسی کند:
معماری کد
استفاده مجدد از کامپوننتها
دسترسپذیری
رفتار واکنشگرا
سرعت و عملکرد
ساختار HTML
مدیریت وضعیت
نگهداشتپذیری کد
رعایت سیستم طراحی
MCP باعث میشود اطلاعات طراحی بهتر به دست عامل برسد؛ اما جای بررسی فنی توسعهدهنده را نمیگیرد.
Figma MCP و سیستم طراحی
کیفیت فایل فیگما تأثیر مستقیمی بر کیفیت زمینه دارد که در اختیار عامل قرار میگیرد.
فرض کنید یک فایل بزرگ با صدها کامپوننت دارید. اگر نامگذاری، متغیرها و ساختار کامپوننتها منظم باشند، عامل اطلاعات قابلاستفادهتری دریافت میکند.
اما اگر فایل پر از لایه های بدون نام، کامپوننتهای تکراری و متغیرهای نامشخص باشد، کار برای عامل سختتر میشود.
برای آمادهسازی سیستم طراحی بهتر است موارد زیر مرتب باشند:
نامگذاری کامپوننتها
ساختار Variantها
متغیرها
توکنهای طراحی
رنگها
تایپوگرافی
فاصلهها
چیدمان خودکار
کتابخانه کامپوننتها
فیگما در قابلیت نوشتن روی بوم نیز بر استفاده از کامپوننتها، متغیرها و قواعد چیدمان موجود تأکید میکند. هدف این است که عامل به جای ساختن اجزای مشابه، تا حد امکان از سیستم طراحی موجود استفاده کند.
به زبان ساده:
سیستم طراحی مرتب ← Context بهتر ← تصمیمهای دقیقتر عامل ← خروجی قابلاعتمادتر
البته این یک رابطه تضمینشده نیست؛ مدل و روند کاری نیز نقش مهمی دارند.
Figma MCP و Code Connect
اگر یک سیستم طراحی واقعی در کد پروژه دارید، Code Connect میتواند ارتباط میان طراحی و کد را دقیقتر کند.
فرض کنید در فیگما یک کامپوننت Button دارید و در پروژه React نیز یک Button واقعی وجود دارد.
بدون ارتباط میان این دو، عامل ممکن است هنگام تولید کد یک Button جدید بسازد.
Code Connect برای همین ارتباط طراحی شده است. این قابلیت کامپوننتهای موجود در مخزن کد را به کامپوننتهای متناظر در فایل طراحی متصل میکند. فیگما میگوید این اتصال به MCP کمک میکند اطلاعات دقیقتری درباره پیادهسازی واقعی کامپوننتها در اختیار عامل قرار گیرد.
Code Connect در حال حاضر برای پلنهای Organization و Enterprise و با صندلی Dev یا Full در دسترس است. فیگما دو روش Code Connect UI و Code Connect CLI را نیز ارائه میکند.
پس در یک تیم حرفهای میتوان چنین روندی داشت:
کامپوننت فیگما ← اتصال کد ← MCP ← عامل هوش مصنوعی ← کامپوننت واقعی پروژه
این کار به معنی تضمین کد بینقص نیست، اما Context بهتری درباره کد موجود در اختیار عامل قرار میدهد.
کاربردهای واقعی MCP فیگما
MCP فیگما زمانی ارزش خود را نشان میدهد که بخشی از روند کاری واقعی تیم باشد.
۱. تبدیل طراحی به کد
شناختهشدهترین کاربرد، تبدیل یک طراحی فیگما به پیادهسازی اولیه است.
برای مثال:
Frame فیگما ← MCP ← کرسر ← ری اکت
عامل ساختار طراحی را دریافت میکند و کد اولیه را پیشنهاد میدهد.
توسعهدهنده بعد از آن کد را بازبینی و اصلاح میکند.
۲. انتقال کد به بوم فیگما
جهت حرکت دیگر فقط از طراحی به کد نیست.
فیگما امکان تبدیل رابط زنده وب، از جمله رابط موجود در محیط توسعه محلی یا محیط آزمایشی، به لایههای قابل ویرایش در فیگما را نیز در برخی Clientهای پشتیبانیشده فراهم کرده است.
برای مثال:
رابط React ← MCP ← بوم فیگما ← بازبینی طراحی
این روش برای تیمهایی مفید است که ابتدا نمونه اولیه را در کد میسازند و سپس میخواهند آن را در فیگما بررسی و اصلاح کنند.
۳. ساخت نمونه اولیه
میتوان از عامل برای ساخت سریع یک Screen یا جریان اولیه استفاده کرد.
بعد طراح آن را بررسی میکند و تغییرات لازم را انجام میدهد.
۴. تغییرات تکراری در رابط
فرض کنید باید در چند بخش محصول یک Empty State مشابه اضافه شود.
اگر سیستم طراحی مناسب باشد، عامل میتواند در روند کاری تعریفشده به انجام چنین تغییراتی کمک کند.
۵. کار با سیستم طراحی
عامل میتواند در ساخت یا اصلاح مواردی مانند کامپوننت، متغیر و چیدمان کمک کند؛ البته دسترسی و قابلیتهای دقیق به ابزار و حساب کاربر وابسته است.
۶. نزدیکتر کردن طراحی و توسعه
MCP میتواند فاصله میان طراح و توسعهدهنده را کمتر کند.
توسعهدهنده اطلاعات طراحی را در محیط کاری خودش دریافت میکند و در مسیر مقابل، برخی رابطهای ساختهشده در کد نیز میتوانند دوباره به فیگما منتقل شوند.
دو مثال کاربردی از روند کاری
مثال اول: ساخت یک Dashboard با React
فرض کنید یک Dashboard کامل در فیگما طراحی شده است.
ابتدا لینک Frame را در اختیار عامل قرار میدهید.
سپس از آن میخواهید:
این صفحه را با React و TypeScript پیادهسازی کن. از کامپوننتهای موجود پروژه استفاده کن و نسخه موبایل را نیز در نظر بگیر.
عامل اطلاعات طراحی را از طریق MCP دریافت میکند.
اگر Code Connect نیز فعال باشد، اطلاعات بیشتری درباره کامپوننتهای واقعی پروژه در اختیار آن قرار میگیرد.
بعد توسعهدهنده خروجی را بررسی میکند و مواردی مانند ساختار کد، دسترسپذیری و عملکرد را اصلاح میکند.
در اینجا MCP سرعت انتقال اطلاعات میان طراحی و توسعه را بالا میبرد؛ اما تصمیم نهایی همچنان با توسعهدهنده است.
مثال دوم: انتقال رابط ساختهشده به فیگما
فرض کنید توسعهدهنده یک Prototype را با React ساخته است.
حالا طراح میخواهد آن را در فیگما بررسی کند.
در Clientهای پشتیبانیشده، میتوان رابط زنده وب را از مرورگر به فیگما منتقل کرد و آن را به صورت لایههای قابل ویرایش در اختیار طراح گذاشت.
در این حالت روند به شکل زیر است:
رابط وب ← MCP ← فیگما ← بازبینی و اصلاح
این روش بهخصوص برای جلسات طراحی و توسعه محصول میتواند مفید باشد.
Figma MCP و Figma Weave
Figma Weave یک محیط کاری بصری مبتنی بر هوش مصنوعی است که برای ساخت و اجرای روندهای خلاقانه استفاده میشود.
در سال ۲۰۲۶، فیگما ارتباط میان Weave و MCP را نیز توسعه داده است. طبق اعلام رسمی فیگما، از طریق MCP میتوان ابزارهای Weave را از برخی برنامههای متصل مانند ChatGPT، Claude و Cursor اجرا کرد. عامل میتواند ابزار موردنیاز را پیدا کند، آن را اجرا کند و نتیجه را در همان گفتوگو برگرداند.
همچنین فیگما روشهایی برای قرار گرفتن روندهای Weave در کنار Frameهای فیگما معرفی کرده است.
نباید MCP و Weave را یک فناوری واحد بدانیم.
MCP روش ارتباط عامل با ابزارهاست؛ Weave یک محیط و مجموعهای از روندهای خلاقانه است.
ترکیب این دو، مسیرهای بیشتری برای کار با هوش مصنوعی در کنار طراحی ایجاد میکند.
محدودیتها و چالشهای Figma MCP
MCP فیگما امکانات زیادی دارد، اما چند محدودیت مهم را باید در نظر گرفت.
کیفیت فایل فیگما
فایل نامنظم، Context نامنظم ایجاد میکند.
اگر کامپوننتها و لایهها نامگذاری مناسبی نداشته باشند، عامل نیز اطلاعات کمتری برای تصمیمگیری دارد.
کیفیت سیستم طراحی
سیستم طراحی ضعیف باعث میشود عامل گزینههای کمتری برای استفاده از اجزای واقعی پروژه داشته باشد.
کیفیت مدل هوش مصنوعی
MCP اطلاعات را منتقل میکند، اما تصمیمگیری همچنان به مدل و عامل وابسته است.
ممکن است دو ابزار متصل به یک MCP، با یک فایل مشابه، خروجیهای متفاوتی تولید کنند. خود فیگما نیز تأکید میکند که کد نهایی را Client و مدل مورد استفاده تولید میکنند، نه سرور MCP.
محدودیت درخواست
میزان استفاده از MCP به حساب، صندلی و پلن بستگی دارد و محدودیتهای استفاده ممکن است با تغییر سیاستهای فیگما تغییر کنند.
برای اطلاعات دقیق درباره محدودیتها باید مستندات رسمی همان زمان را بررسی کرد.
احراز هویت و مجوز دسترسی
اتصال MCP نیازمند احراز هویت است.
همچنین عاملی که قرار است فایل را تغییر دهد باید مجوز لازم را داشته باشد. برای نوشتن روی بوم، دسترسی ویرایش فایل لازم است.
امنیت
وقتی یک عامل هوش مصنوعی به طراحی و کد پروژه دسترسی دارد، مدیریت دسترسی اهمیت بیشتری پیدا میکند.
بهتر است:
فقط دسترسی موردنیاز را بدهید.
فایلهای حساس را بدون بررسی در اختیار عامل قرار ندهید.
مجوزهای تیم را مدیریت کنید.
تغییرات ایجادشده توسط عامل را بازبینی کنید.
قبل از استفاده سازمانی، سیاستهای امنیتی شرکت را بررسی کنید.
نیاز به بازبینی انسانی
این شاید مهمترین نکته باشد.
MCP قرار نیست جلوی همه خطاهای هوش مصنوعی را بگیرد.
بهتر است روند کاری را اینگونه ببینیم:
هوش مصنوعی ← پیشنهاد و اجرا
انسان ← بررسی و تصمیم نهایی
هزینه و دسترسی Figma MCP در سال ۲۰۲۶
وضعیت دسترسی MCP را باید از قابلیتهای مختلف آن جدا کرد.
طبق مستندات فعلی فیگما، Remote MCP روی همه صندلیها و پلنها در دسترس است. با این حال، میزان استفاده و محدودیت درخواست بر اساس نوع صندلی و پلن متفاوت است. Desktop MCP به صندلی Dev یا Full در پلنهای پولی نیاز دارد.
از طرف دیگر، قابلیت نوشتن روی بوم هنوز در دوره بتا قرار دارد.
فیگما اعلام کرده است که Write to Canvas در حال حاضر برای صندلیهای Full و Dev در پلنهای پولی ارائه میشود و در دوره بتا رایگان است؛ این قابلیت در آینده قرار است به مدل مبتنی بر میزان مصرف منتقل شود. صندلی Dev نیز خارج از Drafts دسترسی فقط خواندنی دارد.
بنابراین جملهای مثل «MCP فیگما کاملاً رایگان است» دقیق نیست.
بهتر است بگوییم:
دسترسی به MCP و قابلیتهای مختلف آن به پلن، صندلی، نوع سرور و وضعیت بتای قابلیت موردنظر بستگی دارد.
این موضوع بهخصوص برای تیمهای سازمانی مهم است، چون قبل از پیادهسازی گسترده باید محدودیتهای استفاده، مجوزها و شرایط پلن بررسی شوند.
آیا Figma MCP جایگزین طراح یا برنامهنویس میشود؟
نه.
MCP یک فناوری ارتباطی است، نه جایگزین تخصص انسانی.
عامل هوش مصنوعی میتواند یک صفحه را بسازد، اما هنوز باید درباره کیفیت تجربه کاربری آن تصمیم گرفت.
میتواند کد React تولید کند، اما باید مشخص شود آیا معماری آن برای پروژه مناسب است یا خیر.
میتواند یک کامپوننت بسازد، اما باید بررسی شود که آیا واقعاً به کامپوننت جدید نیاز داریم یا نمونه موجود در سیستم طراحی کافی است.
مواردی مانند این همچنان به قضاوت انسانی نیاز دارند:
تجربه کاربری
معماری اطلاعات
دسترسپذیری
معماری نرمافزار
عملکرد
امنیت
نگهداشتپذیری
تصمیمهای محصول
بنابراین مدل واقعبینانهتر این است:
طراح + توسعهدهنده + عامل هوش مصنوعی + MCP
نه اینکه MCP را جایگزین طراح یا برنامهنویس بدانیم.
آینده Figma MCP
اگر روند فعلی فیگما را دنبال کنیم، یک مسیر مشخص دیده میشود.
در ابتدا، تمرکز روی خواندن اطلاعات طراحی بود.
بعد، این اطلاعات برای تولید کد آگاه از طراحی استفاده شد.
حالا با Write to Canvas، مسیر خواندن و نوشتن شکل گرفته است.
همزمان، انتقال رابط زنده وب به فیگما و ارتباط میان Code و Canvas نیز در حال گسترش است.
به همین دلیل میتوان روند کاری آینده را به صورت زیر تصور کرد:
سیستم طراحی ← عامل هوش مصنوعی ← فیگما ← کد ← آزمایش ← فیگما
البته نباید درباره آینده با قطعیت صحبت کرد.
اما جهت فعلی روشن است: فیگما در حال توسعه MCP از یک ابزار صرفاً برای انتقال Context به یک زیرساخت گستردهتر برای همکاری میان طراحی، کد و عاملهای هوش مصنوعی است.
برای تیمهایی که سیستم طراحی منظم و کد پروژه ساختاریافته دارند، این تغییر اهمیت بیشتری خواهد داشت.
بهترین روش استفاده حرفهای از Figma MCP
اگر قصد دارید MCP را در یک پروژه واقعی استفاده کنید، نصب سرور فقط قدم اول است.
اول فایل فیگما را مرتب کنید.
کامپوننتها، متغیرها، Variantها و نامگذاریها را بررسی کنید.
اگر پروژه یک سیستم طراحی واقعی دارد، ساختار آن را مشخص کنید. در صورت داشتن شرایط لازم، Code Connect نیز میتواند ارتباط میان کامپوننتهای فیگما و کد پروژه را دقیقتر کند.
بعد، درخواستهای مشخصی برای عامل بنویسید.
به جای:
این صفحه را بساز.
بهتر است بنویسید:
این Frame را با React و TypeScript پیادهسازی کن. از کامپوننتهای موجود در سیستم طراحی استفاده کن. اگر کامپوننت مناسبی وجود ندارد، دلیل ایجاد کامپوننت جدید را توضیح بده. نسخه موبایل را نیز در نظر بگیر و در پایان دسترسپذیری و استفاده مجدد از کامپوننتها را بررسی کن.
این درخواست، محدودیت و اطلاعات بیشتری در اختیار عامل قرار میدهد.
یک روند کاری مناسب میتواند چنین باشد:
فایل فیگما را مرتب کنید.
سیستم طراحی را بررسی کنید.
Remote MCP را به ابزار موردنظر متصل کنید.
احراز هویت را انجام دهید.
Frame یا Selection موردنظر را مشخص کنید.
Context طراحی را دریافت کنید.
درخواست دقیق بنویسید.
خروجی عامل را بررسی کنید.
تست و بازبینی انجام دهید.
نتیجه را دوباره با طراحی مقایسه کنید.
جمعبندی
Figma MCP Server را نباید فقط ابزاری برای تبدیل یک فایل فیگما به کد بدانیم.
تفاوت اصلی با روش قدیمی در اطلاعاتی است که در اختیار هوش مصنوعی قرار میگیرد.
در روش ساده، مسیر این بود:
تصویر صفحه ← هوش مصنوعی ← حدس ← کد
با MCP، مسیر میتواند چنین باشد:
اطلاعات ساختاریافته فیگما ← عامل هوش مصنوعی ← کد آگاه از طراحی
و با قابلیتهای جدیدتر:
فیگما ↔ عامل هوش مصنوعی ↔ بوم فیگما
این تغییر برای طراحان، توسعهدهندگان فرانتاند و تیمهای محصول مهم است؛ چون مرز میان طراحی و توسعه را تا حدی کمرنگ میکند.
در عین حال، MCP جای Figma API را نمیگیرد و قرار نیست جای طراح یا برنامهنویس را هم بگیرد.
بیشترین ارزش آن زمانی ایجاد میشود که چند بخش کنار هم قرار بگیرند:
فیگما + سیستم طراحی + Code Connect + MCP + عامل هوش مصنوعی + کد پروژه
در چنین شرایطی، MCP میتواند انتقال اطلاعات میان طراحی و توسعه را سریعتر و دقیقتر کند.
مسیر آینده نیز بیشتر به سمت یک چرخه دوطرفه حرکت میکند:
طراحی ← Context ← عامل ← کد ← بازبینی ← بوم فیگما
برای همین، اگر با فیگما، طراحی محصول یا توسعه فرانتاند کار میکنید، MCP را بهتر است نه به عنوان یک ابزار جادویی، بلکه به عنوان زیرساختی برای وصل کردن طراحی، کد و هوش مصنوعی ببینید.
دیدگاه ها