كشفت GeekyAnts عن إضافة (plugin) تعتمد على React Fiber تتيح للمطورين سحب مكونات React حية مباشرة إلى ملفات Figma قابلة للتعديل، مما يعد بتحقيق رحلة ذهاب وإياب حقيقية بين الكود والتصميم. تعالج هذه الأداة مشكلة "الفجوة المتزايدة بين التصميم والكود" (design-code drift) التي تجبر الفرق على إعادة العمل في كل مرة تتجاوز فيها تغييرات واجهة المستخدم الحدود بين المصمم والمطور.

لماذا يقصر النهج القديم القائم على DOM أولاً

تقوم أدوات الاستيراد التقليدية بمسح نموذج كائن المستند (DOM) الخاص بـ HTML الذي تم عرضه – وهو القائمة المسطحة للمتصفح من وسوم <div و <span وغيرها. يخبر الـ DOM الأداة بوجود زر، لكنه لا يستطيع رؤية أن هذا الزر هو نسخة من مكون مشترك في نظام تصميم (design system). إذا قمت بتصدير عشرة أزرار، فستحصل على عشر طبقات مستقلة في Figma، كل منها منفصل عن المكون الرئيسي (master component). يضطر المصممون بعد ذلك إلى إعادة إنشاء المتغيرات (variants)، وإعادة تطبيق القيود (constraints)، وإعادة بناء ما يعرفه الكود بالفعل.

يؤدي هذا الفقدان لذكاء المكونات إلى خلق "ديون تصميم" (design debt). ففي كل مرة يتم فيها تعديل عنصر واجهة مستخدم في الكود، يجب تحديث ملف Figma المقابل يدوياً، وإلا ستتباعد التمثيلات. هذا التباعد يؤدي إلى زيادة تكاليف الصيانة.

React Fiber كحلقة الوصل المفقودة

React Fiber هو محرك التوفيق (reconciliation engine) الداخلي الذي يتتبع أسماء المكونات، والتسلسل الهرمي، والحالة عبر عمليات العرض. وعلى عكس الـ DOM، يحافظ Fiber على المعنى الدلالي (semantic meaning) لكل قطعة في واجهة المستخدم. من خلال قراءة شجرة Fiber بدلاً من مخرجات HTML، يمكن للأداة ربط مكون <Button> مباشرة بمكون Figma، مما يحافظ على الارتباط برمز التصميم (design token) الأصلي.

تستخدم إضافة GeekyAnts هذه الرؤية؛ حيث تقرأ React Fiber لجلب الكود الحي إلى ملفات Figma قابلة للتعديل. والنتيجة هي مجموعة من الطبقات التي تحتفظ بعلاقات المتغيرات الأصلية الخاصة بها.

كيف تعمل آلية العمل (pipeline)

تتبع عملية الاستيراد ثلاث مراحل متميزة:

  • موسع المتغيرات (Variant Expander) – يمسح كود المكون بحثاً عن تعريفات الحالة (hover، disabled، active) ويولد مجموعة كاملة من المتغيرات المرئية. يتم تجميع هذه المتغيرات في مجموعات مكونات Figma (Figma Component Sets)، بحيث يمكن للمصممين التبديل بين الحالات دون مغادرة الملف.
  • رسم خرائط التخطيط (Layout Mapping) – يترجم قواعد CSS Flexbox إلى قيود Figma Auto Layout. يحافظ هذا على السلوك المتجاوب ويسمح للمصممين بضبط المسافات مباشرة في محرر واجهة المستخدم.
  • تفعيل الحالة (State Triggering) – ينفذ مسارات الكود التي تفتح النوافذ المنبثقة (modals)، أو القوائم المنسدلة (dropdowns)، أو غيرها من عناصر واجهة المستخدم الديناميكية، مما يضمن التقاط الإضافة لكل عرض ممكن.

تنتج هذه المراحل معاً نسخة طبق الأصل، قابلة للتعديل، لواجهة المستخدم الحية، وليس مجرد لقطة شاشة ثابتة.

النظام البيئي الناشئ

ليست GeekyAnts الوحيدة التي تحاول إغلاق الحلقة بين التصميم والكود:

  • Anima تركز على الاتجاه المعاكس، حيث تقوم بتحويل تصميمات Figma إلى كود React أو Vue.
  • Locofy.ai تضيف توليداً مدعوماً بالذكاء الاصطناعي للكود المتجاوب من ملفات التصميم.
  • Builder.io توفر استيراداً من HTML إلى Figma، لكنها لا تزال تعتمد على الـ DOM، مما يجعلها ترث قيوده.
  • Codia AI تحول عناصر الويب إلى ملفات Figma منظمة.

ما يميز النهج القائم على Fiber هو وعيه بدلالات المكونات (component semantics)، وهو ما تفتقر إليه الأدوات التي تركز على الـ DOM.

من يربح ومن يخسر

النهج المؤتمت الذي يحترم المكونات يقلل من ديون التصميم.

ما الذي يجب مراقبته لاحقاً

الوعد الأساسي واضح: من خلال نقل تركيز الاستيراد من الـ DOM إلى React Fiber، تمنح أدوات مثل إضافة GeekyAnts المصممين عرضاً حياً لواجهة المستخدم في بيئة الإنتاج يكون مدركاً للمكونات. هذا التحول قد يمحو أخيراً الفجوة القائمة منذ زمن طويل بين التصميم والكود، محولاً ما كان يُعتبر عملية تسليم مكلفة ومعرضة للأخطاء إلى سير عمل سلس وثنائي الاتجاه.