طريقة تصميم تطبيقك الأول على Figma

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

التطبيق الذي سنقوم بالشرح عنه هو تطبيق لتوصيل طلبات (طعام أو بقالة أو خضار أو أي طلبية). وللبدء بهذا المشروع عليك التفكير أولا ما الذي سيحتاجه المستخدم ليسهل العمل عليه من أزرار أو طرق طلب أو طرق التواصل. وهذا هو مهمة مصممي الUX. أما مصممي الUI فستكون مهمتهم هي استلام المشروع بشكل التخطيط الشبكي أو ما يسمى الWireframe من الUX والبدء بالإبداع وإعطاء الشكل النهائي للتطبيق.

تصميم التخطيط الشبكي Wireframe لمشروع توصيل الطلبات

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

إنشاء الإطار Frame

سنقوم بإنشاء الإطار الذي يناسب حجم الموبايل الذي سنعمل له التصميم. اختر من الزر frame ومن الخيارات الموجودة في الجهة اليمنى ما تريد من أنواع الأجهزة. اخترت هنا في الصورة التالية iphone 11 pro Max وسيتم رسمه تلقائياً بمجرد النقر عليه.

لتسهيل العمل عليك قم بإحضار الأيقونات والصور التي يمكن أن تحتاجها في التصميم وضعها في الشاشة أمامك في فيغما لكن خارج إطار الframe. يمكنك الحصول على الأيقونات من الإضافة Iconify والصور من الإضافة Unsplash.

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

تصميم صفحة المطاعم

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

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

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

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

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

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

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

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

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

ثم وضعت صوراً للمشتريات التي يفترض أن يكون قد أضافها المستخدم إلى سلته وبجانب كل صنف يوجد كميته.

الانتقال بين الصفحات الPrototype

للانتقال من صفحة المطاعم إلى صفحة المشتريات نحتاج إلى القسم Prototype. انقر عليه ثم انقر على أيقونة سلة المشتريات الموجودة في صفحة المطاعم ليظهر أمامك كما في الصورة التالية:

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

كما تشاهد في نافذة Interaction details أول خيار يظهر أمامك هو on Tap ويعني أن الحركة ستظهر عند النقر بالفأرة. أما الخيارات الأخرى فيمكنك مشاهدتها بالنقر على السهم بجانبها في الدائرة الحمراء، ويمكنك تجربة جميع الخيارات ومشاهدة الفرق عند تشغيل المشروع.

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

يمكن من خلال القسم Prototype تحريك التطبيق بالكامل ليصل تقريباً لدرجة كأنه مشغول بلغة برمجة. وذلك بسبب الميزات والحركات الكثيرة التي يقدمها هذا القسم في فيغما.

الكاتب : ريم ناظم مشقوق