هووورا

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

۲ روز و ۰۸:۳۶
گرافیک دیزاین

سرور MCP فیگما چیست و چگونه فاصله‌ی طراح و توسعه‌دهنده را پر می‌کند؟

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

ارسطو اعتمادی
۵ اردیبهشت ۱۴۰۵ · 19 دقیقه مطالعه
سرور MCP فیگما چیست و چگونه فاصله‌ی طراح و توسعه‌دهنده را پر می‌کند؟

سرور MCP فیگما چیست و چگونه فاصله‌ی طراح و توسعه‌دهنده را پر می‌کند؟

یکی از قدیمی‌ترین دردسرهای تیم‌های محصول، تبدیل طرح گرافیکی به کد است. طراح در فیگما ساعت‌ها روی فاصله‌ها، رنگ‌ها و کامپوننت‌ها کار می‌کند، اما وقتی نوبت پیاده‌سازی می‌رسد، توسعه‌دهنده ناگزیر است مقادیر را دانه‌دانه بازخوانی کند یا از اسکرین‌شات حدس بزند. نتیجه معمولاً یک نسخه‌ی «تقریبی» از طراحی است که هم طراح را ناراضی می‌کند و هم توسعه‌دهنده را خسته.
در ژوئن ۲۰۲۵، فیگما ابزاری را در نسخه‌ی بتا معرفی کرد که قرار است این فاصله را تا حد زیادی از میان بردارد: سرور MCP فیگما. این سرور به ابزارهای هوش مصنوعی مانند Cursor، Claude Code و VS Code اجازه می‌دهد ساختار واقعی طراحی شما را بخوانند، نه فقط تصویر آن را. در این مقاله از صفر توضیح می‌دهیم MCP چیست، سرور MCP فیگما چگونه کار می‌کند، چرا برای طراحان ایرانی مهم است و در کدام نقاط هنوز محدودیت دارد.

سرور MCP فیگما

MCP چیست و از کجا آمده است؟

MCP مخفف Model Context Protocol (پروتکل زمینه‌ی مدل) است؛ یک استاندارد باز که در ۲۵ نوامبر ۲۰۲۴ توسط شرکت Anthropic (سازنده‌ی Claude) معرفی و متن‌باز شد. هدف این استاندارد حل یک مشکل ساده اما بزرگ بود: مدل‌های زبانی بزرگ، هر چقدر هم قدرتمند باشند، به‌صورت پیش‌فرض هیچ دسترسی مستقیمی به داده‌ها و ابزارهای روزمره‌ی ما ندارند.
پیش از MCP، هر ابزار هوش مصنوعی ناچار بود برای هر سرویس خارجی (گوگل درایو، گیت‌هاب، اسلک، فیگما و…) یک اتصال اختصاصی بسازد. این رویکرد در مقیاس کوچک جواب می‌داد، اما وقتی تعداد مدل‌ها در M و تعداد ابزارها در N ضرب می‌شد، نگهداری اتصال‌ها به کابوس تبدیل می‌شد. MCP این مسئله را با تعریف یک زبان مشترک حل کرد: هر ابزار خارجی یک «سرور MCP» می‌سازد و هر مدل هوش مصنوعی می‌تواند به‌عنوان «کلاینت MCP» با آن صحبت کند.
تعبیر رایجی که برای توصیف MCP به کار می‌رود، این است: «MCP برای هوش مصنوعی همان کاری را می‌کند که USB-C برای دستگاه‌ها انجام داد.» یک پورت استاندارد که هر چیزی می‌تواند به آن متصل شود. این استاندارد به‌سرعت مورد پذیرش قرار گرفت؛ تا پایان سال ۲۰۲۵، شرکت‌هایی مانند OpenAI، Google و Microsoft نیز به‌طور رسمی از آن پشتیبانی کرده‌اند.


سرور MCP فیگما چیست؟

سرور MCP فیگما یک پیاده‌سازی از همین استاندارد MCP برای فیگماست. وقتی این سرور فعال می‌شود، ابزار هوش مصنوعی شما (مثلاً Cursor یا Claude Code) می‌تواند مستقیماً محتوای فایل فیگمای شما را بخواند: از سلسله‌مراتب لایه‌ها و قوانین Auto Layout گرفته تا استایل‌های متن، خواص کامپوننت‌ها، متغیرها و ارجاع‌های تصویر. این داده‌ی ساختاریافته جایگزین روش قدیمی یعنی ارسال اسکرین‌شات به مدل می‌شود.

فیگما این سرور را در ژوئن ۲۰۲۵ به‌صورت بتا معرفی کرد و از همان ابتدا آن را با ابزارهای پرطرفدار مانند GitHub Copilot در VS Code، Cursor، Windsurf و Claude Code سازگار ساخت. در سال ۲۰۲۶، قابلیت‌های تازه‌تری نیز اضافه شد؛ از جمله امکان نوشتن مستقیم روی بوم فیگما از طریق ابزار کدنویسی، و ابزار مخصوص Claude Code که رابط کاربری اجرا شده در مرورگر را به‌صورت لایه‌های قابل ویرایش به فیگما منتقل می‌کند.

سرور MCP فیگما

دو نسخه‌ی سرور: ریموت و دسکتاپ

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

نسخه‌ی «دسکتاپ» اما به‌صورت محلی در کنار اپلیکیشن فیگما اجرا می‌شود و مبتنی بر انتخاب است؛ یعنی هر لایه‌ای که در فیگما انتخاب کنید، به‌عنوان زمینه به ابزار هوش مصنوعی ارسال می‌شود. فیگما نسخه‌ی دسکتاپ را بیشتر برای کاربردهای سازمانی خاص توصیه می‌کند، اما برای اکثر کاربران، نسخه‌ی ریموت گزینه‌ی بهتر است.

پلِ میان طراح و توسعه‌دهنده چگونه ساخته می‌شود؟

برای درک ارزش واقعی سرور MCP فیگما، باید ببینیم مشکل سنتی انتقال طرح به کد دقیقاً از کجا می‌آید. دو روش رایج قبلی، هر دو با محدودیت‌های جدی همراه بودند.
در روش اول، توسعه‌دهنده اسکرین‌شاتی از فیگما می‌گرفت و به مدل هوش مصنوعی می‌داد. مدل باید از روی پیکسل‌ها حدس می‌زد که فاصله‌ی میان دو کارت ۲۴ پیکسل است یا ۲۰ پیکسل، یا اینکه رنگ دقیق چیست. نتیجه معمولاً «شبیه» طراحی بود، اما هرگز یکسان نمی‌شد. در روش دوم، توسعه‌دهنده با استفاده از REST API فیگما، داده‌ی خام را می‌خواند؛ اما این داده آن‌قدر حجیم و پر از نویز بود که تقریباً هیچ مدلی نمی‌توانست از عهده‌ی پردازش آن برآید.
سرور MCP فیگما رویکرد متفاوتی را در پیش گرفته است. این سرور داده‌ی خام را از API فیگما می‌گیرد، نویز را حذف می‌کند و آن را به شکلی تمیز و فشرده بازنویسی می‌کند که مدل بتواند مستقیماً روی آن عمل کند. برای مثال، موقعیت‌های پیکسلی به روابط Layout (مانند «در مرکز والد قرار گرفته است») ترجمه می‌شوند، کدهای رنگ Hex به ارجاع‌های Design Token (توکن طراحی) تبدیل می‌شوند، و لایه‌های عمیق و تودرتو به ساختاری منطقی بدل می‌شوند.

کپی لینک سلکشن برای استفاده در کد
کپی لینک سلکشن برای استفاده در کد

کاربردهای عملی برای طراحان و توسعه‌دهندگان

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

برای طراح

اگر طراح هستید، MCP ماهیت فرآیند Handoff (تحویل طرح) را تغییر می‌دهد. پیش‌تر، کیفیت کد نهایی به میزان دقت توسعه‌دهنده در بازخوانی طرح بستگی داشت. اکنون، کیفیت خروجی وابسته به این است که فایل فیگمای شما تا چه حد «قابل خواندن توسط هوش مصنوعی» است. این یعنی استفاده‌ی منظم از Auto Layout، نام‌گذاری درست لایه‌ها، تعریف Variable و Design Token و ساختن کامپوننت‌های منسجم، مستقیماً روی کیفیت کد تولیدی اثر می‌گذارد. به تعبیر یکی از تحلیل‌گران LogRocket، چرخه‌ی قدیمی «طراح به توسعه‌دهنده» در حال تبدیل شدن به «طراح به عامل هوشمند» است.

برای توسعه‌دهنده‌ی فرانت‌اند

اگر توسعه‌دهنده‌ی فرانت‌اند هستید، سرور MCP فیگما سرعت ساخت اولیه‌ی کامپوننت‌ها را به‌طور محسوسی افزایش می‌دهد. جریان کاری پایه ساده است: فریمی را در فیگما انتخاب یا لینک آن را کپی می‌کنید، در Cursor یا Claude Code می‌چسبانید و از مدل می‌خواهید طراحی را پیاده‌سازی کند. خروجی پیش‌فرض معمولاً React + Tailwind است، اما شما می‌توانید با پرامپت دقیق‌تر، زبان و فریم‌ورک دلخواه خود را مشخص کنید.

برای تیم Design System

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

راه‌اندازی اولیه‌ی سرور MCP فیگما

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

help.figma.com/hc/en-us/articles/32132100833559

  1. داشتن یک حساب فیگما با Seat نوع Dev یا Full روی یک پلن پرداختی (Professional، Organization یا Enterprise). سرور ریموت روی همه‌ی پلن‌ها در دسترس است، اما دسترسی کامل به ابزارها نیازمند Seat مناسب است.
  2. نصب یکی از ابزارهای کدنویسی پشتیبانی‌شده: VS Code، Cursor، Windsurf، Claude Code یا Codex.
  3. افزودن سرور MCP فیگما به ابزار کدنویسی؛ برای نسخه‌ی ریموت، آدرس https://mcp.figma.com/mcp در تنظیمات MCP ابزار ثبت می‌شود.
  4. احراز هویت: پس از افزودن سرور، ابزار شما را به مرورگر هدایت می‌کند تا حساب فیگمای خود را متصل کنید.
  5. چسباندن لینک یک فریم در چت هوش مصنوعی و نوشتن یک پرامپت مشخص، مانند: «این طرح را به کامپوننت React با Tailwind تبدیل کن.»

یک نکته‌ی مهم: طبق راهنمای رسمی فیگما، کاربران پلن Starter یا با Seat نوع View یا Collab روی پلن‌های پرداختی، به حداکثر شش فراخوانی ابزار در ماه محدود هستند. کاربران Dev یا Full Seat روی پلن‌های پرداختی، محدودیت‌های دقیقه‌ای مشابه Tier 1 در REST API فیگما را دارند.

سرور MCP فیگما

محدودیت‌ها و چالش‌های واقعی

با وجود هیجان پیرامون این ابزار، چند محدودیت جدی وجود دارد که شفاف مطرح کردن آنها مهم است.

پنجره‌ی محدود زمینه

داده‌ی طراحی یک صفحه‌ی پیچیده‌ی فیگما می‌تواند بسیار حجیم شود؛ بسیار حجیم‌تر از آنچه یک عامل کدنویسی در یک فراخوانی بتواند پردازش کند. برای نمونه، Claude Code به‌طور پیش‌فرض محدودیت ۲۵٬۰۰۰ توکنی برای پاسخ‌های ابزار MCP دارد. اگر شما به‌جای یک Node مشخص، کل یک صفحه را به سرور بدهید، پاسخ به‌راحتی از این حد فراتر می‌رود و بخشی از آن بریده می‌شود. راه‌حل عملی این است که همیشه فریم کوچک و دقیقی انتخاب کنید، نه کل صفحه.

جریان یک‌طرفه بودن Handoff

تحلیل‌گر Builder.io نکته‌ی مهمی را مطرح می‌کند: حتی با فعال بودن Code Connect، فرآیند از فیگما به کد یک مسیر یک‌طرفه است. مدل هوش مصنوعی هیچ دیدی از خروجی نهایی و رندرشده‌ی کد خودش ندارد. اگر استایلی از فایل دیگری استایل این کد را بازنویسی کند یا کامپوننت در صفحه به‌اشتباه رندر شود، مدل متوجه نمی‌شود. Design System شما نگاشت می‌شود، اما به‌صورت پویا اعمال نمی‌شود.

گم شدن اطلاعات در چرخه‌ی رفت و برگشت

با معرفی قابلیت Claude Code to Figma در فوریه ۲۰۲۶، چرخه‌ی کامل «کد به طراحی و برگشت» نیز ممکن شد. اما هر تبدیل اطلاعاتی از دست می‌دهد. وقتی طرح از فیگما به کد می‌رود، داده‌ی ساختاریافته، Layout و استایل‌ها را حفظ می‌کند، اما منطق کسب‌وکار، رویدادها، مدیریت State و فراخوانی‌های API منتقل نمی‌شوند. نتیجه اینکه، در هر دور، توسعه‌دهنده باید لایه‌ی غیرتصویری را دوباره اضافه کند.

دیدگاه‌های متنوع در جامعه‌ی طراحی

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

سِرگئی چیرکوف، طراح و نویسنده، این ابزار را «یک فلسفه‌ی تازه برای ساخت محصول» توصیف می‌کند و معتقد است که ترکیب فیگما و Cursor از طریق MCP، طراحان را از مرحله‌ی انتظار برای تیم مهندسی به مرحله‌ی ساخت مستقیم وارد می‌کند. در نقطه‌ی مقابل، تحلیل‌گر Builder.io تأکید می‌کند که «به‌عنوان توسعه‌دهنده‌ی باسابقه، واگذاری کارهای تکراری به هوش مصنوعی لذت‌بخش است؛ اما وقتی از مرحله‌ی آزمایش به ساخت نرم‌افزار آماده‌ی تولید می‌رسید، هنوز محدودیت‌های بنیادین زیادی می‌بینید.»

سیل بورمولر در پلتفرم Into Design Systems سرور MCP را یک «تغییر بنیادین برای Design Systemها» می‌داند و معتقد است نگرش تیم‌ها را از «Handoff» به «تولید کد بر مبنای طراحی» منتقل می‌کند. تیم فیگما نیز خود پذیرفته است که نسخه‌ی فعلی تازه آغاز راه است؛ ویژگی‌هایی مانند پشتیبانی از Annotation و Grid در نسخه‌های آینده اضافه خواهند شد.

نویسنده‌ی مقاله‌ی Medium در مجموعه‌ی Evalogical، پس از چند ساعت تجربه‌ی عملی می‌گوید: «راه‌اندازی سخت‌ترین بخش است. وقتی ابزار کار کرد، شبیه جادوست.» این دیدگاه با تجربه‌ی تحلیل‌گر Builder.io هم‌سوست که روی یک کامپوننت نسبتاً ساده، حدود چهار دقیقه و ۲۱۵ خط React و ۳۵۰ خط CSS خروجی گرفت؛ خروجی‌ای که «تقریباً شبیه طراحی بود، اما نه پیکسل‌پرفکت و بدون عملکرد واقعی دکمه‌ها.»

دسترسی و محدودیت‌ها برای کاربر ایرانی

این بخش مهم‌تر از آن است که نادیده گرفته شود. سرور MCP فیگما در پاره‌ای از جنبه‌ها برای کاربران داخل ایران دشواری‌های مضاعفی دارد.

نخست، دسترسی پایه به خود فیگما. بسیاری از کاربران ایرانی گزارش کرده‌اند که برای اتصال پایدار به فیگما به ابزارهای عبور از فیلترینگ نیاز دارند. طبق انجمن رسمی فیگما و گزارش Internet Society، تحریم‌های بین‌المللی و محدودیت‌های داخلی باعث می‌شوند IPهای ایرانی در برخی سرویس‌های ابری از جمله فیگما با اختلال روبه‌رو شوند. حتی ثبت‌نام با شماره تلفن +۹۸ در بسیاری از پلتفرم‌ها ممکن نیست.

دوم، دسترسی به پلن Dev یا Full. سرور MCP فیگما در نسخه‌ی بتا اکنون رایگان است، اما فیگما اعلام کرده این قابلیت در آینده تبدیل به ویژگی پولی مبتنی بر مصرف خواهد شد. حتی در همین نسخه‌ی بتا، کاربران با Seat نوع View یا Collab به شش فراخوانی ابزار در ماه محدود هستند. دسترسی کامل نیازمند پلن پرداختی است و پرداخت با کارت بانکی ایرانی مستقیماً امکان‌پذیر نیست.

سوم، دسترسی به ابزارهای کدنویسی پشتیبانی‌شده. Cursor، Claude Code و مشابه آنها نیز اغلب نیازمند حساب بین‌المللی، پرداخت با کارت بین‌المللی و در برخی موارد IP غیرایرانی هستند. این یعنی فعال‌سازی این جریان کاری برای طراح ایرانی، معمولاً به یک زنجیره از ابزارها و دسترسی‌ها نیاز دارد؛ نه فقط خود فیگما. شفاف گفتن این واقعیت بخشی از انتخاب آگاهانه‌ی مسیر برای هر طراحی است.

جمع‌بندی و گام‌های بعدی

سرور MCP فیگما تلاشی جدی برای پایان دادن به یکی از فرسایشی‌ترین حلقه‌های کار مشترک در تیم‌های محصول است؛ یعنی تبدیل طرح به کد. این ابزار با خواندن ساختار واقعی فایل فیگما و ارائه‌ی آن به مدل‌های هوش مصنوعی، کیفیت خروجی را در مقایسه با اسکرین‌شات و API خام، به شکلی معنادار بهبود می‌دهد. اما هنوز در نسخه‌ی بتا، محدودیت‌هایی مانند پنجره‌ی زمینه، یک‌طرفه بودن Handoff و گم شدن منطق غیرتصویری در چرخه‌ی رفت و برگشت پابرجا هستند.
برای طراحان ایرانی، معادله یک گام پیچیده‌تر است؛ چون کیفیت این تجربه به زنجیره‌ای از دسترسی‌ها (فیگما، ابزار کدنویسی، پرداخت بین‌المللی و اتصال پایدار) بستگی دارد. با این حال، درک اصول MCP و آمادگی فایل‌های فیگما برای این جریان کاری، سرمایه‌گذاری‌ای است که احتمالاً در دو سال آینده بازگشت آشکاری خواهد داشت.
اگر این مقاله برای شما مفید بود و می‌خواهید تحلیل‌ها و آموزش‌های تازه درباره‌ی فیگما، هوش مصنوعی و جریان‌های کاری طراحان را زودتر دریافت کنید، به کانال تلگرام بیت‌گرف بپیوندید و دیدگاه خود درباره‌ی سرور MCP فیگما را با ما در میان بگذارید. تجربه‌ی عملی شما در این مسیر، بهترین منبع برای تکامل این مقاله خواهد بود.

۱۱۰ آتیش۰ دیدگاه1100 بازدید
ارسطو اعتمادی
۶۹۳ مقاله۱۲ دنبال‌کننده

کارشناس ارشد مهندسی مواد از دانشگاه تبریز. از ۱۳۹۰ در حوزه عکاسی و گرافیک‌ام؛ آنچه دلبستگی بود، حرفه شد. بیت گرف را ساختم، از دستش دادم و دوباره ( این‌بار استوارتر) از نو بنا کردم. مقصد روشن است: مرجعی جامع برای آموزش گرافیک، هوش مصنوعی و کد.

گفتگو و سوالات شما

۰

در این قسمت می‌توانید سوال یا نظر خود در مورد مقاله را مطرح کنید.

برای ثبت دیدگاه ابتدا وارد شوید

ورود به حساب

هنوز دیدگاهی ثبت نشده. اولین نفر باشید!

مقالات مرتبط

اگر این را دوست داشتید، ترتیب خواندن بعدی این است

این مقاله‌ها روی «فیگما» هم‌پوشانی دارند، مجموع زمان مطالعه ۴۴ دقیقه

مشاهده همه
  1. برچسب مشترک: فیگما

    تبدیل فایل PSD فتوشاپ به فیگما؛ راهنمایی کامل

    در این مقاله به روش‌هایی ‌می‌پردازیم که با استفاده از آن‌ها، انتقال و تبدیل فایل‌های PSD به فیگما را انجام داده و تا حد امکان کیفیت طراحی را حفظ می‌کنیم.

    بیت هاب۸ خرداد۱۰ دقیقه
  2. برچسب مشترک: فیگما

    آموزش فیگما | از یادگیری تا ورود به بازار کار

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

    بیت هاب۷ مهر۷ دقیقه
  3. برچسب مشترک: فیگما

    آموزش ساخت Liquid Glass در فیگما | افکت Glass

    مقدمه: تکنیک Glassmorphism یا همان افکت Glass ، در طراحی UI و UX یکی از سبک‌های مدرن و جذاب است که با بهره‌گیری از مات-سازی (blur)، شفافیت و انعکاس نور، حس شیشه‌ای یا نیمه‌شفافی را به المان‌ها می‌بخشد

    بیت هاب۱۶ آبان۹ دقیقه
  4. برچسب مشترک: فیگما

    Figma در مقابل Adobe XD: ما چگونه ابزار طراحی بعدی خود را انتخاب کردیم؟

    زمان تغییرات فرا رسید و تیم طراحی دوباره بحث در مورد مهاجرت از نرم افزار Sketch را شروع کرد. هر چند این اولین بار نبود اما جدی تر از قبل بود. تابستان گذشته در نظر داشتیم که نرم افزار دیگری را جایگزین

    بیت هاب۱۴ آذر۱۸ دقیقه
۰

دوره به سبد ثبت‌نام اضافه شد

رفتن به سبد