كيفية استخدام برنامج Framer: دليل المبتدئين في عام 2025

هل ترغب في إنشاء مواقع ويب أو تطبيقات رائعة ولكنك لا تعرف من أين تبدأ؟

الأمر صعب، أليس كذلك؟

تبدو جميع أدوات التصميم هذه مربكة للغاية.

هل تعلم؟ برنامج Framer ليس بالضرورة أن يكون صعباً.

سيوضح لك هذا الدليل كيفية استخدام برنامج Framer لإنشاء أشياء رائعة، حتى لو كنت مبتدئًا تمامًا.

سنقوم بشرحها خطوة بخطوة، حتى تتمكن من البدء في تصميم مواقع الويب والتطبيقات الخاصة بك في وقت قصير.

مؤطر

انضم إلى آلاف مواقع البناء المذهلة. سرعة برنامج Framer؟ أفاد المستخدمون بتسريع سير العمل في التصميم بنسبة تصل إلى 50%. ابدأ تجربتك المجانية الآن!

جرّب برنامج Framer مجاناً اقرأ المراجعة الكاملة

إعداد برنامج Framer

أولاً وقبل كل شيء، عليك الحصول على برنامج Framer. الأمر أشبه بالتسجيل في أي موقع ويب آخر.

إنشاء حساب:

انتقل إلى موقع Framer الإلكتروني. ستجد زرًا مكتوبًا عليه "التسجيل" أو "ابدأ". انقر عليه.

ستحتاج إلى إدخال بريدك الإلكتروني وإنشاء كلمة مرور. الأمر سهل للغاية، أليس كذلك؟ في بعض الأحيان، يمكنك حتى التسجيل باستخدام حسابك على جوجل.

بعد التسجيل، قد تتلقى رسالة بريد إلكتروني لتأكيد حسابك. ما عليك سوى النقر على الرابط الموجود في الرسالة.

فهم بيئة العمل:

حسنًا، لقد دخلت الآن! قد تبدو الشاشة مزدحمة بعض الشيء في البداية، لكن لا تقلق.

المساحة المفتوحة الكبيرة في المنتصف هي المكان الذي ستصمم فيه تصاميمك. إنها بمثابة لوحتك.

ستجد على الجانبين أدوات ولوحات. تساعدك هذه الأدوات على القيام بأشياء مثل إضافة الأشكال وتغيير الألوان ونقل العناصر.

إنشاء مشروع جديد:

لبدء إنشاء شيء ما، أنت بحاجة إلى مشروع جديد. ابحث عن زر مكتوب عليه "مشروع جديد" أو ما شابه. انقر عليه.

يمكنك البدء بمشروع فارغ، أي صفحة بيضاء. أو يمكنك اختيار قالب. القوالب عبارة عن تصاميم جاهزة يمكنك تعديلها.

إذا اخترت مشروعًا فارغًا، يمكنك تصميم مشروعك الخاص من الصفر. أما إذا اخترت قالبًا جاهزًا، فسيوفر عليك ذلك الوقت.

أدوات التصميم الأساسية

والآن، لننتقل إلى الجزء الممتع: صنع الأشياء! يحتوي برنامج Framer على مجموعة من الأدوات لمساعدتك في التصميم.

إضافة الأشكال والنصوص:

هل تريد رسم مربع أو دائرةابحث عن أدوات الشكل. انقر على الشكل الذي تريده، ثم انقر واسحب على لوحة الرسم لرسمه.

لإضافة كلمات، انقر فوق نص ثم انقر في المكان الذي تريد أن تظهر فيه الكلمات وابدأ الكتابة.

يمكنك تغيير لون الأشكال والنصوص. ابحث فقط عن أداة اختيار الألوان. كما يمكنك تكبير أو تصغير العناصر بسحب الزوايا.

العمل مع الصور:

هل لديك صورة تريد استخدامها؟ انقر على أداة الصورة. ثم يمكنك اختيار صورة من جهاز الكمبيوتر الخاص بك.

بمجرد وضع الصورة في برنامج Framer، يمكنك تحريكها وتكبيرها أو تصغيرها. كما يمكنك قصها لتناسب المساحة المطلوبة تمامًا.

استخدام الطبقات:

الطبقات تشبه أوراقًا شفافة مكدسة فوق بعضها البعض. إنها تساعدك في الحفاظ على تنظيم الأشياء.

عند إضافة شكل أو صورة، يتم وضعها في طبقة منفصلة. يمكنك تحريك الطبقات لأعلى أو لأسفل لتغيير ما يظهر في الأعلى.

هذا مهم لأنه إذا كنت تريد صورة خلف شكل ما، فيجب أن تكون طبقة الصورة أدنى من طبقة الشكل.

تحريك الأشياء: الرسوم المتحركة

دعونا نجعل تصاميمنا تنبض بالحياة! الرسوم المتحركة هي ما يجعل الأشياء تتحرك وتتغير.

رسوم متحركة بسيطة:

يمكنك جعل العناصر تظهر تدريجياً، أو تنزلق عبر الشاشة، أو تغير حجمها. إنه أشبه بالسحر!

ابحث عن إعدادات الرسوم المتحركة. ستجد خيارات مثل "التلاشي" و"الانزلاق" و"التكبير/التصغير".

يمكنك أيضاً ضبط التوقيت. هذا يحدد لبرنامج Framer مدى سرعة أو بطء الحركة.

الانتقالات:

الانتقالات هي ما يحدث عند الانتقال من شاشة إلى أخرى. تخيل الأمر كأنك تقلب صفحات كتاب.

يمكنك جعل الشاشات تنزلق أو تتلاشى أو تكبر.

الانتقالات السلسة تجعل موقعك الإلكتروني أو تطبيقك يبدو احترافياً للغاية.

التفاعلات:

التفاعلات هي الأشياء التي تحدث عندما ينقر شخص ما على شيء ما أو يضغط عليه.

على سبيل المثال، يمكنك جعل الزر يغير لونه عند تحريك مؤشر الماوس فوقه.

أو يمكنك تكبير الصورة عند النقر عليها.

هذه الأشياء تجعل تصميماتك تفاعلية وممتعة للاستخدام.

إنشاء موقع ويب بسيط

حسنًا، لنقم بتجميع كل شيء معًا ونبني موقعًا إلكترونيًا بسيطًا. الأمر أسهل مما تتخيل!

تخطيط موقعك الإلكتروني:

أولاً، فكر فيما تريد أن يفعله موقعك الإلكتروني. هل تحتاج إلى صفحة رئيسية، أو صفحة "نبذة عنا"، أو صفحة "اتصل بنا"؟

اكتب ما تريده في كل صفحة. هذا يساعدك على معرفة ما يجب بناؤه.

إنشاء الصفحة الرئيسية:

ابدأ بمشروع فارغ أو استخدم قالبًا.

أضف عنوانًا في الأعلى باسم موقعك الإلكتروني.

ضع بعض المحتوى في المنتصف، مثل النصوص والصور.

أضف تذييلًا في الأسفل يتضمن معلومات الاتصال أو الروابط.

استخدم الأدوات التي تعلمتها لجعلها تبدو جيدة.

إضافة المزيد من الصفحات:

لإنشاء صفحة أخرى، انقر فوق زر "صفحة جديدة".

صمم كل صفحة كما صممت الصفحة الرئيسية.

قم بربط الصفحات معًا باستخدام أزرار أو روابط في رأس الصفحة.

المعاينة والنشر:

انقر على زر "معاينة" لمعرفة كيف سيبدو موقعك الإلكتروني.

إذا أعجبك، فانقر على زر "نشر" لوضعه على الإنترنت.

سيمنحك برنامج Framer رابطًا لموقعك الإلكتروني. الآن، يمكن لأي شخص رؤيته!

بدائل لبرنامج Framer

إليكم بعض المواقع الإلكترونية الأخرى بناؤون قد ترغب في الاطلاع على:

• جاما: يركز على إنشاء عروض تقديمية ووثائق تبدو وكأنها مواقع ويب.
• متين: يستخدم الذكاء الاصطناعي لإنشاء موقع ويب لشركتك بسرعة في دقائق.
• الجوز: يساعدك على بناء مواقع الويب باستخدام الذكاء الاصطناعي، مع التركيز على إنشاء المحتوى.
• تصميم الكود: أداة أخرى مدعومة بالذكاء الاصطناعي لإنشاء مواقع الويب، مع التركيز على التصميم.
• سايتر: يتيح لك إنشاء مواقع ويب مع التركيز على التصميم المرئي والرسوم المتحركة.
• 10Web: منصة مدعومة بالذكاء الاصطناعي لإنشاء واستضافة مواقع ووردبريس.
• باني الأناناس: يوفر أداة بناء تعتمد على الكتل لإنشاء مواقع الويب بسهولة.
• دوريك: يوفر واجهة بسيطة تعتمد على السحب والإفلات لإنشاء مواقع الويب، وخاصةً لبرامج SaaS والشركات الناشئة.
• تايبدريم: يتيح لك إنشاء مواقع ويب تشبه كتابة المستندات، الأمر بسيط للغاية.
• جيمدو: أداة سهلة الاستخدام لإنشاء مواقع الويب، مع التركيز على البساطة وسهولة الاستخدام.
• فيتامين ب12: يقدم خدمة بناء مواقع إلكترونية مدعومة بالذكاء الاصطناعي مع خيارات للخدمات الاحترافية.
• فطيرة آبي: تشتهر بـ منشئ التطبيقاتولكنه يوفر أيضًا أداة لإنشاء المواقع الإلكترونية.

خاتمة

إذن، لقد تعلمت الكثير! أنت الآن تعرف أساسيات كيفية استخدام برنامج Framer.

لقد غطينا كيفية إنشاء حسابك، واستخدام أدوات التصميم، وتحريك الأشياء باستخدام الرسوم المتحركة، وحتى بناء موقع ويب بسيط.

لقد رأيت كيفية إضافة الأشكال والنصوص والصور.

لقد اكتشفتَ كيفية استخدام الطبقات والمكونات للحفاظ على التنظيم. وتعلمتَ كيفية جعل العناصر تنزلق وتتلاشى وتتفاعل عند النقر عليها.

ماذا بعد؟ استمر في تجربة برنامج Framer!

جرب أدوات مختلفة وشاهد ما يمكنك ابتكاره.

يوجد الكثير من الفيديوهات والدروس التعليمية على الإنترنت إذا كنت ترغب في معرفة المزيد.

استمر في التدريب، وستتمكن من تصميم تصاميم رائعة في وقت قصير.

الأسئلة الشائعة