Figma تكشف عن أدوات الرسوم المتحركة المدعومة بالذكاء الاصطناعي وأدوات WebGPU Shader

تعمل Figma على إحداث تحول جذري في الجسر الرابط بين التصميم والتطوير من خلال دمج قدرات الذكاء الاصطناعي المتقدمة مباشرة في مساحة العمل (canvas) الأساسية الخاصة بها. وخلال مؤتمر Config السنوي، أعلنت عملاقة التصميم عن مجموعة من الأدوات عالية الدقة، بما في ذلك الرسوم المتحركة المدعومة بالذكاء الاصطناعي وتأثيرات الـ shader، المصممة لأتمتة سير العمل الإبداعي المعقد.

سد الفجوة باستخدام Code Layers وتحسين التطوير الكامل (Full-Stack)

يعد إعادة تصور مساحة العمل (canvas) أحد أهم التحولات في منظومة Figma، حيث أصبحت الآن محسنة للتطوير الكامل (full-stack). ويسمح تقديم "Code Layers" للمصممين والمهندسين بالعمل في بيئة موحدة، مما يمحو الخطوط الفاصلة بفعالية بين النموذج المرئي (mockup) وبين الكود البرمجي الفعلي.

يمكن للمطورين الآن استنساخ المستودعات (repositories)، وتوليد اتجاهات تصميم جديدة باستخدام وكيل الذكاء الاصطناعي الخاص بـ Figma، واستخراج التدفقات المعقدة إلى طبقات تصميم قابلة للتحرير. والأهم من ذلك، تسمح هذه التحديثات بسير عمل ثنائي الاتجاه حيث يمكن مزامنة التغييرات مرة أخرى مع الكود. ومن خلال جلب وكلاء الذكاء الاصطناعي وأدوات البرمجة إلى مساحة واحدة، تبتعد Figma عن كونها مجرد أداة لعمل النماذج الأولية (prototyping) لتصبح مركزاً محورياً لدورة حياة تطوير المنتج بأكملها.

الحركة التوليدية والرسوم المتحركة المدعومة بالذكاء الاصطناعي

تعالج Figma أحد أكثر جوانب تصميم UI/UX استهلاكاً للوقت: الحركة (motion). تتيح أدوات Motion الجديدة للفرق تصميم الرسوم المتحركة، والانتقالات، والتحويلات ثلاثية الأبعاد (3D transforms) بشكل تعاوني مباشرة داخل المنصة.

بدلاً من تحديد الإطارات الرئيسية (keyframing) لكل حركة يدوياً، يمكن للمستخدمين الاستفادة من واجهة دردشة آلية (chatbot) لـ "طلب" (prompt) إنشاء الرسوم المتحركة. يتيح هذا النهج المدعوم بالذكاء الاصطناعي للمبدعين وصف انتقال معين — مثل ارتداد أو انزلاق محدد — ليقوم البرنامج بتوليد الرسوم المتحركة تلقائياً. ولأن أصول الحركة هذه مرتبطة بأنظمة التصميم ومدعومة بالكود، فهي "جاهزة للإطلاق" (ready to ship)، مما يقلل بشكل كبير من عقبات التسليم (handoff) بين التصميم وهندسة الواجهات الأمامية (front-end engineering).

مرئيات عالية الدقة عبر WebGPU Shaders

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

يمكن للمستخدمين الآن استخدام الأوامر النصية (prompts) لبناء تأثيرات shader معقدة، مثل الـ dithering، والـ pixelation، وأنواع التمويه (blur) المتطورة، مباشرة على مساحة العمل. تمكن هذه القدرة المصممين من تنفيذ تأثيرات بصرية عالية الجودة وعالية الأداء ترتكز على معايير الويب الحديثة. ويكمل ذلك "Figma Weave"، وهي مجموعة تضم أكثر من 20 أداة ذكاء اصطناعي متكاملة مصممة لتحويل سير عمل الذكاء الاصطناعي المعقد والمتعدد الخطوات إلى إجراءات بسيطة وبديهية على مساحة العمل.

لماذا يهم هذا مشهد الذكاء الاصطناعي

يشير تطور Figma إلى اتجاه أوسع في الصناعة: الانتقال من "الذكاء الاصطناعي كمساعد" إلى "الذكاء الاصطناعي كمحرك متكامل". ومن خلال دمج القدرات التوليدية في مجالات متخصصة مثل الحركة ورياضيات الـ shader، توضح Figma كيف يمكن تطبيق نماذج اللغات الكبيرة (LLMs) والذكاء الاصطناعي التوليدي في سير عمل مهني وتقني للغاية. يضع هذا التطور معياراً جديداً لكيفية قيام البرامج الإبداعية بتعزيز الخبرة البشرية بدلاً من مجرد أتمتة المهام البسيطة والمتكررة.

النقاط الرئيسية

  • سير عمل موحد: تسمح طبقات Code Layers الجديدة للمطورين بمزامنة تغييرات التصميم مباشرة مع الكود، مما يسهل عملية التسليم (handoff).
  • حركة توليدية: يمكن للمصممين الآن استخدام أوامر اللغة الطبيعية لإنشاء رسوم متحركة وتحويلات ثلاثية الأبعاد معقدة ومدعومة بالكود.
  • مرئيات متقدمة: يتيح دمج الـ shaders المدعومة بتقنية WebGPU تأثيرات عالية الدقة مثل dithering وpixelation من خلال أوامر ذكاء اصطناعي بسيطة.