ليس على التصميم أن يُسطَّح إلى صورة PNG ليصل إلى After Effects. هذه الصفحة تُظهر ما يصير إليه كل جزء من ملف Figma بعد وصوله، خاصيّة بعد أخرى، باستعمال النتيجة الحقيقية لعملية نقل وليس رسماً توضيحياً لها.
كل صورة بالأسفل هي النتيجة تماماً كما وصلت إلى After Effects، منقولة بواسطة Prism من ملف Figma المعروض أدناه. وعدد منها يضع الاثنين جنباً إلى جنب حتى تتحقّق من الادّعاء بدل أن تصدّقه. وقسم «ما الذي لا ينتقل» موجود في هذه الصفحة لنفس السبب.
تصميم ينتقل من Figma إلى After Effects
إطار Figma واحد يحمل كل الحالات دفعة واحدة: أشكال بزوايا دائرية، مضلّع، تدرّجات خطّية، حدود، نص عنوان ونص متن، تعبئات نصف شفافة، تمويه، ظل، وعمل فني موضوع.
أُرسل إلى After Effects في عملية نقل واحدة، وكل ما تراه في هذه الصفحة خرج من ذلك الإرسال الواحد.
هذا هو التركيب مباشرة بعد النقل، بلا أي تدخّل. كل عنصر من التصميم له طبقته الخاصة، باسمه، وبالترتيب الذي كان عليه، والإطارات والمجموعات حوله معاد بناؤها كتراكيب متداخلة وروابط الارتباط موصولة سلفاً. لا شيء هنا وُضع يدوياً، ولا شيء منه صورة مسطّحة. وهذا هو الفرق بين أن تستلم تصميماً وأن تستلم لقطة شاشة له.
الإطارات والبطاقات والأزرار والفواصل التي يُبنى منها التخطيط، بمقاساتها وأنصاف أقطار زواياها وعدد أضلاع مضلّعاتها.
كل واحد منها يصير طبقة شكل حقيقية في After Effects، وليس صورة لها. في اللقطة وصل المضلّع كـPolystar Path بعدد نقاطه ونصف قطره كأرقام حيّة، ونصف قطر زواياه كمُعدِّل Round Corners فوق التعبئة. وسّع البطاقة، زد للمضلّع ضلعين، أخرج بأي دقّة: يبقى متّجهاً، وما تحتاجش ترجع لـFigma.
العناوين والتسميات والفقرات، بخطّها ووزنه وحجمه والتباعد بين الحروف وارتفاع السطر والمحاذاة.
النص يصل كطبقة نص حيّة في After Effects. لوحة Character في اللقطة تقرأ الخط الحقيقي والحجم الحقيقي من الطبقة المنقولة، وليست لقطة من Figma: عائلة الخط ووزنه يُطابَقان مع الخطوط المثبّتة على جهازك. النص متعدّد الأسطر والأنماط المختلطة ينتقل، ونقطة الارتكاز في وسط كل طبقة نص، وهي التفصيلة الصغيرة التي تجعل تكبير عبارة أو تدويرها يتصرّف كما تتوقّع.
تعبئة مبنية من محطّات لونية بدل لون واحد مسطّح، بأي زاوية وضعها التصميم.
التدرّج يصل كتعبئة تدرّج حقيقية داخل طبقة الشكل، بنقطتي بدايته ونهايته ونوعه ومحطّاته اللونية. في اللقطة محرّر التدرّج مفتوح على طبقة منقولة: كل محطّة لا تزال موجودة، لا تزال قابلة للسحب، لا تزال قابلة لإعادة التلوين. هذا هو الجزء الذي غالباً ما يُسطَّح إلى صورة أثناء النقل، وهو بالضبط الجزء الذي يجعل التصميم يبدو مصمَّماً.
الحدّ حول الشكل: سماكته ولونه ونمط تقطيعه وشكل نهاياته.
الحدّ يُبنى كعنصر خاص به موضوع فوق التعبئة، تماماً كما يركّبه Figma، بدل أن يُرسم داخل نفس البكسلات. في اللقطة Stroke 1 و Fill 1 سطران منفصلان تحت نفس الشكل، لكلٍّ لونه وشفافيته. وهذا يُبقيهما مستقلّين: أعد تلوين الإطار دون المساس بما يحيط به، أو حرّك سماكته وحدها. وأنماط التقطيع ونهايات الخطوط تنتقل معه.
التأثيران اللذان يحملان معظم الإحساس بالعمق في التصاميم الحديثة: طبقة مموّهة، وظل مزاح خلف عنصر.
كلٌّ منهما يصير تأثيراً حقيقياً على الطبقة بدل أن يكون مخبوزاً داخلها. اللقطة تُظهر الاثنين على شكل واحد منقول: ظل يحمل لونه وشفافيته واتجاهه ومسافته ونعومته، وتمويه غاوسي يحمل نصف قطره. ولأنها تأثيرات حقيقية تقدر تضع لها Keyframes، أو تطفئ واحداً للمقارنة، أو تُدخل شيئاً آخر بينهما. والظل الداخلي والتوهّج ينتقلان أيضاً.
في Figma شفافيتان مختلفتان والمصمّمون يستعملون الاثنتين: شفافية تعبئة واحدة أو حدّ واحد، وشفافية الطبقة بأكملها.
تبقيان منفصلتين أثناء النقل. في اللقطة التعبئة عند 30 بالمئة داخل الشكل بينما تحويل الطبقة ما زال عند 100، تماماً كما كان في التصميم، فخفض واحدة لا يغيّر الأخرى بصمت. ودمج الاثنتين في رقم واحد هو الاختصار المعتاد، وهو ما يجعل التصميم المنقول يبدو «قريباً من الصحيح» ومستحيل التصحيح.
الصور، وتعبئات الصور، والأيقونات، والشعارات، وأي مسار أعقد من أن يُعاد بناؤه كطبقة شكل.
تُصدَّر من Figma بدقّتها الكاملة وتدخل كطبقات footage تشير إلى ملفات حقيقية، موضوعة ومقاسة في مكانها الصحيح. المجسّم المظلّل في اللقطة واحد منها: قطعة فنية لن تعيد أي طبقة شكل إنتاجها بأمانة، تصل حادّة وفي موضعها بدل أن تُقرَّب. واستبدالها لاحقاً مسألة تبديل ملف.
بنية الملف: ما الذي يوجد داخل ماذا، وبأي ترتيب، وما المرتبط بماذا.
ضع قائمتي الطبقات جنباً إلى جنب وستجدهما القائمة نفسها. كل إطار ومجموعة في التصميم وصلا كتركيبة خاصة بهما، محتفظَين باسمهما وبموضعهما في الترتيب وبتداخلهما، مع روابط ارتباط موصولة بين الطبقات التي كانت مرتبطة. هذا هو الفرق بين أن تستلم تصميماً وأن تستلم صورة له: تقدر تفتح أي جزء منه وحده وتحرّكه بلا ما تمسّ الباقي.
طبقات النص تصل إلى AE كنص حي الخط والحجم والوزن والمحاذاة واللون والتباعد كلها محفوظة وجاهزة للأنيميشن.
التدرجات الخطية والشعاعية من فيغما تُحوَّل إلى تأثيرات تدرج مطابقة في AE الألوان والنقاط والزوايا وشفافية كل نقطة.
شجرة الطبقات الكاملة المجموعات والإطارات والتداخل تُعاد بناؤها في AE مع pre-comps مطابقة وسلاسل ارتباط نظيفة.
مذكورة بوضوح. قائمة كلّها «نعم» لا تستحقّ القراءة، وأيٌّ من هذه سيُكتشف في العشر دقائق الأولى على أي حال.
لا يوجد في After Effects مكافئ لـAuto Layout في Figma، فالتكديس يصل مقاساً وموضوعاً تماماً كما بدا، لكن ليس كقاعدة تُعيد الترتيب. تغيير حجم عنصر واحد لن يدفع البقيّة.
عائلة الخط ووزنه يُطابَقان مع الخطوط الموجودة فعلاً عندك. الخط الذي يعيش في Figma وحدها لا يمكن مطابقته، وسيستبدله After Effects كما يستبدل أي خط ناقص.
روابط الـPrototype والانتقالات والحالات التفاعلية مفاهيم خاصة بـFigma وليس لها ما يقابلها في After Effects. ما ينتقل هو التصميم، وليس الـPrototype الموصول فوقه.
يعمل Prism على ويندوز. نسخة macOS قيد العمل، وهناك قائمة انتظار بدل تاريخ موعود.
نفس التصميم ينتقل أيضاً إلى DaVinci Resolve، حيث يُعاد بناؤه كشبكة عقد Fusion. ولذلك المسار صفحته الخاصة، بلقطاته الخاصة وحدوده الخاصة.
شوف صفحة Resolve →ينقل Prism تصاميم Figma و Illustrator و Photoshop إلى After Effects أو DaVinci Resolve كطبقات قابلة للتعديل، ويعيد إرسال الإطار المعدَّل بلا ما تخسر الشغل الذي حرّكته سلفاً.