Figma وAnthropic تطلقان Code to Canvas لتحويل الواجهات البرمجية إلى تصاميم قابلة للتعديل
أعلنت Figma وAnthropic رسمياً عن إطلاق Code to Canvas، تكامل جديد يسد الفجوة بين البرمجة والتصميم من خلال تمكين المطورين من التقاط واجهات المستخدم العاملة من أي متصفح وتحويلها إلى إطارات Figma قابلة للتعديل بالكامل.
كيف يعمل
يعمل التكامل على خادم MCP (بروتوكول سياق النموذج) الخاص بـ Figma، وهو معيار مفتوح يتيح لأدوات الذكاء الاصطناعي الاتصال بمصادر البيانات والتطبيقات الخارجية. يعمل كمحول عالمي بين Claude Code وبيئة تصميم Figma.
للإعداد، يقوم المطورون بتفعيل خادم MCP في إعدادات تطبيق Figma للحاسوب، ثم تفعيل "Dev Mode MCP Server"، وتشغيل أمر طرفية لربط Claude Code:
claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse
بمجرد الاتصال، يمكن لـ Claude Code التقاط حالة المتصفح المباشرة — سواء من بيئة الإنتاج أو الاختبار أو localhost — وتحويلها إلى إطارات متوافقة مع Figma يمكن للمصممين تعديلها مباشرة.
لماذا هذا مهم
بالنسبة للفرق التي تستخدم أدوات البرمجة بالذكاء الاصطناعي، يزيل هذا التكامل أحد أهم نقاط الاحتكاك المتبقية: إعادة عمل المطورين إلى مساحة تصميم مشتركة يمكن للجميع المساهمة فيها.
تقليدياً، كان التسليم بين البرمجة والتصميم أحادي الاتجاه. المصممون ينشئون النماذج في Figma، والمطورون ينفذونها في الكود، ونادراً ما تعود التغييرات المرئية في الكود إلى ملف التصميم. Code to Canvas يعكس هذا المسار، مما يخلق جسراً ثنائي الاتجاه.
القدرات الرئيسية
- التقاط مباشر: التقاط أي واجهة مستخدم من متصفح عامل، بما في ذلك الحالات الديناميكية التي يصعب محاكاتها في أدوات التصميم
- إطارات قابلة للتعديل بالكامل: المخرجات هي Figma أصلي — وليست لقطات شاشة أو صور مسطحة — مما يتيح للمصممين تعديل التخطيطات والألوان والخطوط
- مبني على MCP: مبني على معيار بروتوكول سياق النموذج المفتوح، مما يجعله قابلاً للتوسيع والتشغيل المتبادل
- يعمل مع Claude Code: يستفيد من Claude Sonnet 4.6 من Anthropic لفهم ذكي لواجهات المستخدم
ردود فعل المجتمع التقني
استقطب الإعلان اهتماماً كبيراً من مجتمع المطورين، مع أكثر من 9,700 منشور على X يناقشون التكامل. أشاد العديد من المطورين بإمكانية تقليل الاحتكاك بين التصميم والتطوير، بينما أشار المصممون إلى قيمة القدرة على فحص وتكرار واجهات المستخدم في بيئة الإنتاج الفعلية.
ما التالي
أشارت Figma وAnthropic إلى أن هذه مجرد بداية شراكتهما. تشير البنية المبنية على MCP إلى أن التكاملات المستقبلية قد تمتد إلى ما بعد التقاط واجهات المستخدم لتشمل مزامنة تلقائية لأنظمة التصميم ومراجعات التصميم بمساعدة الذكاء الاصطناعي.
المصدر: Figma Blog
ناقش مشروعك معنا
نحن هنا للمساعدة في احتياجات تطوير الويب الخاصة بك. حدد موعدًا لمناقشة مشروعك وكيف يمكننا مساعدتك.
دعنا نجد أفضل الحلول لاحتياجاتك.