شرح Figma - برنامج التصميم الثوري بديل Photoshop

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

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

ما هو برنامج فيجما ؟

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

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

كيف أبدأ مع Figma؟

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

أنشئ أول مشروعك :

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

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

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

إضافة إطار على Figma

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

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

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

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

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

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

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

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

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

تقدم لك Figma أيضًا ميزة إضافة ملاحظات وتعليقات إما كمحرر مشروع أو مراقب. يتيح لك ذلك ترك ملاحظاتك على مواقع محددة للتصميم دون تعديل مباشر منك.

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

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

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

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

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

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

التفاصيل الصغيرة التي تجعل من Figma أداة شائعة

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

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

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

إنه لا يخلو من العيوب للأسف!

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

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

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

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

اللغة العربية غير مدعومة رسميًا

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

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

ملخص

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