تصميم الواجهة التعاونية مع Figma

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

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

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

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

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

"لدينا الآن بيئة ديناميكية وتعاونية تمكننا من تبادل الأفكار معًا ، وترتد الأفكار عن بعضنا بعضاً ، ونصبح أكثر إبداعًا في نهاية المطاف." - Taylor Madaffari، Copywriter، Aisle Rocket Studios

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

إذا لم يكن لديك حساب FIGMA حتى الآن يمكنك الحصول على حساب مجاني ومتابعة كل شيء نغطيه .

سنغطي الكثير في هذا المنشور ، لذا قد ترغب في الحصول على قهوة أولاً:

• كيف يتم التعاون في Figma
• إنشاء وإدارة الفرق
  
• التحكم في الوصول إلى أعضاء الفريق المستويات
  
• المكونات المشتركة للأنماط والأنماط
  
• المشاركة والتضمين
  
• تعليقات
• تاريخ النسخة
  
• التكامل مع أدوات إضافية

العمل معا ، وثيقة واحدة ، في الوقت الحقيقي

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

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

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

هذا التحديث المركزي والمباشر في الوقت الحقيقي للملفات التعاونية يعني:

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

إذن ، كيف يمكنك السماح للأشخاص بالتعاون في هذا الطريق؟ هيا نكتشف.

كيف يتم التعاون في Figma

في Figma هناك طريقتان يمكنك العمل بشكل تعاوني.

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

سنبدأ بالنظر إلى الفرق ، التي هي التركيز السائد للتعاون في Figma.

إنشاء وإدارة الفرق

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

في الصفحة التي يتم توجيهك إليها لاحقًا ، أدخل اسمًا لفريقك الجديد:

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

دعوة أعضاء الفريق

في هذه المرحلة ، تم إنشاء فريقك ويكون جاهزًا لك لدعوة الأعضاء.

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

في الجزء السفلي الأيسر من الواجهة ، سترى منطقة بها العنوان أعضاء فريق ، وستجد تحت هذا العنوان رابط + دعوة . انقر فوق الرابط لبدء عملية الدعوة.

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

Once invited, the person will receive either an alert within Figma or an email through which they can accept the invitation and join the team:

إنشاء مشاريع الفريق

Once you have your team members invited you can start setting up projects the team can all access.

On the team management page, click the + New Project link you’ll see under your team name, on the left side in the team management area.

☻

ملاحظة : في المستوى المجاني ، يمكنك اختيار خيار الإذن الأول فقط ، "يمكن لكل فرد في التعديل" (سيتم تفسير هذه الأذونات بعد قليل).

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

• لمعرفة المزيد عن زيارة فريق الإدارة: مساعدة Figma: إنشاء فريقك وإدارته

التحكم في الوصول إلى أعضاء الفريق المستويات

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

• صاحب.
• مشرف.
• محرر.
• مشاهد.
  

تتحكم مستويات التحكم في الوصول هذه:

• سواء يمكنك تحرير أو عرض الملفات فقط.
• مستوى عضو الفريق الذي يمكنك دعوته للمشروع.
• مستوى عضو الفريق الذي يمكنك تغيير الأذونات له.
  

سيتم تطبيق مستوى وصول عضو الفريق على جميع مشاريع وملفات ذلك الفريق.

من يستطيع تغيير الملفات؟

يمكن لكل مستوى باستثناء المشاهدين إجراء تغييرات على الملفات.

المالك والدعوات الادارية ووضع الاذن

يمكن للمالكين والمشرفين تخويل فريق باستخدام Slack ، ودعوة أعضاء الفريق كمسؤولين أو محررين أو عارضين ، وكذلك تغيير أذونات أعضاء الفريق.

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

محرر ومحرر الدعوات وإعداد إذن

يمكن للمحررين دعوة وتغيير الأذونات للمحررين والمشاهدين. يمكن للمشاهدين دعوة مشاهدين آخرين ولكن لا يمكنهم إجراء أي تغييرات في الأذونات.

تغيير مستويات الوصول

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

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

لديك هنا خيار إرجاع الأعضاء إلى "عارض":

أذونات متقدمة لفرق برو

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

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

الخيار الافتراضي ، المتوفر في المستويات المجانية ، هو:

• يمكن لكل شخص في التعديل : هذه وظيفة وصول عادية ، مما يسمح لمستويات الأذونات للأفراد بالحصول على الأسبقية.

خيارات الأذونات المتقدمة هي:

• يمكن للجميع في العرض : يمكن لأعضاء الفريق عرض المشروع دون تغييره.
  
• دعوة فقط - دعني أختار من لديه حق الوصول : المشروع غير مرئي ما لم يتم دعوة شخص بشكل صريح.
  

• قراءة المزيد حول أذونات Figma على: مساعدة Figma: أذونات

المكونات المشتركة للأنماط والأنماط

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

على سبيل المثال ، هذه مكتبة مليئة بمكونات واجهة المستخدم للمادة الجاهزة للسحب والإسقاط :

لن أذهب كثيرًا إلى إمكانات المكونات والأنماط الآن ، نظرًا لأننا نركز على أدوات التعاون ، ولكن إذا كنت ترغب في معرفة المزيد عن كل منها ، فانتقل إلى:

• مساعدة Figma: مكونات
• مساعدة Figma: أساليب ceating

تبادل المكتبات

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

سترى قائمة من المكتبات التي يحتمل أن تكون متاحة للفريق ويمكنك تبديل الدخول إلى أو إيقاف تشغيله لكل:

نصيحة لمنع تغييرات المكونات العرضية

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

• لمزيد من المعلومات عن مكتبات المجموعات ، تفضل بزيارة: مدونة Figma: مكتبة الفريق 1.0

المشاركة والتضمين

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

لمشاركة مستند ، اضغط على الزر مشاركة الأزرق الموجود في الطرف الأيمن من شريط الأدوات العلوي.

في النافذة المنبثقة التي تظهر ، انقر على الرابط الذي ينص على تمكين الوصول إلى الرابط.

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

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

• اقرأ المزيد عن مشاركة وثائق Figma هنا: مساعدة Figma: مشاركة الملفات والمشروعات

تضمين

إذا كنت تريد أن تتمكن من عرض تصميم Figma من داخل موقع آخر ، فيمكنك القيام بذلك عن طريق التضمين.

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

بمجرد استخدام HTML هذا لتضمين مستند Figma في صفحة ، سيبدو شيئًا مثل هذا:

يتم تحديث الملفات المضمنة في الوقت الفعلي ، مما يضمن عرض أحدث إصدار دائمًا.

• للحصول على مزيد من المعلومات حول التضمين المباشر لـ Figma : Figma help: Figma live embed

تعليقات

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

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

• لمعرفة المزيد عن التعليقات في Figma ، يرجى قراءة: مساعدة Figma: التعليقات

تاريخ النسخة

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

يعود تاريخ الإصدار إلى 30 يومًا على المستوى المجاني ، وهو غير محدود في المستويات المدفوعة.

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

ستظهر قائمة بالنسخ المحفوظة في الشريط الجانبي الأيسر:

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

• المزيد عن تاريخ الإصدار في Figma في Figma help: تاريخ الإصدار

التكامل مع أدوات إضافية

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

تثاقل

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

• المزيد حول التكامل Slack في: مساعدة Figma: Figma Slack

Dribbble

تتمتع شركة Figma بتدفق سلس لتصدير إطار ودفعها مباشرة إلى Dribbble.

• المزيد عن دمج Dribbble في: مساعدة Figma: Figma و Dribbble

Zeplin

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

• أكثر على تكامل Zeplin في: مساعدة Figma: Figma و Zeplin

دروب بوكس ​​ورقة

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

• المزيد عن دمج Dropbox Paper في: مساعدة Figma: Figma و Dropbox

جيرا وتريلو

للمساعدة في جانب إدارة المشروع من الأشياء ، يتكامل Figma مع كل من Jira و Trello ، مما يسمح لك بتضمين ملفات Figma مباشرة داخل القضايا / البطاقات.

• المزيد عن تكامل جيرا على: Figma help: Figma and Jira
• أكثر على التكامل Trello في: مساعدة Figma: Figma وتريلو

الخاتمة

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

ومثيرة للإعجاب مثل أدوات التعاون لـ Figma ، لا يزال هذا جزءًا فقط مما يجعله تطبيقًا مثيرًا للاهتمام وجذابًا.

لمعرفة المزيد حول الأسباب التي من المفترض أن تعطيها لـ Figma ، اطلع على بعض الدروس والدورات الأخرى:

• FIGMA
  نصائح لوحة الطبقات Figma
  كيز بريسى
• تصميم واجهة المستخدم
  دورة جديدة: مقدمة في Figma
  أندرو بلاكمان
• FIGMA
  اذهب إلى ما وراء أساسيات تصميم واجهة المستخدم في مسارنا الجديد Figma
  أندرو بلاكمان