الأسبوع الماضي نشرت موقعي الشخصي اللي طورته باستخدام أداة Framer. في هذا الثريد بتكلم عن خصائص Framer اللي ساعدتني والمشاكل اللي واجهتني فيه 🧵
هذا موقعي للي ماشافه:
fatimahalamoudi.framer.website
#framer
هذا موقعي للي ماشافه:
fatimahalamoudi.framer.website
#framer
بالبداية Framer هي أداة تستخدم no-code تستخدم لتطوير المواقع دون الحاجة لمعرفة كيفية البرمجة. تقدر تبني فيها موقع وتنشره في دوماين الخاص فيهم ..framer.com او دوماينك لكن تحتاج تشترك في احدى خططهم المدفوعة.
framer.com
المميزات اللي سهلت علي بناء الموقع 👇🏻
framer.com
المميزات اللي سهلت علي بناء الموقع 👇🏻
١- خاصية احجام الخطوط المتجاوبة. هذي الخاصية وفرت وقت كثير علي. تحتاج تستخرج احجام الخطوط من تصميمك للموقع في الشاشات الثلاثة (الكمبيوتر، الجوال، التابلت) وتضيفها في نظام الخطوط في framer. مثلا احجام خطوط H1 عندي هي 61, 47, 27 للشاشات المختلفة.
يصير لما تنشأ صفحة التابلت بعد الانتهاء من صفحة الكمبيوتر أحجام الخطوط تتغير تلقائياً بدل من تغييرها بنفسك. مثلا حجم خط H1 بيتغير من 61 في الكمبيوتر إلى 47 في التابلت.
٢- خاصية animation: في framer تقدر تسوي animation معقدة بسهولة بدون ماتحتاج انك تعدل عليها بالكود. كل animation اللي استخدمتها في الموقع كانت باستخدام خاصية effects وما عدلت عليها بالكود.
٣- خاصية المكونات (components) الجاهزة: في مكتبة framer عدد كبير من المكونات الجاهزة اللي تقدر تستخدمها مثل navbar, slider وحتى أجزاء صفحة مثل جزئية الأسعار، الأسئلة الشائعة. الحلو فيها ان تصميمها متجاوب فحجمها بيتجاوب مع الشاشات باختلاف أحجامها.
٤- خاصية بناء المكونات (components) المشابهة ل Figma. لو تحتاج تعمل مكون خاص فيك. تقدر تبنيه في framer بنفس طريقة بناءه في فيجما مع إضافة تأثيرات مثل شكل المكون عند التأشير عليه او الضغط. مثال هنا بنيت بطاقة عرض المشاريع.
٥- خاصية CMS (Content management System ): هذي الخاصية اعتبرها أقوى خاصية منهم. CMS تستفيد منها لو عندك صفحات لها نفس النمط. مثلاً عندي صفحات لعرض خصائص لتطبيقات ومواقع مشاريع تجربة المستخدم. بدلاً من اني ابني لكل مشروع صفحة خاصة فيه هي صفحة وحدة و محتواها يتغير على حسب محتوى CMS
وهنا فيديو يوضح كيف محتوى الصفحة يتغير على حسب الشئ اللي اخترته من CMS. خاصية CMS فيها خصائص اخرى مثل الفلترة مثلاً عندي في الموقع نوعين من المشاريع (تصميم واجهات وبرمجة واجهات أمامية) اقدر افلترها على حسب نوع المشروع.
٦- خاصية التعديل على الكود (code override): الخاصية تقدر تستفيد منها لو عندك خبرة في React (مكتبة تستخدم في بناء المواقع)لان framer تستخدمه في عناصره. تقدر تعدل على كود اي عنصر او حتى تبني عنصر بنفسك بالكود وتستخدمه في framer.
٧- خاصية التحليلات (Analytics): تقدر تشوف أعداد اللي زاروا موقعك ومصدر الزيارات وأكثر الصفحات الموقع زيارة وهذي كلها متوفرة في النسخة المجانية.
٨- خاصية optimization: من الخصائص اللي تساعد في أداء الموقع ان لما تنشر موقعك في framer، framer بيوضح لك المشاكل اللي قد تأثر في أداء الموقع مثلاً في موقعي كانت في مشكلة وجود زر له رابطين مختلفين فلما نشرت الموقع ظهرت لي المشكلة.
٩- إضافة فيجما اللي تسمح لك بنسخ تصميمك من فيجما إلى framer بسهولة. في موقعي الشخصي ما استخدمتها لاني كنت ابغى أتعلم الأداة وابني كل شئ من البداية لكن جربتها في مشروع اخر وكانت نتائجها ممتازة خاصة لو مستخدم خاصية Auto Layout في فيجما بتسهل عليك بناء الموقع بشكل كبير.
نيجي للمشاكل اللي واجهتني:
١- مشكلة ان الحجم غير متجاوب لما تبني عنصر من نفسك. مثلا في عنصر البطاقة على الرغم من اني أضفت احجام الخطوط في الشاشات المختلفة إلا اني اضطريت اعمل نسخة للعنصر في كل شاشة مختلفة يعني بطاقة لشاشة الكمبيوتر والتابلت والجوال.
١- مشكلة ان الحجم غير متجاوب لما تبني عنصر من نفسك. مثلا في عنصر البطاقة على الرغم من اني أضفت احجام الخطوط في الشاشات المختلفة إلا اني اضطريت اعمل نسخة للعنصر في كل شاشة مختلفة يعني بطاقة لشاشة الكمبيوتر والتابلت والجوال.
٢- مشكلة حجم الصور والأيقونات لازم تغيرها وتصغرها بنفسك لما تنتقل من الشاشات الكبيرة إلى الصغيرة.
مميزات الأداة مقارنة بالمشاكل لا تقارن وأشوفها أداة بطلة صراحة وتستحق انك تتعلمها خاصة لو عندك خبرة في فيجما مارح تتعب في تعلمها لانها مشابهة لها. قبل framer استخدمت اداة webflow لكن ما ساعدتني كثر أداة framer خاصة ان فيه فرق بين المميزات اللي تقدمها الأداتين في النسخة المجانية.
اذكروا لي في التعليقات اذا تحمستوا تجربوا framer او إذا في أداة جربتوها وفادتكم.
في نهاية الثريد، لاتنسون المشاركة لإفادة الغير وشكراً💜
في نهاية الثريد، لاتنسون المشاركة لإفادة الغير وشكراً💜
جاري تحميل الاقتراحات...