‏تخطَّ إلى المحتوى
kenjtecJournal
‏البحث في Journal

‏Figma تفتح Code Layers: الأفكار التفاعلية تلتقي معًا على لوحة التصميم

‏تجيب النماذج الأولية التفاعلية عن أسئلة مختلفة عن تلك التي تجيب عنها الشاشات الجذابة. توضح مقارنة بين نافذتي حوار كيف يمكن لـ Code Layers أن تجعل القرارات المتعلقة بالسلوك مرئية.

‏تفتح آنا في نموذج أولي صغير من الكرتون غطاءً صغيرًا كأنه نافذة حوار؛ وبجانبه رسم تخطيطي لصفحة يحمل البطاقات نفسها. رسم توضيحي بالذكاء الاصطناعي.

‏صفحتا مواعيد تبدوان مرتبتين. في كلتيهما حقل للتاريخ وزر حفظ. في الأولى، تغيّر نافذة حوار الموعد؛ وفي الثانية، تُفتح صفحة منفصلة. أي النسختين أفضل؟ تساعد لقطة الشاشة في الألوان والمسافات، لكنها لا تُظهر إلا بقدر محدود ما إذا كان الناس يفهمون مسار الاستخدام.

‏في 15 أكتوبر 2026، فتحت Figma ميزة Code Layers كإصدار تجريبي. يمكن تطوير النماذج الأولية المدعومة بالكود ومقارنتها على لوحة التصميم المشتركة؛ كما يمكن إدخال كود موجود وفق الشروط الموثقة. من وجهة نظر تحريرية، الجانب المثير للاهتمام هو العمل المشترك على السلوك. وبذلك يصبح النموذج الأولي موضوعًا للقرار بدلًا من مجرد عرض نتيجته الجذابة.

‏المهمة نفسها أولًا، ثم واجهات مختلفة

‏مثالنا الخاص فعالية لنادٍ. يُفترض أن يغيّر الشخص التاريخ، ويقرأ شرط المشاركة، ثم إما يحفظ أو يلغي. تحصل النسختان على العنوان نفسه والتاريخ نفسه والملاحظة الأطول نفسها. فلو عرضت إحدى النسختين عنوانًا مؤقتًا قصيرًا فقط، لكانت المقارنة منحازة من الأساس.

‏تُبقي نافذة الحوار نظرة المواعيد العامة في الخلفية، بينما توفر صفحة التحرير المنفصلة مساحة أكبر. هذه قرارات تصميم مختلفة، وليست أحكامًا على الجودة. يصبح الأمر مثيرًا للاهتمام عند الانتقالات: أين يكون الشخص بعد الحفظ؟ ماذا يحدث للإدخال الذي بدأه عند الإلغاء؟ ما المعلومات التي تبقى مرئية أثناء التغيير؟

‏نموذج الحالات يجعل السلوك شيئًا يمكنك مناقشته

‏صِف المسار أولًا دون صياغة برمجية. الموعد مرئي. يفتح «تحرير» حقل إدخال. يؤدي الإدخال غير الصالح إلى شرح، مع الاحتفاظ بالإدخالات الصالحة. يعرض «حفظ» الحالة المؤكدة. يعيد «إلغاء» إلى الحالة غير المتغيرة. هذه متطلبات لمثالنا، وليست وعدًا بشأن ميزات مدمجة في Figma.

View → Edit → Input
Input → valid → Save → Confirmation
Input → invalid → Hint + input kept
Input → Cancel → original view

‏بهذا النموذج الصغير، يمكن فحص كل نسخة بشكل موجّه. ربما تبدو نافذة الحوار ممتازة لكنها تفقد نص التلميح عند حدوث خطأ. وربما تكون الصفحة المنفصلة أقل أناقة لكنها تجعل طريق العودة أسهل فهمًا. عندئذٍ يتعلق التقييم بالسلوك الملاحظ، لا بتفضيل عام لنوافذ الحوار.

‏تحتاج الملاحظات إلى نقطة مرجعية مشتركة

‏التعليق المفيد يكون كالتالي: «بعد الإلغاء، لم أستطع أن أعرف ما إذا كان تاريخي الجديد قد حُفظ.» فهو يحدد المكان والإجراء وحالة عدم اليقين. أما عبارة «لا تبدو حديثة بما يكفي» فلا تقدم بعد سؤالًا يمكن لأي أحد العمل عليه. وعندما توجد المسودات والتعليقات على اللوحة نفسها، يمكن الحفاظ على الربط بالنسخة التي يجري النظر فيها.

‏دوّن لكل تغيير حالة عدم اليقين التي يُقصد به إزالتها. على سبيل المثال، غيّر التأكيد أولًا، بدلًا من تغيير الخط والألوان والتنقل في الوقت نفسه. هذا يسهّل فهم سبب ظهور نسخة ثانية بشكل مختلف. ليست هذه دراسة قابلية استخدام مضبوطة، لكنها انضباط عمل معقول لمرحلة التصميم.

‏القرار قابل للنقل؛ أما الكود فليس كذلك تلقائيًا

‏في النهاية، ينبغي أن تكون هناك ملاحظة تسليم قصيرة: النسخة المفضلة، والمهمة التي تدعمها، والحالات ذات الصلة، والأسئلة المتبقية. المسودة التفاعلية ذات البيانات النموذجية ليست بعد منصة حجز حقيقية. يجب أن يعمل تسجيل الدخول والبيانات المخزنة والصلاحيات الفعلية بشكل منفصل في التطبيق.

‏بالنسبة إلى إضافة صغيرة من جهة العميل إلى صفحة KENJTEC، يمكن بعد ذلك تنفيذ القرار بكود HTML وCSS وJavaScript خاص بك. ويوفّر ‏KENJTEC WebSiteBuilder ai ‏لهذا الغرض وضعًا للمطوّرين مع معاينة معزولة وخطوة خاصة به لنشر الكود. أنت من ينقل المكوّن ذا الصلة بنفسك؛ ولا يعني ذلك استيرادًا من Figma ولا استضافة لأي تطبيق تختاره.

‏وفقًا للحالة الموثقة، تظل Code Layers إصدارًا تجريبيًا. ينبغي التحقق مجددًا من التوفر والمشاريع الأولية المدعومة والشروط قبل أي دليل إرشادي محدد. ومع ذلك، تصمد الطريقة بغض النظر عن الأداة: لا تكتفِ بمقارنة شاشتين جذابتين، بل قارن إجابتين يمكن تتبعهما عن السؤال نفسه حول كيفية استخدام شيء ما.

‏المصادر والحالة

‏البحث والتوثيق بتاريخ 25 أكتوبر 2026. ‏صمّم بشكل مشترك باستخدام طبقات الكود على اللوحة‏.

‏هامبورغ هي نقطة انطلاقنا.

‏الفائدة ترافقك أينما ذهبت.

‏تطبيقات عملية للذكاء الاصطناعي من هامبورغ، بشرح للجميع.

‏المقالات المحفوظة