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