برنامج تعليمي صغير - الاستفادة من ميزات Figma لعملية التصميم بأكملها

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

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

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

ما هي العناصر الأساسية لعملية تصميم سلسة للمنتج؟

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

1. إمكانية الوصول والتعاون . بغض النظر عن الأدوات التي يستخدمها الفريق ، يجب أن تكون هناك طريقة للعمل معًا ، وتقديم المشاريع ، وجمع التعليقات ، وإبقاء أصحاب المصلحة على اطلاع. كل هذه الميزات متوفرة في Figma.
2. المرونة في التكرار وإنتاج المخرجات . تتميز Figma بالمرونة ويمكن استخدامها كلوحة بيضاء تعاونية لرسم الأفكار الأولية وتكرار كل شيء من الإطارات السلكية إلى النماذج عالية الدقة بالأحجام الطبيعية.
3. القدرة على بناء النماذج والاختبار . تصميم تطبيق جوال؟ أنشئ نماذج أولية تفاعلية وانشرها واختبرها مباشرةً على الهواتف الذكية - كل ذلك من Figma.
4. إنشاء مصدر واحد للحقيقة . تعد Figma طريقة ممتازة لتحديد أنظمة تصميم المنتجات الموجودة بالكامل عبر الإنترنت. إنه مصدر واحد للحقيقة بشكل افتراضي. لا مزيد من التساؤل ، "هل هذا هو أحدث إصدار؟"
5. تسليم سلس . ما عليك سوى مشاركة رابط مع المطورين ، وسيكون لديهم حق الوصول إلى جميع المعلومات اللازمة لتنفيذ التصميم - الخطوط الحمراء والقياسات والأصول الرسومية الجاهزة للتصدير.
6. براعة يمكن تخصيصها وتحسينها . تسمح واجهة برمجة تطبيقات المكون الإضافي لـ Figma للفرق بكتابة المكونات الإضافية الخاصة بهم أو الاستفادة من مجتمع المستخدمين الأوسع وتوسيع الأداة بوظائف جديدة.

1. إمكانية الوصول والتعاون

احصل على الفريق على متن الطائرة

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

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

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

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

تضمين ملف المشروع

يمكن تضمين ملفات مشروع Figma في برنامج تابع لجهة خارجية. على سبيل المثال ، يمكن استخدام مستند Dropbox Paper مشترك لعرض الحالة الحالية للمشروع.

لتضمين ملفات المشروع ، اضبط رؤية الملف على أي شخص لديه الرابط - يمكنه عرض كود التضمين ونسخه وتضمين ملف المشروع في أي برنامج تابع لجهة خارجية يدعم embed.ly.

التعليقات والمراجعات

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

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

للحفاظ على اتساق الفرق ، يوجد تكامل جيد يمكنه نشر المناقشة من ملفات Figma في قناة Slack معينة.

التعاون في الوقت الحقيقي

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

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

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

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

2. المرونة في تكرار وإنتاج المخرجات

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

3. القدرة على بناء النماذج والاختبار

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

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

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

اختبار المستخدم

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

اختبار على الهاتف المحمول

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

4. تأسيس مصدر واحد للحقيقة

تاريخ النسخة

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

بالطبع ، لا يعد الإصدار التلقائي هو الخيار الوحيد لحفظ العمل. من الممكن حفظ إصدار يدويًا أو تحرير إصدار معين في محفوظات الإصدار.

نظم التصميم ومكتبات المكونات

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

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

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

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

5. التسليم السلس

مطور Handoff

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

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

6. براعة يمكن تخصيصها وتحسينها

واجهات برمجة تطبيقات Figma والمكونات الإضافية المخصصة

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

استخدام البيانات الحقيقية

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

يعد المكون الإضافي المسمى Google Sheets Sync مثالًا رائعًا لما يمكن القيام به. يجعل هذا المكون الإضافي من السهل دمج جداول بيانات Google كمصدر لتعبئة ومزامنة محتوى المكونات في ملفات Figma.

سير العمل المتقدم

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

يقوم الملحق Storybook بمزامنة ملفات Figma ويظهر مكونات تصميم Figma في لوحة بجانب المكونات المنفذة. حالة استخدام أخرى مثيرة للاهتمام هي Figma to React Converter ، وهو تحسين لسير العمل يحول مكونات Figma إلى كود.

ميزات Figma مثالية لعملية التصميم بأكملها

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

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

• • •

مزيد من القراءة على مدونة Toptal Design:

• قوة Figma كأداة تصميم
• Figma مقابل Sketch مقابل Axure - مراجعة قائمة على المهام
• برنامج تعليمي صغير - العمل مع مكونات زر Figma
• أتقن حرفتك باستخدام أفضل أدوات تجربة المستخدم هذه
• التصميم بدقة - مراجعة Adobe XD