بريزم

نقل تصميم Figma إلى After Effects بدون إعادة بنائه

تصدير تصميم من Figma إلى After Effects عادة معناه إخراج ملفات SVG، استيرادها واحدة واحدة، مشاهدة التدرجات وهي تنكسر، إعادة كتابة كل ليير نص، وإعادة بناء هيكلة المجموعات يدوياً. في شاشة واحدة هذا يعني عشرين دقيقة ما راح تحاسب عليها. في عرض منتج كامل، هذا يعني معظم يوم عمل.

Prism يحذف هذه الخطوة. تختار فريم، تضغط نقرة واحدة، والتصميم ينزل في الكومب مع شجرة الليرز كاملة وكل شيء قابل للتعديل. نفس النقل بنقرة واحدة من Illustrator ومن Photoshop، ونفس النقل إلى DaVinci Resolve.

ما الذي ينتقل فعلاً

المستطيلات والدوائر والمسارات الفيكتورية تصل كـ shape layers أصلية في After Effects، وليست صور PNG مسطحة، فتقدر تحرّك نقاط المسار وتستعمل Trim Paths وتغيّر سُمك الحد تماماً كأنك رسمت الشكل بنفسك. النص يبقى نصاً حياً: الخط والوزن والحجم والتباعد وارتفاع السطر والمحتوى نفسه، كلها قابلة للتعديل داخل After Effects بعد النقل، ونقطة الارتكاز تكون موضوعة في المنتصف مسبقاً حتى يتصرّف الـ scale والـ rotation كما تتوقع.

الألوان الصلبة والتدرجات الخطية والدائرية يُعاد بناؤها كـ fills و gradient ramps حقيقية داخل After Effects، مع الحفاظ على كل نقطة لون وزاوية وشفافية لكل نقطة، بدل ما تُطبع داخل صورة ما تقدرش تغيّر لونها. تأثيرات الليير مثل Gaussian Blur و Drop Shadow تنتقل كتأثيرات تقدر تحط عليها keyframes. الفريمات والمجموعات تصير نفس التداخل في التايم لاين: الفريم يتحوّل إلى pre-composition، والمجموعة إلى مجموعة مرتبطة بـ null، وترتيب الطبقات يطابق التصميم. صور الـ fill تُصدَّر بدقتها الكاملة وتوضع في مكانها بالضبط.

الماسكات تنتقل هي الأخرى، بأشكالها الخمسة في Photoshop: ماسك الراستر المرسوم يصير Luma Track Matte بكل درجات الرمادي، وماسك الفيكتور يُعاد بناؤه كماسك After Effects حقيقي قابل للتعديل، والاثنان يتركّبان على ليير واحد تماماً كما في التصميم، والماسك على مجموعة يصير ماتّ على الـPre-comp، وليير الشكل يصل مقصوصاً بحدوده. شوف كل واحد فيهم منقولاً جنب الآخر.

عدّل التصميم بدون ما تخسر التحريك

هذي هي الجزئية اللي كل إضافة Figma إلى After Effects أخرى تتركها لك. التصاميم تتغير بعد ما يبدأ التحريك، والحل المعتاد هو حذف الليرز القديمة وإعادة النقل وإعادة الـ keyframes من الصفر. Prism يضع علامة على كل ليير ينشئه، فإعادة الإرسال تجد الليير الموجود مسبقاً وتحدّث شكله ولونه ونصه في مكانه. الـ keyframes والـ expressions والـ parenting كلها تبقى. هذا معنى Live Sync، وهو مشروح خطوة بخطوة في دليل Prism.

مقارنة مع Overlord و AEUX و DEmotion و Convertify

Overlord هي الأداة الأشهر في هذا المجال وهي فعلاً جيدة: تقرأ من Figma و Illustrator و Photoshop، وسعرها أعلى مقابل ترخيص دائم واحد. AEUX مجانية، تقرأ من Figma و Sketch، وهي نقطة انطلاق معقولة، لكنها تتوقف عند تأثيرات الليرز. DEmotion أحدث، تعمل مع Figma فقط، وسريعة. أما Convertify فتمرّر التصميم عبر ملف Adobe XD أولاً، وهي خطوة تحويل إضافية تُفقد التأثيرات دقتها.

ثلاثة أشياء لا تفعلها أي منها. Prism يرسل التصميم إلى DaVinci Resolve كـ Fusion composition، وليس إلى After Effects فقط. Prism يزامن في الاتجاهين بين برامج التصميم نفسها، فيقدر فريم Figma ينزل في Illustrator أو Photoshop ويرجع. و Prism يعيد الإرسال بدون ما يهدم الـ keyframes اللي حطيتها. إذا كنت تقارن بدائل Overlord أو بدائل AEUX، هذي هي الأسئلة الثلاثة اللي تستاهل تطرحها على كل واحدة منها. شوف واش يصير تصميم Figma داخل Resolve.

لمن هذه الأداة

مصممو الموشن اللي يحرّكون واجهات، فرق المنتج اللي تحوّل نموذج Figma إلى فيديو عرض، الوكالات اللي تنتج فيديوهات شرح لمنتجات SaaS حيث نظام التصميم في Figma والتحريك في After Effects، والمونتيرين اللي يكمّلون في Resolve وكانوا خارج كل جسر تصميم-إلى-موشن في السوق.

التنصيب

Prism يتكوّن من نصفين: إضافة داخل برنامج التصميم تقرأ اختيارك، ولوحة داخل After Effects أو Resolve تبني الليرز. مثبّت واحد على Windows ينصّب الاثنين، تلصق مفتاح الترخيص مرة واحدة، وكل نقل بعدها بنقرة واحدة. يعمل مع After Effects CC 2019 وما فوق على Windows. نسخة macOS قيد التحضير. الشرح الكامل في دليل Prism.