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