WebStorm يدمج Figma Connect لإدخال سياق التصميم إلى بيئة التطوير
أضافت JetBrains ميزة Figma Connect في الإصدار الجديد من WebStorm، لتتيح عرض طبقات ملفات Figma واختيارها من داخل الـ IDE ثم تمرير سياقها إلى محادثات الذكاء الاصطناعي عبر Figma MCP. تستهدف الميزة المطورين الذين يحولون تصاميم Figma إلى واجهات ويب ويريدون تقليل التنقل بين الأدوات وتحسين دقة الكود المولّد.
أبرز النقاط
- Figma Connect متاح في WebStorm.
- يمكن تصفح Layers من Figma داخل نافذة أدوات في WebStorm مع مزامنة التحديد في الاتجاهين.
- يُرفق التحديد الحالي من Figma تلقائياً بسياق محادثات AI الجديدة، ويمكن إضافة عناصر متعددة يدوياً.
- يعتمد الإرفاق على مرجع لعقدة التصميم ومعرّفها بدلاً من لقطة شاشة أو الملف الكامل.
- يُنقل السياق عبر Figma MCP إلى أدوات مثل Junie وClaude وCopilot وCursor.
- يتولى WebStorm إعداد وتهيئة Figma MCP المطلوب، ويحتاج المستخدم إلى إعداد أولي لمرة واحدة.
تجلب JetBrains ملف Figma إلى داخل WebStorm عبر ميزة Figma Connect، المتاحة في الإصدار الجديد من WebStorm. الفكرة هي إبقاء التصميم أمام المطور أثناء التنفيذ، بدلاً من التنقل المتكرر بين Figma والـ IDE ونسخ الروابط أو التقاط الصور لإعطائها لمساعد الذكاء الاصطناعي.
تظهر قائمة Layers في نافذة أدوات Figma Connect داخل WebStorm. عند اختيار طبقة من القائمة، يركّز Figma على العنصر المقابل، بينما يظهر العنصر المحدد في Figma داخل WebStorm مع صورة مصغرة في قسم Currently selected. ويجري الربط في الاتجاهين بشكل فوري بحسب JetBrains.
الجزء الأهم للمطورين الذين يستخدمون AI chat هو تمرير سياق التصميم. يضيف WebStorm التحديد الحالي تلقائياً إلى كل محادثة AI جديدة، مع إمكانية إضافة عناصر أخرى أو عدة عناصر يدوياً عبر Add to Context. وبدلاً من إرفاق لقطة شاشة أو التصميم كاملاً، تستخدم الميزة مرجعاً إلى عقدة التصميم ومعرّفها، ما يحد من تضخم الـ context.
يصل سياق التصميم إلى المحادثة عبر Figma MCP، ليتمكن الوكيل أو الأداة المستخدمة — مثل Junie وClaude وCopilot وCursor، أو بيئات agentic مثل Air — من الاعتماد على المواصفات الفعلية عند توليد الكود. وتقول JetBrains إن ذلك يساعد النموذج على اختيار المكوّنات والـ variants الصحيحة ضمن المشروع، مثل مكوّنات shadcn/ui أو Base UI أو design tokens الداخلية، بدلاً من إنشاء بدائل تقريبية.
توضح JetBrains أن إعداد Figma MCP والخطوات المطلوبة للاتصال يتمان ويُحسّنان تلقائياً من WebStorm، مع حاجة المستخدم إلى إعداد الميزة مرة واحدة فقط. كما تقول إن التكامل يُصان مع إصدارات WebStorm، بخلاف اتصال MCP عام يضيفه المستخدم يدوياً.
الميزة تمثل، وفق JetBrains، المرحلة الأولى من مسار أوسع لتحسين workflow التصميم إلى الكود، بهدف إبقاء التصميم والكود والتطبيق قيد التشغيل متوافقين بصرياً خلال دورة التطوير.
لماذا يهم؟
في مهام design-to-code، لا تكمن المشكلة في قراءة التصميم مرة واحدة فقط، بل في فقدان سياقه أثناء كتابة الكود أو عند طلب تنفيذ من وكيل AI. ربط العنصر المحدد في Figma مباشرة بسياق المحادثة داخل WebStorm قد يقلل الاعتماد على الروابط واللقطات، ويمنح أدوات الذكاء الاصطناعي مرجعاً أدق لاختيار مكوّنات المشروع وخصائصها.