الاتساق هو المفتاح - كيفية بناء نظام تصميم فيجما

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

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

لقد ذهب GitHub إلى حد مشاركة مكتبة مكونات Figma الخاصة بهم - وهو مثال رائع لنظام التصميم القائم على Figma. الأدوات الأكثر شمولاً مثل Storybook و Component-Driven Development هي أيضًا موارد مفيدة للغاية لتنفيذ وتوثيق نظام التصميم.

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

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

قوة مكتبة المكونات

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

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

نظام التصميم هو في الأساس مجموعة أدوات

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

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

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

لماذا تعتبر Figma رائعة لإنشاء مكتبة مكونات

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

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

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

إنشاء ملف مكتبة

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

هذا له ميزتان رئيسيتان:

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

منظمة

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

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

بعض الأشياء الأكثر فائدة في المكتبة المكونة هي:

• الألوان
• الخطوط
• أصول العلامة التجارية والشعار وما إلى ذلك.
• التنقل
• أزرار
• إشعارات
• الوسائط
• عناصر النموذج والتحقق من الصحة

بناء نظام تصميم في Figma - الشروع في العمل

في هذا المثال ، سننشئ نموذجًا بسيطًا لتسجيل الدخول ونوضح المكونات والأنماط التي يمكن استنتاجها واستخدامها.

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

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

قم بإنشاء ملف مكتبة Figma

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

يمكن الآن إنشاء الأنماط والمكونات في ملف المكتبة ويمكن استخدامها في ملفات أخرى وتحديثها من ملف المكتبة المركزية.

كيفية إنشاء نمط فيجما

إنشاء الأنماط هو نفسه في ملفات المكتبة كما هو الحال في أي ملف آخر ، موضحة في الخطوات أدناه.

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

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

إليك البرنامج التعليمي لـ Figma حول كيفية إنشاء نمط .

كيفية إنشاء مكون Figma

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

يتم نشر المكونات في Team Library بنفس طريقة الأنماط.

إليك البرنامج التعليمي لـ Figma حول كيفية إنشاء مكون .

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

استخدام مكتبة فيجما

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

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

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

ما وراء بناء مكتبة مكونة في Figma

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

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

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

• • •

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

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