بنيت بطل موقع تفاعلي في Figma يتفاعل مع مؤشر الفأرة. هذه هي العملية.

معظم عروض "الذكاء الاصطناعي في سير عمل التصميم" تقف عند صورة ثابتة. هذا يتحرك. بطل موقع تفاعلي، منظر خيال علمي سينمائي يميل نحو مؤشرك، مبني في Figma بدون ملف ثلاثي الأبعاد واحد أو سطر كود shader. كل شيء جاء من إضافة Higgsfield، داخل اللوحة التي أعمل فيها كل يوم.

هذا هو البطل النهائي. يعمل المحمّل على المعايرة، يظهر المشهد، ثم يتفاعل مع المؤشر في جميع الاتجاهات.

الأمر كله أربع خطوات، وكل أمر نصي موجود أدناه جاهز للنسخ:

1. أنشئ المشهد كلقطة تأسيسية سينمائية واحدة.
2. أنشئ نفس المشهد من أربع زوايا كاميرا منحرفة قليلًا.
3. حوّل مقاطع الزوايا تلك إلى تسلسل صور ثابتة.
4. اربط التسلسل بالمؤشر وألبسه تصميم صفحة حقيقية.

لا يحتاج أي من هذا إلى After Effects أو تطبيق ثلاثي الأبعاد أو مهندس. إضافة واحدة وأمر بناء نصي واحد.

الخطوة 1: أنشئ المشهد

افتح إضافة Higgsfield داخل Figma وأنشئ لقطة تأسيسية سينمائية واحدة. الحيلة هي طلب عمق واضح، مقدمة ووسط وخلفية كطبقات مميزة، لأن هذا الفصل هو ما يجعل تأثير البارالاكس مقروءًا لاحقًا. رسم، لا صورة.

Soft hand-painted sci-fi concept art, cinematic and atmospheric. A lone armored hero on a dark rocky cliff in the near foreground, gazing out over a vast misty valley of floating islands and tall glowing spires fading into an aurora sky. Strong depth built from clearly separated planes: dark foreground cliff and hero, floating rocks in the midground, distant spires far behind, soft atmospheric haze between each layer. Moody purples and teals with warm light. Simple and clean, not busy, painterly brushwork, epic scale.

Copy

الخطوة 2: أنشئ زوايا الكاميرا

الآن أنشئ نفس المشهد من أربعة أوضاع كاميرا منحرفة قليلًا: أعلى، أسفل، يسار، يمين. الكلمة المهمة هنا هي orbit، لا tilt.

الـ tilt يدور الكاميرا في مكانها ويعطيك بارالاكس ضئيل جدًا. الـ orbit يحرك الكاميرا عبر الفضاء، فالجرف القريب يتأرجح كثيرًا بينما الأبراج البعيدة بالكاد تتحرك. هذا الفرق هو الوهم بأكمله. أبقِ الزاوية صغيرة، حوالي 12 درجة، وثبّت اللقطة حتى لا يتذبذب شيء بين الإطارات.

Single-axis camera ORBIT UP only, about 12 degrees, locked-off and gimbal-smooth, no handheld, no camera shake, no wobble. Vertical axis only, no horizontal drift, no diagonal. The scene is completely frozen, nothing in it moves, only the camera. Slow, subtle, seamless. Strong parallax: near foreground shifts more than the distant background.

Copy

الخطوة 3: حوّل المقاطع إلى تسلسل صور

صدّر كل مقطع orbit كإطارات. لست تشغّل فيديو هنا، أنت تبني كتيب رسوم يمكن للمؤشر تصفحه. القاعدة الوحيدة التي تصنع الفارق أو تكسره: أظهر الإطار الأقرب لموضع المؤشر، ولا تدمج إطارين معًا أبدًا.

هذه القاعدة جاءت من ثلاثة أنماط فشل واجهتها وأصلحتها، بالترتيب:

• دمج إطارين متجاورين لـ"تنعيم" الحركة هو بالضبط ما ينتج التشبيح، التشويش المزدوج.
• البحث في ملف فيديو حقيقي مباشرةً، تحريك رأس التشغيل عبر mousemove، هو ما ينتج التقطع، لأن البحث في الفيديو ليس دقيقًا على مستوى الإطار.
• حفنة من الإطارات تبدو متقطعة ورخيصة، كعرض شرائح.

الحل للثلاثة واحد: إطارات كثيرة، تُعرض واحدًا في كل مرة، الأقرب للمؤشر، بدون أي دمج. صدّر إطارات كثيرة لكل اتجاه وستبدو الحركة كعمق حقيقي.

الخطوة 4: اربط التسلسل بالمؤشر

الخطوة الأخيرة هي التفاعل. سلّم Figma Make خمسة إطارات ثابتة، أعلى، أسفل، يسار، يمين، ووسط، والأمر النصي أدناه. يربط المؤشر بالإطار الصحيح، يعرّج الحركة لتنساب بسلاسة، يضيف محمّل المعايرة، ويضع الواجهة الكاملة فوق المشهد حتى يعيش الشعار والقائمة والعنوان والأزرار كلها في نفس عالم المشهد.

Build a full-screen interactive hero. I provided the flat frames of a scene captured from up, down, left and right camera angles, plus a center frame. Stack them on a canvas. On mousemove, show the single frame nearest to the cursor's dominant axis (horizontal vs vertical, whichever is larger), eased so it glides. No blending between frames except a brief 100ms dissolve when the axis switches. Start with a calibration loader: a centered crosshair that draws in, counts up, then locks and becomes the live cursor as the scene reveals. Over the scene, lay a full interface in the same minimal monospace HUD style: a wordmark logo top-left, a horizontal nav menu top-right, a centered headline with one line of subtext, and a primary plus a secondary button. Thin rules, small uppercase labels, so the chrome and the scene read as one system. Dark and minimal. Respect prefers-reduced-motion.

Copy

لماذا هذا مهم

النقطة ليست السفينة الفضائية. النقطة أن المصمم يمكنه الآن إطلاق قطعة متحركة كانت تحتاج إلى فنان ثلاثي الأبعاد ومزرعة تصيير ومهندس WebGL، من داخل الأداة التي يعيش فيها أصلًا.

انظر إلى ما تم إنتاجه فعليًا مقابل ما تم شراؤه. المشهد وأربع زوايا الكاميرا وتسلسل الإطارات الكامل، كلها تم توليدها. التجميع، ربط الإطارات بالمؤشر وتزيين الصفحة، كان أمرًا نصيًا واحدًا للبناء. التكلفة الإجمالية كانت بعد ظهر يوم وإضافة، لا ميزانية إنتاج وثلاثة مقاولين.

هذا هو التحول الذي يستحق الانتباه. كان الحاجز أمام "سينمائي وتفاعلي" فريقًا كاملًا. الآن هو أمر نصي واستعداد للعناية بالتفاصيل، وهو الجزء الذي كان المصممون بارعين فيه على أي حال.

إذا بنيت واحدًا، تاغ Brainy. نريد رؤيته.