إدارة المشاريع

Figma Design Handoff

استخراج رموز التصميم ومواصفات المكونات والأصول من ملفات Figma لسير عمل تصميم إلى كود سلس.

Claude Code Cursor Windsurf

نظرة عامة

Figma هي أداة التصميم المعيارية في الصناعة، وتكامل MCP يسد الفجوة بين التصميم والتطوير. يمكن لوكلاء البرمجة الذكية قراءة ملفات Figma واستخراج رموز التصميم وفحص خصائص المكونات وإنشاء الكود من مواصفات التصميم.

يتيح التكامل للوكلاء الوصول إلى خصائص الطبقات وقيم المسافات ورموز الألوان ومقاييس الخطوط ومتغيرات المكونات. وهذا يمكّن من تنفيذ دقيق للتصاميم دون قياس يدوي أو تبديل سياق مستمر بين Figma والكود.

تستفيد الفرق من ترجمة التصميم إلى كود آلية واستخراج رموز تصميم متسقة والقدرة على التحقق من التطبيقات مقابل مواصفات التصميم. وهذا يقلل بشكل كبير من احتكاك تسليم التصميم وأخطاء التنفيذ.

لمن هذه الأداة؟

استخراج لوحات الألوان والخطوط من ملفات Figma
إنشاء CSS/Tailwind من مواصفات مكونات Figma
التحقق من تطابق تنفيذ الكود مع مواصفات التصميم
إنشاء ملفات رموز التصميم من متغيرات Figma

التثبيت

إعداد Claude Code

npx @anthropic-ai/claude-code mcp add figma -- npx -y figma-mcp

الإعدادات

// .mcp.json
{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-mcp"],
      "env": { "FIGMA_ACCESS_TOKEN": "<your-token>" }
    }
  }
}

زيارة المصدر (GitHub)

استكشف أدوات AI

أدوات AI تكمل شغلك — للمصممين والمطورين

اقرأ مقالات عن AI

نصايح عملية في التصميم والذكاء الاصطناعي

أدوات مشابهة

إدارة المشاريع

Notion MCP Server

إدارة مستندات المشروع وقواعد المعرفة في Notion مباشرة من وكيل البرمجة.

Claude Code Cursor Windsurf

إدارة المشاريع

Slack MCP Integration

إرسال التحديثات والتواصل مع الفريق عبر Slack بدون مغادرة بيئة التطوير.

Claude Code Cursor Windsurf

إدارة المشاريع

JIRA Issue Tracking

تتبع المهام وإدارة سباقات التطوير وربط الأكواد بالتذاكر تلقائيًا.

Claude Code Copilot Cursor