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