كيف تستورد تصميم Figma إلى Framer

لتستورد تصميم Figma إلى Framer، ثبّت الإضافة المجانية Figma to HTML with Framer، اختر الإطارات التي تريدها، ثم الصقها داخل مشروعك في Framer. يحافظ Framer على الطبقات والمجموعات والبنية، فتصل إلى لوحة ويب حقيقية تكمل العمل عليها بدل ملف كود جامد. وكل ما يأتي بعد اللصق تنظيف، والتنظيف هو الجزء الذي لا يحذرك منه أحد.

خطوات استيراد تصميم Figma إلى Framer

ثبّت Figma to HTML with Framer من Figma Community. الإضافة مجانية، ويذكر Framer أن مستخدميها تجاوزوا 600 ألف، فهي الطريق الرسمي لا جسر من طرف ثالث. حدّد الطبقات أو الإطارات التي تريد نقلها وشغّل الإضافة. ستظهر رسالة تخبرك بعدد الطبقات المنسوخة. انتقل إلى مشروعك في Framer، اضغط على اللوحة، والصق. وصفحة Figma to HTML في موقع Framer تشرح الخطوات الثماني نفسها: ثبّت الإضافة، انسخ تصاميم Figma، الصق في Framer، أكمل التعديل، اجعل الصفحة متجاوبة، أضف التأثيرات والحركة، أضف الصفحات والروابط، ثم انشر.

الصق قسمًا واحدًا في كل مرة

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

الخطوط أول ما تصلحه

وثائق مساعدة Framer واضحة في هذه النقطة. عند الاستيراد من Figma، أي خط مخصص لا يملكه Framer يُستبدل بالخط الافتراضي. فجأة يظهر عنوانك بخط النظام، ويتغير طول كل سطر، ويتغير التباعد معه. رتّب الخطوط قبل أن تلمس التخطيط. أضف طبقة نص، افتح قائمة الخطوط في اللوحة اليمنى، اذهب إلى تبويب Custom، اضغط Upload Fonts وارفع ملفك. ينصح Framer بصيغة .woff2 لأنها أسرع في التحميل. بعدها حدّد طبقات النص المستوردة وأعد تطبيق الخط. وراجع المكتبة المدمجة أولًا، لأن Framer يوفر Google Fonts وFontshare، وربما يكون خطك موجودًا فيهما.

ما ينتقل معك وما يبقى خلفك

تنتقل الطبقات والمجموعات والتسلسل. وتنتقل معها إعدادات التخطيط، ويؤكد درس أكاديمية Framer أن Auto Layout والتسلسل وخصائص التمدد تنتقل تلقائيًا. ويبقى خلفك كل ما لم يكن في Figma أصلًا: مقاسات الشاشة، وحالات المرور، وتأثيرات التمرير، والمكوّنات بمعنى Framer. وأسئلة Framer الشائعة تنصحك باستبدال القطع الثابتة بمكوّنات حقيقية بعد الاستيراد. خذ النصيحة على محمل الجد. أعد بناء شريط التنقل والزر والبطاقة كمكوّنات في Framer بدل الاحتفاظ بأربعين نسخة ملصوقة ستعدلها أربعين مرة.

حوّل الأقسام الملصوقة إلى عناصر تتمدد

القسم الملصوق الذي ما زال يحمل عرضًا ثابتًا بالبكسل سيفيض خارج شاشة الهاتف. ومقال استكشاف الأخطاء في Framer يسمي هذا السبب الأول لعدم امتلاء الصفحة على مقاس Phone: عنصر أعرض من شاشة الهاتف، غالبًا عرض ثابت مثل 321px، أو قيمة Max Width أكبر من اللازم. امش قسمًا قسمًا، حدّد الحاويات، ومن قسم Size في اللوحة اليمنى غيّر قيمة Width من رقم ثابت إلى 100 بالمئة أو 1fr. وأبقِ Max Width على حاوية المحتوى وحدها، حتى يبقى عمود النص مريحًا للقراءة على الشاشات العريضة. نفّذ هذا على مقاس Desktop أولًا، لأن قيمه تنزل إلى المقاسات الأصغر.

بعدها أضف ما جئت إلى Framer من أجله

هنا يظهر المقابل الحقيقي لاستخدام Framer بدل تصدير الكود. اضبط مقاساتك الثلاثة. أعطِ الأزرار حالة مرور وحالة ضغط. أضف ظهورًا تدريجيًا للأقسام مع التمرير. حوّل الكتل المتكررة إلى مكوّنات، فتعديل واحد يحدّث كل النسخ. وابنِ أنماط النص في لوحة Assets تحت Styles، بمقاسات خاصة بكل من Desktop وTablet وMobile، حتى يتغير حجم الخط دون أن تلمس كل طبقة على حدة. لم يكن أي من هذا موجودًا في ملف Figma. وهذا هو الجزء الذي يحوّل الصورة إلى صفحة.

الترتيب الذي نعمل به

الخطوط أولًا، ثم الألوان وأنماط النص. بعدها اعمل قسمًا قسمًا من الأعلى، وحوّل العروض الثابتة إلى تمدد وأنت تنزل. ابنِ مكوّنات لكل ما يتكرر. اضبط بعدها مقاساتك، من Desktop إلى Tablet إلى Phone، ثم أضف التفاعلات. وتأتي بيانات الصفحة الوصفية والروابط في النهاية، بعد أن تستقر البنية. هذا الترتيب ينهي صفحة هبوط واحدة في يوم. والعمل بترتيب مختلط يأخذ ثلاثة أيام، لأن كل إصلاح ينقض الذي قبله.