كيفية جعل زر قابل للنقر في فيجما: دليل مفصل

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

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

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

من المهم ملاحظة أنه عند وضع نماذج أولية لزر في فيجما ، يمكنك أيضا تحديد الرسوم المتحركة الانتقالية والخصائص الأخرى للعنصر.

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

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

1. فيجما: إنشاء زر
2. تخصيص مظهر الزر
3. العمل مع نص الزر
4. إضافة تفاعل
5. وضع الزر على الشاشة المطلوبة
6. ضبط قابلية النقر على الزر

فيجما: إنشاء زر

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

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

تكوين مظهر الزر

بعد إنشاء زر في فيجما ، يمكنك تخصيص مظهره لتتناسب مع التصميم والأسلوب الخاص بك. وهنا عدد قليل من الطرق للقيام بذلك:

من خلال تخصيص مظهر الزر في فيجما ، يمكنك تحقيق المظهر والأسلوب المطلوبين للزر بحيث يجذب الانتباه ويؤدي وظيفته في التصميم الخاص بك.

العمل مع نص الزر

عند إنشاء زر قابل للنقر في فيجما ، من المهم جدا الانتباه إلى النص الذي سيتم عرضه على الزر. بعد كل شيء ، هو النص الذي يجعل الزر بالمعلومات ومفهومة للمستخدم.

هناك عدة طرق لتخصيص النص على الزر في فيجما:

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

تسمح لك كل هذه الإعدادات بإنشاء زر بنص جذاب ومفهوم يساعد المستخدم على فهم الوظيفة التي يؤديها هذا الزر.

إضافة تفاعل

لجعل زر قابل للنقر في فيجما ، تحتاج إلى إضافة التفاعل إليها. سيسمح لك ذلك بتعيين إجراءات معينة عند النقر فوق الزر.

1. حدد الزر الذي تريد جعله قابلا للنقر.

2. في لوحة التفاعل على يمين الشاشة ، حدد"عند النقر".

3. في القائمة المنسدلة ، حدد الإجراء الذي يجب أن يحدث عند النقر فوق الزر. على سبيل المثال ، يمكنك تحديد إجراء "الانتقال إلى الإطار" وتحديد إطار معين للانتقال إليه.

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

5. كرر هذه الخطوات لجميع الأزرار التي تريد جعلها قابلة للنقر.

الآن بعد أن تفاعلت الأزرار الخاصة بك ، يمكنك اختبار وظائفها من خلال النقر عليها في وضع النماذج الأولية. سيسمح لك ذلك بالتأكد من أن الأزرار تعمل بشكل صحيح وتنفيذ الإجراءات التي قمت بتعيينها عند النقر عليها.

ملاحظة: عند تصدير النموذج الأولي إلى تنسيق هتمل ، سيتم حفظ إضافة تفاعل الزر ، وسيكون المستخدمون قادرين على النقر عليها ورؤية الإجراءات المقابلة.

وضع الزر على الشاشة المطلوبة

من أجل وضع الزر على الشاشة المطلوبة في فيجما:

1. حدد الشاشة المطلوبة التي تريد إضافة الزر إليها. للقيام بذلك ، حدد الشاشة المطلوبة في لوحة الطبقات على اليسار بالنقر فوق اسمها.
2. في نافذة فيجما الرئيسية ، حدد أداة المستطيل أو اضغط على مفتاح ص.
3. اسحب المستطيل في المكان المناسب على الشاشة باستخدام أداة المستطيل.
4. قم بتغيير حجم المستطيل وفقا لمتطلبات التصميم الخاص بك والنص الموجود على الزر.
5. ثم ، عن طريق تحديد أداة النص أو الضغط على مفتاح تي ، إضافة نص إلى الزر الخاص بك.
6. اضبط الحجم واللون والخط والمعلمات الأخرى لنص الزر في لوحة الخصائص على اليمين.
7. أضف التأثيرات والأنماط الضرورية إلى الزر باستخدام لوحة الخصائص.
8. انقل الزر إلى الموقع المطلوب على الشاشة عن طريق سحبه باستخدام أداة التحديد أو الضغط على مفتاح الخامس.

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

ضبط قابلية النقر على الزر

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

1. حدد الزر الذي تريد جعله قابلا للنقر.

2. في لوحة الخصائص على يمين الشاشة ، ابحث عن قسم" إعدادات الانتقال".

3. في قسم "النقر فوق الانتقال " ، حدد خيار" انتقال الارتباط التشعبي".

4. في حقل" الارتباط " ، حدد عنوان ورل الذي يجب أن يؤدي إليه الزر.

5. بالإضافة إلى ذلك ، يمكنك تخصيص الرسوم المتحركة عند الضغط على الزر عن طريق تحديد الخيار المناسب في قسم الرسوم المتحركة.

6. بعد الانتهاء من الإعدادات ، سيصبح الزر قابلا للنقر في تخطيط فيجما الخاص بك.