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