الواجهات والتصميم مميز

Figma MCP

تحويل تصاميم Figma إلى كود مباشرة مع الحفاظ على الأنماط والمكونات.

Claude Code Cursor Windsurf

نظرة عامة

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

يستطيع الوكيل جلب بيانات التصميم لأي مكون أو صفحة في Figma، استخراج الألوان والخطوط والأبعاد، ثم توليد كود HTML/CSS أو مكونات React/Vue مطابقة للتصميم. هذا يقلل بشكل كبير الفجوة بين التصميم والتطوير.

ضرورية لفرق التطوير التي تعمل مع مصممين يستخدمون Figma وتريد ترجمة التصاميم إلى كود بدقة وسرعة.

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

مطوري Frontend الذين يحولون تصاميم Figma إلى كود
فرق التصميم والتطوير التي تريد تقليل الفجوة بينهما
مطورين يريدون استخراج design tokens من Figma
فرق تطوير تنشئ مكتبات مكونات من التصاميم

التثبيت

إعداد Claude Code

Add to .claude/settings.json:
{"mcpServers":{"figma":{"command":"npx","args":["-y","figma-mcp","--figma-api-key=YOUR_KEY"]}}}

الإعدادات

FIGMA_API_KEY=figd_xxxxxxxxxxxx

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

مهارات مشابهة

الواجهات والتصميم

توثيق المكونات مع Storybook

إنشاء توثيق تفاعلي لمكونات الواجهة مع أمثلة حية وحالات استخدام.

Claude Code Copilot Cursor

الواجهات والتصميم

Tailwind CSS IntelliSense

إكمال تلقائي ذكي لأصناف Tailwind مع معاينة الألوان والقيم أثناء الكتابة.

Claude Code Copilot Cursor

الواجهات والتصميم

فحص إمكانية الوصول (axe-core)

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

Claude Code Copilot Cursor