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

claude-talk-to-figma-mcp

بواسطة arinspunk · arinspunk/claude-talk-to-figma-mcp

Claude يقرأ وينحلل وينقح تصاميم Figma عبر إضافة مجانية — بدون الحاجة إلى Dev Mode، ويعمل مع حسابات Figma المجانية.

claude-talk-to-figma-mcp (arinspunk) يدمج خادم MCP مع إضافة Figma. معاً يتيحان لـ Claude فحص البنية الوثيقية، تدقيق الأنماط، مسح المكونات، وإنشاء/تعديل الأشكال والنصوص والإطارات. يتجاوز متطلب الدفع المعتاد لـ Dev Mode لسير عمل ذكي يدرك التصميم.

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

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

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

عرض مباشر

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

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

التثبيت

اختر العميل

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

تدقيق ملف Figma للألوان والأنماط خارج النظام

👤 محافظو نظام التصميم ⏱ ~20 min intermediate

متى تستخدمه: انحرفت ملفات الفريق عن رموز التصميم وتريد العثور على الانحرافات.

المتطلبات الأساسية
  • إضافة Figma المستوردة عبر manifest — Figma → Plugins → Development → Import from manifest
  • تشغيل bun run socket — من المستودع؛ يفتح WebSocket
الخطوات
  1. الاتصال
    الاتصال بـ Figma، القناة abc123 (انسخ من واجهة الإضافة).✓ تم النسخ
    → متصل؛ اسم الوثيقة معروض
  2. المسح عن تعبئات خارج النظام
    امسح كل العقد عن ألوان التعبئة التي ليست من بين رموزنا العلامة التجارية الـ 12. اسرد مسارات العقد.✓ تم النسخ
    → قائمة بحالات الانحراف
  3. التقرير
    اجمع حسب الإطار الأقرب وخلص. اقترح الرمز المناسب لكل لون شاذ.✓ تم النسخ
    → قائمة تنظيف قابلة للتنفيذ

النتيجة: ملف يمكنك تسليمه لمصمم مع إصلاحات ملموسة.

المزالق
  • معرف القناة يتدوّر إذا أعدت تشغيل الإضافة — انسخ دائماً من جديد من لوحة الإضافة؛ المعرفات القديمة تنتهي بصمت

تحويل مواصفة مكتوبة إلى إطار Figma خشن

👤 مديرو المنتجات، غير المصممين ⏱ ~15 min beginner

متى تستخدمه: تريد wireframe سريع بدون فتح Figma بنفسك.

الخطوات
  1. وصف التخطيط
    أنشئ إطاراً جديداً 1440x900 في الملف الحالي. أضف رأساً وشبكة ميزات ثلاثية الأعمدة وتذييلاً. استخدم ألوان علامتنا التجارية.✓ تم النسخ
    → الإطار يظهر في Figma مع البنية
  2. التكرار
    اجعل بطاقات الميزات تستخدم مكون 'Card' الخاص بنا. استبدل الرأس بمتغيّر 'primary'.✓ تم النسخ
    → الإطار محدث في الوقت الفعلي

النتيجة: wireframe خشن بدون لمس واجهة Figma.

تشغيل فحص تباين اللون للوصول على ملف Figma

👤 المصممون، نشطاء الوصول ⏱ ~25 min intermediate

متى تستخدمه: قبل التسليم، تريد تحديد فشل التباين.

الخطوات
  1. السير عبر عقد النص مع خلفياتها
    لكل عقدة نص، احسب تباين WCAG ضد أقرب تعبئة خلفية. علّم أي شيء أقل من 4.5:1 للجسم أو 3:1 للحجم الكبير.✓ تم النسخ
    → قائمة بالأزواج الفاشلة مع النسب
  2. اقتراح التعديلات
    لكل فشل، اقترح الحد الأدنى لتبديل الرمز للنجاح.✓ تم النسخ
    → اقتراحات الإصلاح

النتيجة: تقرير وصول قبل أن تكتشفه QA لاحقاً.

التركيبات

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

claude-talk-to-figma + meigen-ai-design

توليد صورة، ضعها في إطار Figma كعنصر نائب

وليّد صورة بطل مع MeiGen، ثم ضعها كتعبئة في إطار Figma المختار.✓ تم النسخ
claude-talk-to-figma + unreal

Figma HUD → هيكل عنصر واجهة UMG في Unreal

صدّر بنية إطار Figma HUD المختار، ثم أنشئ UMG Widget Blueprint مطابق في Unreal.✓ تم النسخ

الأدوات

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

الأداةالمدخلاتمتى تستدعيهاالتكلفة
get_document_info الخطوة الأولى؛ تأكد من الملف الصحيح 0
get_selection اعمل على ما اختاره المستخدم 0
scan_styles كشف الانحراف 0
create_shape type, x, y, w, h, fill? بناء التخطيطات 0
create_text content, x, y, style? أضف تسميات/عناوين 0
set_fill node_id, color إصلاح الشوائب 0
set_auto_layout node_id, direction, padding, gap تحويل إلى responsive 0

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

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

حصة API
بلا حد — كل شيء عبر WebSocket محلي
الرموز لكل استدعاء
يمكن لمسح الوثيقة أن يكون 5-30k token على الملفات الكبيرة
التكلفة المالية
مجاني
نصيحة
اعمل على get_selection كلما أمكن؛ مسح الوثيقة الكاملة يستهلك tokens

الأمان

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

تخزين بيانات الاعتماد: بلا مفاتيح API؛ الإضافة تستخدم جلسة Figma الحالية
نقل البيانات الخارجي: WebSocket محلي فقط؛ بيانات Figma تغادر فقط إذا شاركت النتائج

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

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

Connection timeout / channel not found

معرفات القنوات تتدوّر — انسخ من جديد من لوحة الإضافة وأعد الاتصال

Plugin missing from Figma menu

أعد الاستيراد عبر Plugins → Development → Import from manifest؛ الإضافات البرمجية لا تستمر عبر إعادة تشغيل Figma على بعض الإعدادات

Writes fail silently

Figma تقيد كتابات الإضافة على أنواع ملفات معينة (المكتبات، النسخ المجتمعية). تحقق من رمز القفل

البدائل

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

البديلمتى تستخدمهاالمقايضة
Framelink / Figma-Context MCPتريد قراءة فقط عبر Figma API برمز شخصيبدون كتابة؛ يحتاج إلى وصول API
Figma Dev Mode MCP (official)منظمتك تدفع مقابل Dev Modeمقاعد مدفوعة مطلوبة

المزيد

الموارد

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

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

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