كيف تجهّز ملف Figma يُبنى بسرعة في Framer

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

صمّم على العروض التي يستخدمها Framer فعلًا

تأتي لوحة Framer بثلاثة مقاسات، وصفحات المنتج تعرض التبويبات باسم Desktop 1200 وTablet 810. والكود المنشور على framer.com يطابق ذلك. فالصور المتجاوبة تُقدَّم بقواعد للعرض من 1200px فأكثر، ومن 810px حتى 1199.98px، وحتى 809.98px كحد أقصى. لذلك ابنِ إطار سطح مكتب بعرض 1200. أضف إطار تابلت بعرض 810 إذا كان التخطيط يتغير عنده فعلًا. أضف إطار هاتف حول 390. أما التصميم على 1440 والأمل في الأفضل فينتهي بقسم علوي يبدو صحيحًا على شاشتك أنت وحدها.

ضع Auto Layout على كل شيء، حتى الإطار الخارجي

يقول درس أكاديمية Framer إن Auto Layout والتسلسل وخصائص التمدد تنتقل عند الاستيراد. وهذه هي الحيلة كلها. القسم المبني على Auto Layout يصل إلى Framer كعنصر يعرف كيف يتمدد. والقسم المبني بسحب المربعات إلى أماكنها يصل كطبقات مبعثرة تعيد بناءها. لفّ كل قسم داخل Auto Layout عمودي. ولفّ كل صف داخل واحد أفقي. استخدم المسافات بدل إبعاد العناصر بفراغات فارغة. وكل طبقة تقع خارج إطار Auto Layout هي طبقة ستبنيها مرتين.

حدد التمدد أو الثبات قبل التسليم

في Figma، اضبط غلاف القسم على fill container. وأعطِ حاوية المحتوى الداخلية أقصى عرض ثابتًا، مثل 1200 أو 1140. واضبط البطاقات داخل الصف على fill حتى تتقاسم العرض بالتساوي. هذا ينطبق مباشرة على Framer، حيث تضبط Width على 100 بالمئة أو 1fr وتضع Max Width على حاوية المحتوى. ويقول مقال استكشاف الأخطاء في Framer إن العرض الثابت أو قيمة Max Width الكبيرة هو السبب الأكثر شيوعًا لعدم امتلاء الصفحة على مقاس Phone. وكل رقم ثابت شارد تتركه في Figma خطأ تمرره إلى المرحلة التالية.

سمِّ أنماط النص وأعد استخدامها

سمِّ أنماط الخط وأعد استخدامها: H1 وH2 وH3 ونص كبير ونص عادي وتعليق وسطر تمهيدي. في Framer تبنيها مرة واحدة في لوحة Assets تحت Styles، ثم تطبقها من اللوحة اليمنى تحت Text وStyles. وكل نمط نص في Framer يحمل مقاسات خاصة بكل من Desktop وTablet وMobile، تشمل حجم الخط وارتفاع السطر والتباعد بين الحروف والتباعد بين الفقرات. وإذا كان ملف Figma يحمل أربعة عشر حجم عنوان مختلفًا اختلافًا طفيفًا، فستبني أربعة عشر نمط نص أو تعيش مع خط يبدو خاطئًا على الهاتف.

تحقق من رخصة الخط في مرحلة اختيار الخطوط

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

صدّر الصور بالحجم الذي تظهر به

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

قائمة تسليم ملف Figma

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