/ الدليل / الملعب / Figma Context
← كل الخوادم ↗ GitHub
● مجتمع GLips 🔑 يتطلب مفتاحك

Figma Context

بواسطة GLips · GLips/Figma-Context-MCP

استخلص إطارات Figma والطبقات والرموز التصميمية إلى وكيل الكود AI الخاص بك — بحيث يطابق واجهة المستخدم المُنتجة التصميم الفعلي.

Figma-Context-MCP (من تطوير GLips) يقرأ ملف Figma عبر API Figma ويُرجع تمثيلاً مدمجاً وملائماً للوكيل يتضمن الإطارات والمكونات والتخطيط والرموز التصميمية. يحل مشكلة 'Claude تُنشئ Tailwind يشبه النموذج بشكل غامض' بتوفير إحداثيات حقيقية وألوان وبنية المكونات.

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

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

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

عرض مباشر

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

figma.replay ▶ جاهز
0/0

التثبيت

اختر العميل

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

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

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

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

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  }
}

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

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  }
}

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

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

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

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

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

claude mcp add figma -- npx -y figma-developer-mcp

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

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

استخدامات عملية: Figma Context

إنشاء كود React/SwiftUI/Tailwind من إطار Figma

👤 مطورو الواجهة الأمامية الذين ينفذون شاشة مصممة ⏱ ~30 min intermediate

متى تستخدمه: لديك إطار Figma لشاشة/مكون وتريد توليد أول 80% من الكود بأمانة.

المتطلبات الأساسية
  • رمز الوصول الشخصي Figma — figma.com → Settings → Personal access tokens؛ حدد النطاق إلى file_read
  • عنوان URL لملف Figma — انسخ عنوان URL من ملف Figma؛ يمكن لـ MCP استخراج مفتاح الملف ومعرّف العقدة
الخطوات
  1. استخلص بيانات الإطار
    احصل على عقدة Figma في <الصق عنوان URL مع node-id>. أرجع التخطيط والمحتوى النصي والألوان وبنية العناصر الفرعية.✓ تم النسخ
    → بيانات العقدة الهرمية بقيم حقيقية — وليس 'غير قادر على الجلب'
  2. إنشاء كود مستند إلى البيانات
    أنشئ مكون React + Tailwind يطابق هذا تماماً. استخدم ألوان hex والقيم الفعلية بالبكسل من بيانات Figma، وليس التقريبات.✓ تم النسخ
    → كود يشير إلى قيم حقيقية، مثل bg-[#1A2B3C] وليس bg-blue-500
  3. تحقق متقابل مع تصدير
    صدّر نفس الإطار بصيغة PNG. قارن مع المُخرجات المتوقعة للمكون المُنتج وأشِر إلى أي فروقات.✓ تم النسخ
    → فروقات محددة (رمز مفقود، حشوة غير صحيحة) بدلاً من 'يبدو متشابهاً'

النتيجة: مسودة أولى مطابقة للبكسل يمكنك تحسينها بدلاً من إعادة بنائها.

المزالق
  • تخطيط التخطيط التلقائي مقابل التموضع المطلق يخطط بشكل مختلف على flex/grid — أخبر Claude بتفضيل flexbox عندما يستخدم إطار Figma auto-layout؛ مطلق عندما لا يستخدمه
  • الرموز المتجهة تعود كمسارات SVG قد يدرجها Claude حرفياً — اطلب منه استخراج الرموز بشكل منفصل إلى /icons/*.svg والإشارة إليها كمكونات
اجمعها مع: filesystem · github

مزامنة رموز تصميم Figma إلى قاعدة الكود الخاصة بك

👤 مسؤولو نظام التصميم ⏱ ~20 min intermediate

متى تستخدمه: قام المصممون بتحديث لوحة الألوان/الطباعة في Figma وتحتاج إلى تحديث JSON الرمز ليطابق.

الخطوات
  1. استخلص الأنماط المنشورة
    من ملف Figma <key>، اسرد كل نمط لون منشور ونمط نص ونمط تأثير. جمّعها حسب الفئة.✓ تم النسخ
    → قائمة رموز كاملة مع الأسماء والقيم
  2. قارن مع قاعدة الكود
    اقرأ /design-tokens/tokens.json. أرني أي رموز تغيرت في Figma منذ آخر مزامنة لهذا الملف (مضافة، محذوفة، قيمة تغيرت).✓ تم النسخ
    → فرق لكل رمز مع القديم/الجديد
  3. طبّق وافتح PR
    حدّث tokens.json ليطابق Figma. افتح PR بعنوان 'sync: design tokens YYYY-MM-DD' مع الفرق في الوصف.✓ تم النسخ
    → تم فتح PR مع فرق قابل للمراجعة

النتيجة: تبقى رموز جانب الكود متزامنة مع Figma؛ لا مزيد من تذاكر 'لماذا لون العلامة التجارية مختلف قليلاً'.

المزالق
  • الرموز المعاد تسميتها تبدو وكأنها حذف+إضافة — اطلب من Claude اكتشاف إعادة التسمية بشكل إرشادي (نفس القيمة، اسم متشابه) وأشِر إليها للمراجعة البشرية
اجمعها مع: filesystem · github

استخراج مواصفات التطوير (المسافات والحجم والنص) من ملف Figma

👤 المهندسون الذين يقومون بفرز نقل Figma بدون Dev Mode ⏱ ~15 min beginner

متى تستخدمه: ليس لديك Figma Dev Mode لكنك تحتاج إلى مواصفات البكسل لشاشة.

الخطوات
  1. احصل على الشاشة
    لعقدة Figma <id>، أعطني قائمة مسطحة بكل عنصر ورقي مع موضعه المطلق وحجمه وأي محتوى نصي.✓ تم النسخ
    → تفريغ جدولي للعناصر مع x/y/w/h
  2. اطلب مستند مواصفات
    حوّلها إلى مواصفات موجهة للمطورين: قسم تلو الآخر، مع قيم المسافات (الهامش/الحشوة) المستنتجة من المواضع.✓ تم النسخ
    → مستند مواصفات بقيم معادلة CSS محددة
  3. تحقق من الحالات الحدية
    ماذا يحدث عندما يتجاوز النص العرض المصمم؟ هل ينص التصميم على سلوك الالتفاف أو القطع أو النمو؟ إن لم يتم تحديده، أشِر إليه للمصمم.✓ تم النسخ
    → قائمة الأسئلة المفتوحة، وليس الافتراضات الصامتة

النتيجة: مواصفات قابلة للبناء بدون شراء مقعد Dev Mode للجميع.

المزالق
  • استخدم المصمم مسافات عشوائية (13px، 17px) بدلاً من قيم الرموز — اطلب من Claude التقريب إلى قيمة الرمز الأقرب لكن سجّل الانحراف، حتى يتمكن المصممون من التنظيف
اجمعها مع: filesystem

التركيبات

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

figma + filesystem

إنشاء كود من Figma وكتابته مباشرة إلى ملف المكون الخاص بك

استخلص عقدة Figma <id>. أنشئ مكون React يطابقها تماماً، اكتبها إلى src/components/Card.tsx باستخدام filesystem MCP.✓ تم النسخ
figma + github

افتح PR مع المكون الجديد بالإضافة إلى رابط Figma في الوصف للمراجعين

أنشئ مكون Card من Figma <url>، التزم، ادفع، وافتح PR مع كل من تغيير الكود ورابط Figma الأصلي.✓ تم النسخ
figma + chrome-devtools

بناء، عرض في المتصفح، التقاط لقطة شاشة، والمقارنة البصرية مقابل تصدير Figma

بناء المكون الجديد. عرضه في localhost:3000/preview/card. التقط لقطة شاشة. قارن بصرياً مقابل تصدير Figma PNG واسرد أي فروقات بصرية.✓ تم النسخ

الأدوات

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

الأداةالمدخلاتمتى تستدعيهاالتكلفة
get_figma_data fileKey: str, nodeId?: str, depth?: int استخلص إطار أو ملف كامل بصيغة ملائمة للوكيل 1 Figma API call (free tier: 1500/min)
download_figma_images fileKey: str, nodes: [{nodeId, fileName}], localPath: str, format?: 'png'|'svg', scale?: number صدّر أصول التصميم (الرموز والرسومات التوضيحية والقطات الشاشة) محلياً 1 Figma render call per node

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

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

حصة API
خطة Figma المجانية: 1,500 طلب/دقيقة. وفير للاستخدام التفاعلي.
الرموز لكل استدعاء
يبقي الوضع المدمج الحمولات حول 1-5 كيلوبت لكل إطار. الملفات الكاملة قد تتضخم — حدّد بـ nodeId.
التكلفة المالية
MCP مجاني. الوصول إلى Figma API مجاني مع أي حساب Figma.
نصيحة
مرر دائماً nodeId عندما تستطيع — جلب ملف كامل هدر.

الأمان

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

الحد الأدنى من الصلاحيات: file_read
تخزين بيانات الاعتماد: رمز الوصول الشخصي في متغير البيئة FIGMA_API_KEY. لا تلتزم أبداً.
نقل البيانات الخارجي: جميع الاستدعاءات إلى api.figma.com
لا تمنح أبدًا: file_write — لا يحتاج MCP إليها؛ استخدام رمز قادر على الكتابة يخاطر بالتعديلات العرضية

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

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

403 Forbidden

الرمز ليس لديه الوصول إلى هذا الملف. تحقق مما إذا كان الملف في فريق/مساحة عمل يمكن لرمزك رؤيتها. بالنسبة للملفات المجتمعية المشتركة، استخدم رمزاً مختلفاً.

تحقق: curl -H 'X-Figma-Token: $FIGMA_API_KEY' https://api.figma.com/v1/me
Could not extract file key from URL

استخدم الصيغة https://www.figma.com/file/<KEY>/... أو https://www.figma.com/design/<KEY>/.... مرر fileKey بشكل صريح إذا فشل تحليل عنوان URL.

Response is enormous and blows context

مرر nodeId لتحديد نطاق إطار، أو depth: 2 لتحديد الاجتياز.

Image export fails with 'unsupported node type'

لا يمكن تصدير بعض أنواع العقد (الأقسام والشرائح). اختر إطار أو مكون فعلي بدلاً من ذلك.

البدائل

Figma Context مقابل البدائل

البديلمتى تستخدمهاالمقايضة
MCP رسمي Figma Dev Mode (الإصدار التجريبي)لديك Figma Dev Mode وتريد التكامل الرسميأحدث، يتطلب اشتراك Dev Mode؛ دعم ميزات Figma أعمق بمرور الوقت
Figma REST API مباشرة عبر shellتريد سطح API كامل (المتغيرات والفروع والتعليقات)استجابات API الخام ضخمة وصعبة على LLM للهضم

المزيد

الموارد

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

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

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