التمهيد هي واحدة من الأطر الأكثر شعبية لتطوير تطبيقات الويب. يوفر مجموعة متنوعة من الأدوات التي تجعل من السهل والسريع إنشاء مواقع ويب سريعة الاستجابة. ومع ذلك ، حتى وقت قريب ، كان استخدام التمهيد في بيئة فيجما صعبا ، حيث لم يكن هناك حل مناسب لاستخدام شبكة التمهيد في مشاريع فيجما. ولكن الآن هناك حل كبير - شبكة التمهيد لفيغما.
الشبكة التمهيد لفيغما يوفر القدرة على بسرعة وسهولة إنشاء تخطيطات باستخدام شبكة التمهيد. يتضمن جميع العناصر الأساسية لإطار التمهيد ، مثل الحاويات والصفوف والأعمدة ، بالإضافة إلى فئات لمحاذاة العناصر وترتيبها. الآن أصبح أكثر ملاءمة للمطورين للعمل على المشاريع في فيغما ، لأنها يمكن أن تخلق على الفور تخطيطات التي تلبي معايير بوتستراب.
كما توفر شبكة بوتستراب لفيغما قوالب جاهزة لأنواع مختلفة من التخطيطات ، على سبيل المثال ، لإنشاء مواقع الويب والصفحات المقصودة والمتاجر عبر الإنترنت وغير ذلك الكثير. تتضمن هذه القوالب جميع العناصر والفئات الضرورية التي تسمح لك بإنشاء بنية تخطيط بسرعة وسهولة وفقا لمتطلبات التمهيد. وبالتالي ، فإن شبكة التمهيد لفيغما تسرع بشكل كبير عملية التطوير ، مما يسمح لك بالتركيز على جوانب أخرى من المشروع.
- ما هي شبكة التمهيد?
- مزايا استخدام شبكة التمهيد في فيجما
- تعليمات لاستخدام شبكة التمهيد في فيجما
- الخطوة 1: تثبيت شبكة التمهيد في فيجما
- الخطوة 2: إنشاء تخطيط باستخدام شبكة التمهيد
ما هي شبكة التمهيد?
تتكون الشبكة من 12 عمودا يمكن وضعها أفقيا على الصفحة. يتيح لك ذلك تقسيم المحتوى إلى عدة أعمدة وتغيير عرضها اعتمادا على دقة الشاشة.
باستخدام شبكة بوتستراب ، يمكن للمطورين بسهولة إنشاء صفحات ويب مرنة وسريعة الاستجابة دون الحاجة إلى تحديد استعلامات الوسائط أو كتابة رمز كس إضافي. تتكيف الشبكة تلقائيا مع الأجهزة المختلفة (الهواتف المحمولة والأجهزة اللوحية وأجهزة الكمبيوتر المكتبية) وتوفر التنقل المريح في الموقع للمستخدمين.
كما يوفر التمهيد الشبكة القدرة على إنشاء تخطيطات معقدة باستخدام مجموعة من الأعمدة والصفوف ، فضلا عن إضافة فئات مختلفة للمحاذاة ، المسافة البادئة والعرض على أجهزة مختلفة.
بشكل عام ، شبكة التمهيد هو أداة قوية لتطوير صفحات الويب استجابة ، مما يبسط إلى حد كبير عملية إنشاء تصميم حديث وعملي.
مزايا استخدام شبكة التمهيد في فيجما
1. دعم التصميم التكيفي التلقائي: توفر شبكة التمهيد نظاما من الأعمدة والحاويات التي تتكيف بسهولة مع الشاشات والأجهزة المختلفة. يتيح ذلك للمصممين إنشاء تخطيطات يتم عرضها بشكل صحيح على أجهزة مختلفة ، دون الحاجة إلى إعادة بناء كل عنصر يدويا.
2. عملية مريحة وتوفير الوقت: توفر شبكة التمهيد في فيجما قوالب ومكونات جاهزة يمكن استخدامها لإنشاء تصميم بسرعة. بدلا من إنشاء كل عنصر من البداية ، يمكن للمصمم استخدام الكتل والأنماط الجاهزة ، مما يسرع عملية العمل بشكل كبير.
3. الاتساق والتوحيد: توفر الشبكة التمهيد تصميم ثابت وأسلوب في جميع أنحاء المشروع. يتيح لك ذلك إنشاء مظهر متسق واحترافي لصفحات الويب ، وهو أمر مهم بشكل خاص للمشاريع الكبيرة والفرق ذات المصممين المتعددين.
4. سهولة التعاون والتواصل: باستخدام شبكة التمهيد في فيجما يبسط عملية التعاون والتواصل بين المصممين والمطورين والعملاء. يمكن لجميع المشاركين في المشروع استخدام لغة واحدة وفهم العناصر والأنماط التي يجب استخدامها لتحقيق النتيجة المرجوة.
5. المرونة والتخصيص: شبكة التمهيد في فيغما يسمح لك لتكوين معلمات الشبكة المختلفة ، مثل عدد الأعمدة ، وعرض الحاويات والفجوات بين العناصر. يتيح لك ذلك تكييف الشبكة مع المتطلبات المحددة للمشروع وإنشاء تصميمات فريدة.
إن استخدام شبكة التمهيد في فيجما يجعل الحياة أسهل للمصممين ، مما يسمح لهم بإنشاء تصميمات سريعة الاستجابة وعالية الجودة بسرعة وكفاءة.
تعليمات لاستخدام شبكة التمهيد في فيجما
لبدء العمل مع شبكة التمهيد في فيجما ، تحتاج إلى استيراد المكون المناسب. للقيام بذلك ، حدد لوحة "المكونات" على الجانب الأيمن من الشاشة وابحث عن الكلمة الرئيسية "شبكة التمهيد". ونتيجة لذلك ، سوف تظهر مكون الشبكة ، والتي يمكنك سحب على قماش فيغما الخاص بك.
بعد الاستيراد ، سيتم تقديم الشبكة كجدول. تتوافق كل خلية في الجدول مع كتلة منفصلة في شبكة التمهيد. يمكنك تعيين أحجام الكتل وتحديد عدد الأعمدة وتطبيق إعدادات أخرى لتكييف الشبكة مع احتياجاتك.
لراحة العمل مع شبكة التمهيد ، يمكنك استخدام الإطارات في فيجما. تسمح لك الإطارات بتجميع العناصر ذات الصلة وإدارتها ككل. قم بإنشاء إطار ووضع عناصر الشبكة فيه ، ثم الصق هذا الإطار في إطارات أو صفحات أخرى من مشروعك.
لإضافة محتوى إلى كتل الشبكة ، يمكنك استخدام مكونات التمهيد الإضافية مثل الأزرار والنماذج وأشرطة التنقل وما إلى ذلك. يمكنك العثور على هذه المكونات واستيرادها إلى فيجما بنفس الطريقة التي يمكنك بها الشبكة. وسوف تساعدك على إنشاء تصميم موحد ومتسق للمشروع الخاص بك.
باستخدام شبكة التمهيد في فيجما يبسط ويسرع عملية تصميم والنماذج واجهة الويب الخاص بك. مع هذا الدليل ، يمكنك أن تتعلم بسرعة أساسيات العمل مع شبكة التمهيد في فيغما وتطبيقها على المشاريع الخاصة بك.
| كتل شبكة التمهيد | عدد الأعمدة | عرض الكتلة |
|---|---|---|
| صغير جدا (شس) | ≥0 | 0% |
| صغيرة (سم) | ≥576 بكسل | 16% |
| متوسط (دكتوراه في الطب) | ≥768 بكسل | 25% |
| كبير (إل جي) | ≥992 بكسل | 33.33% |
| كبير جدا (زل) | ≥1200 بكسل | 41.67% |
الخطوة 1: تثبيت شبكة التمهيد في فيجما
لتثبيت شبكة التمهيد في فيجما ، سوف تحتاج إلى اتباع بعض الخطوات البسيطة:
- افتح تطبيق فيجما على جهاز الكمبيوتر الخاص بك.
- إنشاء مشروع جديد أو فتح مشروع موجود الذي تريد استخدام الشبكة التمهيد.
- انقر على زر" الإضافات " على شريط أدوات فيغما.
- في النافذة التي تفتح ، حدد"إدارة المكونات الإضافية".
- في مربع البحث ، اكتب " شبكة التمهيد "واضغط على"أدخل".
- ابحث عن المكون الإضافي" شبكة التمهيد "وانقر على زر" تثبيت".
- بعد تثبيت المكون الإضافي ، سيكون متاحا في قسم "المكونات الإضافية" في شريط الأدوات.
الآن قمت بتثبيت بنجاح الشبكة التمهيد في فيجما ونحن على استعداد لبدء استخدامه لإنشاء التصميم الخاص بك!
الخطوة 2: إنشاء تخطيط باستخدام شبكة التمهيد
وبمجرد الانتهاء من يتقن أساسيات الشبكة التمهيد ، كنت على استعداد للبدء في إنشاء تخطيط استخدامه. في هذه الخطوة ، سننظر في كيفية تطبيق شبكة التمهيد لإنشاء بنية التخطيط الخاص بك.
1. في فيجما ، قم بإنشاء مستند جديد وحدد أداة المستطيل على شريط الأدوات.
2. قم بإنشاء حاوية لصفحتك عن طريق تعيين عرضها وارتفاعها باستخدام فئات التمهيد. على سبيل المثال ، يمكنك استخدام فئة "الحاوية" لإنشاء حاوية ذات عرض ثابت ، أو فئة "سائل الحاوية" لحاوية ذات عرض كامل تملأ المنطقة المتاحة بالكامل.
3. داخل الحاوية ، قم بإنشاء صفوف باستخدام فئة" الصف". يتم استخدام السلسلة لإنشاء صف أفقي من الكتل داخل الحاوية.
4. قم بإنشاء أعمدة في كل صف باستخدام فئة "العقيد" ، وتعيين أحجامها باستخدام فئات رقمية (من 1 إلى 12). على سبيل المثال ، ستقوم فئة" كول-6 "بتعيين العمود إلى نصف العرض المتاح ، وفئة" كول-3 " إلى ربع العرض.
5. املأ الأعمدة التي تم إنشاؤها بالمحتوى عن طريق إضافة الكتل والنصوص والصور وعناصر التصميم الأخرى.
6. كرر الخطوات من 3 إلى 5 لإنشاء صفوف وأعمدة أخرى لجعل التخطيط الخاص بك كاملا وسريع الاستجابة.
7. لا تنس استخدام فئات التمهيد لإضافة أنماط ومكونات مختلفة مثل الأزرار وأشرطة التنقل والنماذج.
مثال:
هنا هو رمز سبيل المثال لإنشاء تخطيط بسيط باستخدام شبكة التمهيد:
الجزء الأيمن من التخطيط