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