Figma Code layers: لماذا أصبح اختبار تجربة الموقع أهم من صورته؟
تحديث Figma في أكتوبر 2026 يقرّب التصميم من النماذج المدعومة بالكود. كيف تستفيد منه عند مراجعة موقع أو منيو إلكتروني؟
الفكرة الأساسية: صورة الواجهة تساعدك على مناقشة شكلها، لكن تجربة قابلة للنقر تكشف أسئلة مختلفة: ماذا يفعل الزائر؟ وأين يتوقف؟ وهل يفهم الخطوة التالية؟
في اجتماع اعتماد موقع جديد، قد تبدو الصفحة مكتملة: ألوان متناسقة، عنوان واضح وصورة جميلة. ثم يأتي السؤال الذي لا تجيب عنه الصورة: ماذا يحدث عندما يغيّر العميل اختياره؟ هنا ينتقل النقاش من الإعجاب بالشكل إلى فهم التجربة، وهي المساحة التي يفتح فيها خبر Figma بابًا مفيدًا لأصحاب المشاريع.
الخبر: نماذج مدعومة بالكود على لوحة التصميم
ضمن تحديثات 15 أكتوبر 2026، أعلنت Figma طرح Code layers في نسخة تجريبية مفتوحة. يصف سجل الإصدارات الميزة باعتبارها وسيلة لإنشاء نماذج تفاعلية مدعومة بالكود داخل لوحة العمل، من تصميم قائم أو مصادر أخرى. وشمل الإعلان Specs لتجميع المقصود من التصميم والسياق المكتوب والتفاصيل التقنية في مساحة مشتركة. المصدر: سجل إصدارات Figma، تحديث Config India 2026.
لا نقرأ الخبر على أنه يجعل كل نموذج موقعًا جاهزًا للنشر. قيمته بالنسبة لعميل التصميم أنه يوسّع ما يمكن مناقشته قبل اعتماد التنفيذ: سلوك الواجهة، والرسائل التي يراها المستخدم، والحالات التي لا تظهر في اللقطة الرئيسية.
مثال منيو إلكتروني: اختبر الطلب الذي لم يحدث بعد
لنتخيل مقهى يراجع منيوه الرقمي. بدل الاكتفاء بصورة بطاقة المشروب، نقترح تجربة ثلاث مهام: البحث عن صنف، معرفة السعر والمكونات، والانتقال إلى وسيلة التواصل أو الطلب المعتمدة. ثم نجرّب حالة لا توجد فيها نتيجة للبحث. هل توضح الواجهة ما حدث، أم تترك الزائر أمام مساحة فارغة؟ هذا مثال تصميمي نقترحه في رويي، وليس اختبارًا أجريناه لنتائج Figma.
| ما تعرضه الصورة | ما تختبره التجربة |
|---|---|
| شكل القائمة | هل يستطيع الزائر العثور على الصنف المطلوب؟ |
| مظهر زر التواصل | هل يعرف المستخدم ما الذي سيحدث عند الضغط؟ |
| ترتيب بطاقات الأصناف | هل تبقى الأسماء والأسعار واضحة على شاشة هاتف؟ |
كيف تراجع نموذجًا دون أن تتحول إلى مختبر تقني؟
اكتب مهمة واحدة بلغة العميل، ثم جرّب تنفيذها دون شرح مسبق لكل خطوة. دوّن الكلمات التي احتجت إلى تفسيرها، والمواضع التي توقعت أن تكون قابلة للنقر ولم تكن كذلك. راجع أيضًا ما يحدث بعد إتمام المهمة: هل توجد رسالة واضحة أو طريقة للرجوع؟
بعدها صنّف الملاحظات إلى تغيير في الفكرة، أو ترتيب المحتوى، أو تفصيل بصري. هذا التنظيم يمنع خلط قرار مهم مثل طريقة تصفح الأصناف مع تغيير لون صغير. والهدف أن يصبح اعتماد التصميم موافقة على مسار مفهوم، لا على لقطة جميلة فقط.
ما الذي تطلبه من جهة التصميم؟
اطلب تحديد ما هو تفاعلي فعلًا في النموذج، وما هو تمثيل لفكرة ستُنفّذ لاحقًا، وما يحتاج ربطًا بخدمة أخرى. في رويي لتصميم المواقع والتجارب الرقمية نبدأ من وظيفة الصفحة وما يريد العميل إنجازه، ثم نبني الشكل حولها. وللمشاريع التي تعتمد على قوائم المنتجات والأصناف، يمكنك التعرف إلى تصميم المنيو الإلكتروني.
ولأن سهولة التجربة لا تنفصل عن اتساق الهوية، تابع أيضًا قراءتنا لما تعنيه Canva ProSuite لتنظيم ملفات العلامة.
المقال بداية الحوار
وش رأيك؟ خلّنا نسمع منك.
سؤالك أو تجربتك قد تساعد قارئًا آخر. كن أول من يبدأ النقاش.