مدونة مجنون كمبيوتر
مدونة مجنون كمبيوتر تقدم شروحات تقنية ومقالات متخصصة

دليلك الشامل: شرح برنامج Figma – برنامج التصميم الثوري

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

نقدّم لكَ هذا الدليل الشامل، إذ سنتعرّف سويًّا على مختلف قدرات البرنامج وإمكانيّاته. ستكونُ قادرًا في نهاية هذا المقال على بدء أوّل مشروع لك بواسطة Figma. نضمن لك أن الأمر ليسَ بذلك التعقيد، هيا بنا لنبدأ!

ما هو Figma بالضبط؟

هو برنامَج تصميم رُسوم بتقنية الـVector وواجهات المستخدم مبني على الويب، ومتاح على نظامَي ماك أو إس وويندوز إلّا أنّهُ يمكنك تشغيل التطبيق عبر أي مستعرض على أيّ نظام. يُستخدم Figma من طرف مصمّمين ومطوّرين الويب في مجال تصميم واجهات المستخدم بالتحديد، لكن يمكن استخدامه أيضًا في مهام مختلفة مثل تصميم منشورات منصات التواصل الاجتماعي، بشكل مشابه لبرنامج إليستريتر Illustrator.

طوِّر برنامَج Figma في عام 2015، وأتيح لعدد محدود من المستخدمين المدعوّين إلى أنّ تم إطلاقه للعامّة في عام 2016. قد تعتقد أن البرنامَج يفتقر لبعض المزايا نظرًا لكونه حديث العهد نسبيًّا وهنا تكون مخطئًا للغاية، إذ إنّ Figma مليء بالمزايا الهامة والثانوية على حدٍّ سواء، ويعدّ حاليًّا المنافس الرئيس لبرنامج Adobe XD.

كيف أبدأ باستخدام برنامج  Figma؟

برنامج فيجما Figma

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

إنشاء مشروعك الأوّل

بعدَ تهيئة الحساب ستنتقل إلى صفحة تشابه الصورة أدناه إلى حدٍّ ما، نلاحظ أوّلًا زر New Design File الذي سينقلنا لفتح مشروع Figma جديد، وعلى يمينه New FigJam File وهي أداة توفرها لك Figma لاستلهام الأفكار والعصف الذهني إذ تسمح لك برسم وتبادل الأفكار مع أعضاء فريقك بشكل آني، لن نطيل الشرح حولها لأنّها ليست بتركيزنا هنا. الأيقونة الثالثة أخيرًا تسمح لك باستيراد المشاريع الموجودة على حاسبك الشخصي إلى المستعرض وتعديلها.

Figma Home Screen

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

أضِف إلى ذلك القسم اليساري الذي يستعرض الطبقات Layers بشكل مشابه لبرامج Adobe بالإضافة إلى الأصول Assets وهي الملفات التي استخدمتها في مشاريعك، كما تستطيع اكتشاف وإضافة ملفات أخرى من مكاتب عامّة موجودة. أخيرًا وليس آخرًا، مساحة التصميم Canvas التي ستكون تركيزك الأساسي خلال عملية التصميم.

Figma Editor Interface

إضافة إطار Frame

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

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

Figma Create New Frame
كيفية إنشاء إطار جديد

ستلاحظ عندَ إنشائك لإطار جديد إضافة عنصر لقائمة الطبقات Layers على الجانب الأيسر من الشاشة، إذ تعمل الإطارات ككُتل في مشروعك تضمّ جميع المكونات الموجودة ضمنها. يجدر الذكر هنا أنّ Figma يوفّر لك إمكانيّة ضم إطار ضمن إطار أو كما يدعى بالإطارات المتشابكة Nested Frames في حال كانَ المشروع ضخمًا واحتوى على العديد من الإطارات المرتبطة ببعضها.

تقسيم الإطار إلى شبكة Grid

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

يمكنكَ تقسيم الإطار عن طريق تحديده من قسم الطبقات Layers والذهاب إلى قسم وحدة المراقبة، قسم التصميم واختيار تنسيق الشبكة Layout Grid في قسم التصميم Design وتخصيص الشبكة على حسب رغبتك.

FigmaGrid شبكة
طريقة تقسيم الإطار إلى شبكة Grid

مشاركة المشروع والعمل بشكل تعاوني

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

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

FigmaShare مشاركة مشروع فيجما
مشاركة المشروع مع الأطراف المهتمة

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

نقل المشروع من مسودة إلى أعضاء الفريق

إضافة تعليقات/ملاحظات Comments

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

إضافة الملاحظات والتعليقات

دع تصميمك ينبض بالحياة، وأنشئ نموذجًا أوّليًّا

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

تستطيع ضبط الانتقالات بين الإطارات Frames عن طريق تحديد العنصر والفعل، على سبيل المثال إن كان لدينا إطار للشاشة الرئيسة لموقع ما يحتوي على زرّ “تعرف علينا أكثر” ينقلنا إلى إطار شاشة تفاصيل عن الموقع. ففي هذه الحالة، العنصر هو الزرّ والفعل هوَ النقر عليه. بإمكانك أيضًا تخصيص الانتقال وإضافة بعض التأثيرات.

إضافة انتقال لعنصر

تستطيع استعراض النسخة الحيّة أو النموذج الأوّلي بالنقر على زرّ التشغيل في الشريط العلوي (بشكل المثلث)، سينقلك ذلك إلى تبويبة جديدة. قد تستغرق العملية بعض الوقت بحسب سرعة اتّصالك، لذا كُن صبورًا!

تجربة النموذج الأولي أو التفاعلي

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

التفاصيل الصغيرة التي تجعل من برنامج Figma أداةً محبوبة

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

على سبيل المثال، يتيح لك هذا البرنامج العظيم استخدام الإضافات Plugins في عملك لتسهيل عمليّة ما، أبرز هذه الإضافات هيَ إضافة Batch Slayer التي تسمح لك بتغيير عدّة ألوان وأنواع خطوط دفعة واحدةً لعدّة مكوّنات، أو إضافة Chart التي توفّر لك عشرات المخططات البيانيّة مع إمكانية التعديل عليها بسهولة، وتتوافر مئات الإضافات المجانية الأخرى. يمكنكَ أيضًا برمجة إضافاتك الخاصة واستخدامها حَسبَ الحاجة، وتخصيصها لاستخدام فريقك فقط أو شركتك بشكل خاصّ (إلا أن ذلك يتطلب الاشتراك المدفوع).

أضف إلى ذلك إمكانيّة استخدام العقدة الواحدة في التصميم بتقنية الفيكتور Vector لربط عدّة خطوط بدلًا من اثنان فقط في برامج الرسم الغرافيكي الاعتياديّة، وتسمّي Figma هذه الميّزة بـ Vector Network. إذ إنّ برنامج Figma يعدّ خيارًا ممتازًا للتصميم الغرافيكي بتقنيّة الفيكتور كما ذكرنا سابقًا واستخدامه غير محصور في تصميم واجهات المستخدم فقط.

الأمر لا يخلو من المساوئ، للأسف!

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

الاعتماد على اتصال الإنترنت

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

إذ يتطلّب هذا البرنامج اتّصالًا سريعًا ومستمرًّا بالإنترنت، حتى لو حاولتَ استخدام التطبيق المثبّت على الحاسوب، ستصادفك المشكلة ذاتها، لأن التطبيق في الحقيقة مبني على تقنيات الويب أيضًا (تطبيق هجين Hybrid Application).

عدم دعم اللغة العربية بشكل رسمي

ما زالت اللغة العربيّة مهملة وغير مدعومة – اللغات التي تُكتب من اليمين إلى اليسار بالعموم مثل الفارسيّة – مهملة من قبل شركة Figma، ولا وعود أو تصريحات رسميّة بَعد بدعمها في المستقبل. على الرغم من توافر بعض الإضافات من بعض المطوّرين التي توفّر الدعم مثل هذه الإضافة، إلا أنّها ما زالت تشتكي العديد من المشاكل.

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

الملخص

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