كيفية إنشاء شبكة في فيجما: دليل خطوة بخطوة

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

الخطوة 1. إنشاء مستند جديد

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

الخطوة 2. تكوين إعدادات الشبكة

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

الخطوة 3. قم بتمييز التخطيط باستخدام شبكة

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

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

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

كيفية إنشاء شبكة في فيجما

دعونا نلقي نظرة على الخطوات المطلوبة لإنشاء شبكة في فيجما:

الخطوة 1: تسجيل الدخول إلى فيجما وفتح المشروع الخاص بك أو إنشاء واحدة جديدة.

الخطوة 2: انقر فوق الزر" مستطيل "في شريط الأدوات على اليسار أو استخدم مفتاح الاختصار" ص " لإنشاء مستطيل.

الخطوة 3: ارسم مستطيلا من أي حجم على اللوحة القماشية.

الخطوة 4: حدد المستطيل الذي تم إنشاؤه وأدخل القيم المطلوبة للعرض والارتفاع في لوحة الخصائص على اليمين. على سبيل المثال ، 1200 بكسل في 800 بكسل.

الخطوة 5: انقر على زر " الشبكة "في شريط الأدوات العلوي أو استخدام" السيطرة+ز " هوتكي لفتح إعدادات الشبكة.

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

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

هذا كل شيء! الآن لديك شبكة من شأنها أن تساعدك على إنشاء تصميم متناغم ومتوازن في فيجما.

اختيار شبكة مناسبة

1. نوع الشبكة: هناك عدة أنواع من الشبكات ، مثل شبكة عمودية ومرنة وثابتة الصف وغيرها. يعتمد اختيار نوع معين على تفاصيل المشروع والهيكل المطلوب.

2. عدد الأعمدة: يتيح لك تحديد عدد الأعمدة توزيع المحتوى بالتساوي وإنشاء توازن بين عناصر التصميم.

3. أحجام الأعمدة والصفوف: سيساعد التعريف الصحيح لعرض وارتفاع الأعمدة والصفوف على إنشاء تركيبة متناغمة ومتوازنة.

4. الهوامش والهوامش: سيساعد استخدام الهوامش والهوامش على تنظيم المحتوى على الصفحة بشكل أفضل وإنشاء فجوات مرئية بين العناصر.

5. تحديد خط الأساس: يضمن تحديد خط الأساس التوحيد في وضع النص والعناصر الأخرى على الصفحة.

للراحة ، يمكنك استخدام إنشاء شبكات من خلال إعدادات فيغما القياسية أو استخدام الإضافات والإضافات التي توفر أدوات ووظائف إضافية.

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

افتتاح فيجما وإنشاء مشروع جديد

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

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

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

4. في النافذة التي تفتح ، حدد نوع المشروع الذي تريد إنشاؤه. في هذه الحالة ، حدد "مشروع فارغ" ، حيث سنقوم بإنشاء شبكة من البداية.

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

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

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

إضافة إطارات وتخطيطات

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

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

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

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

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

إعداد الشبكة

لإنشاء شبكة في فيجما ، اتبع الخطوات التالية:

1. افتح المشروع في فيجما وحدد التخطيط المطلوب.

2. انقر فوق الزر" شبكة التخطيط " في الزاوية اليمنى السفلية من مساحة العمل.

3. في النافذة التي تفتح ، قم بتكوين إعدادات الشبكة:

4. انقر فوق الزر" إنشاء " لإنشاء شبكة مع المعلمات المحددة.

5. سحب العناصر من المكتبة على الشبكة ومواءمتها باستخدام المفاجئة إلى الشبكة.

الآن قمت بإعداد الشبكة في فيجما ويمكن وضع مريح العناصر في التخطيط باستخدام خطوط الشبكة.

وضع العناصر على الشبكة

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

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

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

• السيطرة + - المحاذاة الأفقية
• التحول + - المحاذاة العمودية
• البديل + - مركز المحاذاة
• السيطرة + التحول — - التوزيع الأفقي للعناصر مع وجود فجوة متساوية بينهما
• التحول + البديل — - التوزيع الرأسي للعناصر مع وجود فجوة متساوية بينهما

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

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

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

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

العمل مع القدرة على التكيف

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

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

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

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

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

إضافة تأثيرات بصرية

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

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

التصدير والاستخدام

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

1. تصدير في بابوا نيو غينيا أو شكل سفغ: لتصدير شبكة إلى فيجما ، حدد جميع عناصرها واضغط على الأمر + شيفت + إي (ماك) أو كترل+ شيفت + إي (ويندوز). ثم حدد التنسيق (ينغ أو سفغ) والدليل لحفظ الملف.

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

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

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