/ الدليل / الملعب / cursor-talk-to-figma-mcp
← كل الخوادم ↗ GitHub
● مجتمع grab ⚡ فوري

cursor-talk-to-figma-mcp

بواسطة grab · grab/cursor-talk-to-figma-mcp

دع Cursor أو Claude يقرآن وينشآن مستند Figma المباشر — إعادة تسمية الطبقات جماعياً، وحقن النصوص، وبناء المكونات، كل ذلك عبر الدردشة.

خادم MCP من TypeScript بالإضافة إلى إضافة Figma مصاحبة تتواصل عبر WebSocket. تكشف أكثر من 40 أداة تغطي التحديد والتعليقات والنصوص والتخطيط التلقائي والأنماط والمكونات والتصدير. اقرأ أولاً حتى تتمكن من الاستكشاف، ثم عدّل جماعياً بسرعة الوكيل.

▶ شاهد العرض 📦 التثبيت 💡 حالات الاستخدام

لماذا تستخدمه

الميزات الأساسية

عرض مباشر

كيف يبدو في الممارسة

cursor-talk-to-figma.replay ▶ جاهز
0/0

التثبيت

اختر العميل

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "cursor-talk-to-figma": {
      "command": "npx",
      "args": [
        "-y",
        "cursor-talk-to-figma-mcp"
      ],
      "_inferred": true
    }
  }
}

افتح Claude Desktop → Settings → Developer → Edit Config. أعد التشغيل بعد الحفظ.

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "cursor-talk-to-figma": {
      "command": "npx",
      "args": [
        "-y",
        "cursor-talk-to-figma-mcp"
      ],
      "_inferred": true
    }
  }
}

يستخدم Cursor نفس مخطط mcpServers مثل Claude Desktop. إعدادات المشروع أولى من الإعدادات العامة.

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "cursor-talk-to-figma": {
      "command": "npx",
      "args": [
        "-y",
        "cursor-talk-to-figma-mcp"
      ],
      "_inferred": true
    }
  }
}

انقر على أيقونة MCP Servers في شريط Cline الجانبي، ثم "Edit Configuration".

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "cursor-talk-to-figma": {
      "command": "npx",
      "args": [
        "-y",
        "cursor-talk-to-figma-mcp"
      ],
      "_inferred": true
    }
  }
}

نفس الصيغة مثل Claude Desktop. أعد تشغيل Windsurf لتطبيق التغييرات.

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "cursor-talk-to-figma",
      "command": "npx",
      "args": [
        "-y",
        "cursor-talk-to-figma-mcp"
      ]
    }
  ]
}

يستخدم Continue مصفوفة من كائنات الخادم بدلاً من خريطة.

~/.config/zed/settings.json
{
  "context_servers": {
    "cursor-talk-to-figma": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "cursor-talk-to-figma-mcp"
        ]
      }
    }
  }
}

أضف إلى context_servers. يعيد Zed التحميل تلقائيًا عند الحفظ.

claude mcp add cursor-talk-to-figma -- npx -y cursor-talk-to-figma-mcp

أمر من سطر واحد. تحقق باستخدام claude mcp list. احذف باستخدام claude mcp remove.

حالات الاستخدام

استخدامات عملية: cursor-talk-to-figma-mcp

كيفية تحديث كل طبقة نص في مستند Figma من موجه واحد

👤 المصممون + مديرو المنتجات الذين يجرون مراجعات النصوص أو التعريب ⏱ ~20 min intermediate

متى تستخدمه: لديك مواصفات تعيد تسمية 50 سلسلة ولا تريد النقر 50 مرة.

المتطلبات الأساسية
  • Bun مثبت — curl -fsSL https://bun.sh/install | bash
  • سطح مكتب Figma مفتوح مع الإضافة المرتبطة — Plugins > Development > Link existing plugin > أشر إلى src/cursor_mcp_plugin/manifest.json
  • جسر WebSocket قيد التشغيل — bun run start في المستودع المستنسخ
الخطوات
  1. الانضمام إلى القناة من لوحة الإضافة
    انضم إلى قناة Figma X7F2 وأدرج جميع عقد النصوص في الصفحة الحالية.✓ تم النسخ
    → قائمة معرّفات العقد مع النص الحالي
  2. تعيين النسخة القديمة إلى النسخة الجديدة
    إليك ملف CSV من old_string,new_string. لكل عقدة نص يتطابق محتواها مع old_string، استبدلها بـ new_string باستخدام set_multiple_text_contents.✓ تم النسخ
    → عدد التحديثات المطبقة، معاينة الفرق
  3. التحقق البصري من الخصائص
    صدّر الإطارات الثلاثة التي شهدت معظم التعديلات كملفات PNG حتى أتمكن من المراجعة.✓ تم النسخ
    → عناوين URL لـ PNG / مسارات الملفات

النتيجة: ملف تمت مراجعة نسخته بعناية مع تحديث كل سلسلة وتصدير قبل/بعد لإثباته.

المزالق
  • قطع الإضافة في منتصف العملية — set_multiple_text_contents متطابقة — أعد التشغيل بنفس التعيين؛ يتم تخطي العقد التي تم تصحيحها بالفعل
  • النص في المكونات مقابل الحالات يربك التحديثات — استخدم get_instance_overrides أولاً لترى أي حالات تجاوز النص الأساسي
اجمعها مع: filesystem

كيفية التعليق على مواصفات Figma من PRD في لقطة واحدة

👤 مهندسو التصميم الذين يقرنون المستندات بالنماذج الأولية ⏱ ~25 min intermediate

متى تستخدمه: PRD الخاص بك يحتوي على 'يجب أن يقول CTA X، وتضمين نسخة تلميح Y' وتريد تلك التعليقات في Figma.

الخطوات
  1. شارك PRD
    إليك PRD [الصق]. استخرج كل متطلب تعليق واجهة المستخدم.✓ تم النسخ
    → قائمة منظمة من {node_hint, annotation_text}
  2. عيّن الإشارات إلى العقد الفعلية
    استخدم get_selection و scan_nodes_by_types لمطابقة كل تعليق مع معرّف عقدة ملموس في الصفحة الحالية.✓ تم النسخ
    → أزواج من node_id + التعليق جاهز
  3. تطبيق التعليقات
    طبقها باستخدام set_multiple_annotations.✓ تم النسخ
    → التعليقات مرئية في طبقة الإضافة

النتيجة: ملف Figma موثق ذاتياً يمكن للمهندسين قراءته دون تبديل الألسنة.

المزالق
  • Claude يطابق العقدة الخاطئة عندما يشارك عدة عقد نفس الاسم — تضمين أسماء الإطارات الأب كتلميحات لإزالة الغموض
اجمعها مع: notion · github

كيفية إنشاء متغيرات المكونات (الوضع الليلي والأحجام) بشكل برمجي

👤 فرق أنظمة التصميم ⏱ ~20 min advanced

متى تستخدمه: تحتاج إلى استنساخ زر أساسي في 12 متغيراً وضبط الملفات/الحدود.

الخطوات
  1. استنسخ العقدة الأساسية
    استنسخ إطار Button/Primary 4 مرات ورتبها أفقياً بفاصل 16px.✓ تم النسخ
    → 4 عقد جديدة في المستند
  2. إعادة تلوين الملفات/الحدود
    لكل استنساخ، عيّن set_fill_color إلى ظلال 500 و600 و700 و800 من #3B82F6.✓ تم النسخ
    → تقدم لون مرئي
  3. تحويل إلى متغيرات
    قمها كمجموعة مكونات باسم 'Button / Intensity'.✓ تم النسخ
    → تظهر مجموعة مكونات جديدة في الأصول

النتيجة: مجموعة متغيرات جاهزة للاستخدام في نظام التصميم الخاص بك.

المزالق
  • رموز اللون تختلف عن سادس عشري الخام — إذا كان نظامك يستخدم متغيرات، فاستخدم set_fill_color برقم معرف المتغير وليس سادس عشري الخام

كيفية تصدير كل إطار مميز كـ PNG لتسليم dev

👤 مهندسو التصميم الذين يعدون مستند التسليم ⏱ ~10 min beginner

متى تستخدمه: قبل بدء sprint أو مراجعة العميل.

الخطوات
  1. البحث عن الإطارات بعلامة تسليم
    امسح العقد من نوع FRAME على الصفحة الحالية التي يبدأ اسمها بـ '[HANDOFF]'.✓ تم النسخ
    → قائمة الإطارات المستهدفة
  2. التصدير بـ 2x
    صدّر كل واحد كـ PNG بـ 2x واحفظ في /handoff/2026-04/.✓ تم النسخ
    → مسارات الملفات المرجعة

النتيجة: مجلد تسليم مع طابع زمني جاهز للإسقاط في Notion أو Linear.

اجمعها مع: filesystem · notion

التركيبات

اجمعها مع خوادم MCP أخرى لتحقيق نتائج x10

cursor-talk-to-figma + notion

مزامنة التعليقات التصميمية إلى صفحة مواصفات Notion للمهندسين

استخرج كل تعليق على صفحة Figma الحالية وكاشفها إلى مستند Notion 'Checkout Spec v3' كقائمة تحقق.✓ تم النسخ
cursor-talk-to-figma + filesystem

تصدير الإطارات إلى مجلد تسليم محلي مصنف حسب التاريخ

صدّر كل إطار [HANDOFF] إلى /design-handoff/2026-04/ كـ PNG 2x.✓ تم النسخ
cursor-talk-to-figma + github

ربط تغيير التصميم مع مرجع PR للرمز

أضف تعليقاً على زر CTA يربط إلى PR #4421 في مستودع الواجهة الأمامية.✓ تم النسخ

الأدوات

ما يوفره هذا الـ MCP

الأداةالمدخلاتمتى تستدعيهاالتكلفة
get_document_info توجه نحو نفسك في ملف جديد free
get_selection عمل على ما نقره المستخدم للتو free
scan_text_nodes root_id?: str قبل التغييرات النصية الجماعية free
set_multiple_text_contents updates: {id, text}[] استبدال النص الجماعي free
set_fill_color id: str, color: {r,g,b,a} إعادة تصميم عقدة free
set_layout_mode id, mode: 'HORIZONTAL'|'VERTICAL'|'NONE' تبديل التخطيط التلقائي free
create_component_instance component_key: str, parent_id: str, position?: {x,y} إسقاط مكون مكتبة على لوحة الرسم free
set_multiple_annotations annotations: {id, text}[] التعليقات المواصفات الجماعية free
export_node_as_image id: str, format: 'PNG'|'SVG'|'JPG', scale?: number التسليم والمراجعات والمعاينات المضمنة free
join_channel channel: str الاتصال الأول بعد إطلاق الإضافة free

التكلفة والحدود

تكلفة التشغيل

حصة API
Figma لا توجد حدود معدل منشورة لإجراءات الإضافة؛ الحد العملي هو معدل نقل WebSocket
الرموز لكل استدعاء
معلومات العقدة: 100-1500 token حسب الأطفال
التكلفة المالية
مجاني (مطلوب حساب Figma؛ الخطة المجانية تعمل)
نصيحة
أنشئ دائماً نطاق المسحات على معرّف عقدة جذر محدد؛ عمليات المسح على مستوى الصفحة على الملفات الكبيرة تفجر السياق.

الأمان

الصلاحيات والأسرار ونطاق الأثر

الحد الأدنى من الصلاحيات: إضافة Figma تعمل في تطبيق سطح مكتب/ويب؛ لا يلزم رمز API
تخزين بيانات الاعتماد: لا شيء — تعمل الإضافة عملية داخلية في Figma؛ يتحدث MCP عبر WebSocket محلي
نقل البيانات الخارجي: تتدفق عقد مستند Figma من الإضافة إلى MCP المحلي ثم إلى LLM المختار. تترك التصاميم الحساسة جهازك فقط من خلال استدعاء LLM.
لا تمنح أبدًا: لا تفضح منفذ WebSocket خارج localhost

استكشاف الأخطاء

الأخطاء الشائعة وحلولها

Plugin cannot connect to WebSocket

تأكد من أن bun run start نشط ومعرّف قناة الإضافة يتطابق مع ما انضم إليه الوكيل.

تحقق: bun --version && lsof -i :3055
set_multiple_text_contents only updates some nodes

يتم تخطي العقد داخل الطبقات أو المكونات المقفلة. فتح القفل أو استهداف تجاوز الحالة.

Figma plugin shows 'manifest not found'

أعد الربط عبر Plugins > Development > Link existing plugin > اختر manifest.json من src/cursor_mcp_plugin/.

Exports return empty URLs

بعض العقد (مجموعات القناع وتأثيرات معينة) لا يمكن عرضها على جانب الخادم. قم بالتسطيح أولاً أو التصدير كـ SVG.

البدائل

cursor-talk-to-figma-mcp مقابل البدائل

البديلمتى تستخدمهاالمقايضة
Official Figma Dev Mode MCPلديك مقاعد Figma مدفوعة Dev Mode وتريد الدعم الرسميالقراءة فقط؛ لا يوجد تحرير جماعي
Framelink Figma MCPتفضل خادم قائم على REST API للقراءة فقطلا تحويل، لا توجد حاجة لإضافة WebSocket ولكن لا يمكن تحرير

المزيد

الموارد

📖 اقرأ ملف README الرسمي على GitHub

🐙 تصفح القضايا المفتوحة

🔍 تصفح أكثر من 400 خادم MCP و Skills