قوة Figma كأداة تصميم

نشرت: 2022-03-11

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

دعونا نلقي نظرة فاحصة.

تصميم الواجهة في Figma
تتمتع Figma بواجهة مألوفة تسهل اعتمادها.

يعمل فيجما على أي منصة

يعمل Figma على أي نظام تشغيل يقوم بتشغيل مستعرض ويب. يمكن استخدام أجهزة Mac و Windows PC و Linux وحتى أجهزة Chromebook مع Figma. إنها أداة التصميم الوحيدة من نوعها التي تقوم بذلك ، وفي المتاجر التي تستخدم أجهزة تعمل بأنظمة تشغيل مختلفة ، لا يزال بإمكان الجميع مشاركة ملفات Figma وفتحها وتحريرها.

في العديد من المؤسسات ، يستخدم المصممون أجهزة Mac ويستخدم المطورون أجهزة الكمبيوتر الشخصية التي تعمل بنظام Windows. تساعد Figma في جمع هذه المجموعات معًا. تمنع الطبيعة العالمية لـ Figma أيضًا إزعاج PNG-pong (حيث ترتد الصور المحدثة ذهابًا وإيابًا بين تخصصات فريق التصميم). في Figma ، ليست هناك حاجة لآلية وساطة لإتاحة أعمال التصميم للجميع.

التعاون في Figma بسيط ومألوف

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

أدوات التعاون في تصميم Figma
أثناء التعاون في Figma ، يمكنك النقر فوق الصورة الرمزية لأي شخص لرؤية وجهة نظره.

يساعد تعاون الملفات في الوقت الفعلي على التخفيف من "انحراف التصميم" —المعرَّف بأنه إما إساءة تفسير أو انحراف عن تصميم متفق عليه. يحدث انحراف التصميم عادةً عندما يتم تصور الفكرة وتنفيذها بسرعة أثناء تنفيذ المشروع. لسوء الحظ ، يؤدي هذا غالبًا إلى الانحراف عن التصميم المعمول به ، مما يتسبب في حدوث احتكاك وإعادة العمل.

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

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

تستخدم Figma Slack للتواصل الجماعي

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

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

مشاركة Figma غير معقدة ومرنة

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

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

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

توفر ملفات Figma المضمنة تحديثًا في الوقت الفعلي

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

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

يتم توضيح تأثير هذه الميزة على عملية UX في الرسم التخطيطي التالي:

Figma تحسين أدوات تصميم UX
تلغي Figma الحاجة إلى تطبيقات مخصصة للنماذج الأولية والتعليق.

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

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

فيجما رائعة لملاحظات مراجعة التصميم

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

أدوات تصميم واجهة مستخدم الويب ومراجعة التعليقات
يمكن للمصممين إبداء التعليقات أثناء المراجعات عن طريق فتح نفس ملف Figma.

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

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

تم تسهيل تسليم المطور باستخدام Figma

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

مراجعة النموذج الأولي لـ Figma وتسليم المطور
يمكن للمطورين الوصول إلى الكود من ملف التصميم أو عن طريق تشغيل نموذج أولي لـ Figma.

ملفات مشروع Figma موجودة في مكان واحد - عبر الإنترنت

نظرًا لأن Figma هو تطبيق عبر الإنترنت ، فإنه يتعامل مع تنظيم الملفات من خلال عرض المشاريع وملفاتها في عرض مخصص. يدعم Figma أيضًا صفحات متعددة لكل ملف ، مثل Sketch ، لذلك يمكن لفرق Agile تنظيم مشاريعهم بشكل منطقي:

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

هذه مجرد طريقة واحدة لتنظيم الملفات التي يمكن جعلها أكثر أو أقل دقة اعتمادًا على ما تتطلبه العملية.

بديل Sketch عبر الإنترنت لنظام Windows
يمكن تنظيم ملفات المشروع بسهولة في عرض مخصص.

توفر واجهات برمجة تطبيقات Figma تكامل أداة الطرف الثالث

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

قام برنامج Atlassian's JIRA بتطبيق وظيفة إضافية لـ Figma ، لذا فإن مالكي المنتجات والمطورين ومهندسي الجودة يشاهدون دائمًا أحدث إصدار من أي نموذج بالحجم الطبيعي من المصممين.

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

تعيين إصدارات الملف تلقائي أو عند الطلب

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

تصميم واجهة الويب إصدار ملف تلقائي
يتم حفظ إصدارات الملفات يدويًا لإنشاء فروع تصميم.

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

تعتبر النماذج الأولية في Figma مباشرة وبديهية

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

نماذج أولية لتصميم الويب
تعمل نماذج Figma الأولية مثل الأدوات الأخرى باستخدام ربط الأسهم بين الإطارات.

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

تعد مكتبات فريق Figma مثالية لأنظمة التصميم

أصبحت أنظمة التصميم ضرورية للعديد من الشركات ، وهناك حاجة لمكونات (رموز في Sketch و Illustrator) قابلة لإعادة الاستخدام وقابلة للتطوير و "رمزية" لاستخدامها في مكتبات الأنماط المتاحة لمصممي UX ومطوري الواجهة الأمامية.

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

العبارة المستخدمة غالبًا "مصدر واحد للحقيقة" مناسبة هنا - بمجرد إنشاء مكتبة فريق Figma ، يمكن لأي شخص لديه وصول إلى مشروع استخدام مثيلات من المكونات في تصميماته والتأكد من أنها تعمل مع أحدث الإصدارات.

مكتبة مكونات نظام التصميم
تنظيم المكونات بسيط ومرن باستخدام الملفات والإطارات.

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

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

تم تصميم Figma لتعزيز العمل الجماعي في التصميم

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

خبراء التصميم الذين يستخدمون Figma بعد إجراء التبديل من Sketch (يمكن استيراد ملفات Sketch مع التكافؤ إلى Figma) لا يخيب أملهم:

... يغير تمامًا الطريقة التي يمكنك من خلالها العمل مع زملائك وعملائك - تبسيط التصميم التعاوني مع Figma

وحدت Figma أفضل ما في عالم أدوات تصميم واجهة المستخدم في السنوات القليلة الماضية - لماذا يجب على فريق التصميم الخاص بك التفكير في التبديل إلى Figma

على مدار العام الماضي ، كنت أستخدم Figma لعملية تصميم UI / UX الخاصة بي وقد وفرت لي ساعات من العمل. لقد غيرت حقًا سير عمل التصميم الخاص بي - كيفية تبسيط سير عمل UI / UX الخاص بك باستخدام Figma

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

• • •

قراءة متعمقة:

  • أتقن حرفتك باستخدام أفضل أدوات تجربة المستخدم هذه
  • تبسيط التصميم التعاوني مع Figma
  • استخدم Craft by InVision لتبسيط تعاون الفريق
  • الموت للهيكل السلكي. مباشرة إلى الدقة العالية!
  • كن مصممًا عالميًا من خلال جعل العالم مكتبك