غالبًا ما يقوم المصممون بوضع نماذج أولية للانتقالات في Figma باستخدام Smart Animate والتخفيف الزنبركي أو البيزيير. يحتاج المطورون بعد ذلك إلى إعادة إنتاج هذه الحركة في React. لا يقوم Figma بتصدير هذه التحولات كرمز رسوم متحركة عامل، لذا فإن المهمة هي الترجمة.
ابدأ بتسجيل ما يفعله النموذج الأولي: ما الذي يؤدي إلى التغيير (النقر، التمرير، بعد التأخير)، ما هي الطبقات التي تتحرك وما هي الخصائص التي تتغير، والتوقيت (مدة مع منحنى تخفيف، أو زنبرك). يعرض وضع الفحص ولوحة النموذج الأولي هذه القيم.
بالنسبة للحالات البسيطة مثل التلاشي أو تغير اللون، تكون انتقالات CSS كافية. بالنسبة للينابيع والإيماءات وانتقالات التخطيط المشتركة والدخول إلى الرسوم المتحركة أو الخروج منها، تعد مكتبة مثل Motion (Framer Motion سابقًا) هي الاختيار الشائع في React. استخدم نفس قيم الربيع التي اختارها المصمم.
احفظ هذه القيم كرموز حركة بحيث يستخدم الانتقال التالي نفس التوقيت. يقوم محول Figma Animation to Spring Converter المجاني بتحويل Figma إلى إعدادات زنبركية. يمكن لأدوات ترميز الذكاء الاصطناعي تسريع هذا الأمر، خاصة عند الاتصال بخادم MCP الخاص بـ Figma حتى يتمكنوا من قراءة سياق التصميم.
بالنسبة للمكونات ذات الحالات المتعددة، مثل زر التحميل أو النجاح أو الخطأ أو تدفق الإعداد المتحرك، فإن إعادة البناء يدويًا تكون مكلفة. يتيح لك ExodeUI، الذي نصنعه، تصميم هذا المكون مرة واحدة وتشغيله في React باستخدام حزمة exodeui npm، والتحكم فيه بالمدخلات والأحداث من التعليمات البرمجية الخاصة بك.