معايير التسمية في Figma: قواعد واضحة للمعدات والأنظمة

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

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

الأساسيات: لماذا يجب توحيد التسمية في Figma

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

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

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

تنظيم المكونات والأنماط: الأنماط التي تعمل

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

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

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

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

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

كيفية إعداد نظام التصميم الخاص بك وصيانته في Figma

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

1. المخزون الأوليحدّد العناصر الرئيسية. حدّد لوحة الألوان الأساسية ومقاييسها، ونوع الطباعة ومستوياتها، وأنماط التباعد، وأنماط التأثيرات.
2. ملف النظام الرئيسي:ينشئ ملفًا مخصصًا في Figma لنظام التصميم. سيكون أصل المكونات والأنماط، بالإضافة إلى توثيقها.
3. المكونات المنظمةالتجميع حسب المجموعات (الأزرار، النماذج، التنقل، الملاحظات). استخدم اتفاقية التسمية المتفق عليها، وحافظ على تسلسل هرمي واضح في الأصول.
4. أنماط محددة جيدًا: ينشر أنماط الألوان والنصوص والشبكات والتأثيرات. قم بتسمية الأنماط باستخدام نفس المعايير التي ستستخدمها للمتغيرات والرموز. لتجنب التكرار.
5. التوثيق الحيأضف صفحات دليل المستخدم، والأمثلة، والإرشادات. حدّد ما يمكن تعديله، ومن ينشره، وكيفية تعديل التغييرات.

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

رموز التصميم والمعايير: من JSON إلى W3C وقاموس الأسلوب

تُعدّ رموز التصميم أصغر تمثيل لقرارات التصميم المرئي والتفاعلي بصيغة قابلة للنقل. وقد أصبح تخزين هذه الرموز بصيغة JSON ممارسة شائعة، وتعمل أدوات مثل Style Dictionary على سد الفجوة بين المنصات من خلال إنشاء متغيرات للويب، وiOS، وAndroid.

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

في يوليو 2023، نُشرت مسودة ذات صلة من فريق عمل W3C لتوحيد تنسيق رموز التصميم. تقترح هذه المواصفة، من بين أمور أخرى، خاصية خاصة تُسمى `$type` لتصنيف الرموز بشكل صريح ، وهو ما يختلف عن CTI في بعض الجوانب.

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

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

تسمية المتغيرات: الألوان والطباعة دون صداع

تخلط العديد من الفرق بين أسماء مثل "الأزرق الرئيسي" ومقاييس مثل "أزرق-500" وأدوار طباعية مثل "عنوان كبير" أو "نص عادي". وأفضل طريقة لحل هذه المشكلة هي فصل الطبقات: رموز المظهر الأساسية ورموز النية الدلالية.

الألوان. حدد لوحة ألوان أساسية باستخدام تدرجات لونية (مثل: الأزرق 50، 100، 200، 300، 400، 500، 600، 700، 800، 900) وألوان محايدة منفصلة. هذه رموز أساسية ، ويجب عدم استخدامها مباشرةً في المكونات إذا كنت تسعى إلى مرونة في التصميم. إضافةً إلى ذلك، أنشئ رموزًا دلالية مثل لون الخلفية الأساسي، والنص الثانوي، والحدود التفاعلية، والتي تُطابق الرموز الأساسية. بهذه الطريقة، يُعد تغيير التصميم أو العلامة التجارية عملية ربط، وليس تغييرًا جذريًا.

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

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

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

ملاحظة حول التدويل: حتى لو كان الفريق يتحدث الإسبانية، فإن توحيد اللواحق أو الاختصارات التقنية (md، lg، sm، xl) يُسهّل اعتماد الأدوات والأفراد من الفرق الأخرى . المهم ليس اللغة، بل الاتساق وإمكانية التتبع.

هندسة Figma: الفرق والمشاريع والملفات والصفحات

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

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

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

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

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

الصفحات والتدفقات وترقيم الإطارات: اجعل كل شيء مهمًا.

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

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

ترقيم الإطارات. يُعد استخدام صيغة مثل "_" فعالاً للغاية. فهي تستخدم أصفارًا بادئة لضمان الترتيب الطبيعي (01، 02، 03، 04، 05، 06، 07، 08، 09، 10) وتُرقم المشاهد من اليسار إلى اليمين داخل الصف. مثال: 01_100، 01_101، 01_102 للصف الأول؛ 01_200، 01_201، 01_202 للصف الثاني.

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

مكتبات معدات النظام والحوكمة

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

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

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

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

أتمتة إعادة التسمية باستخدام Figma AI

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

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

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

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

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

أفضل الممارسات المحددة للألوان والنص في المتغيرات

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

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

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

كما أن هذا النهج يُسهّل التواصل مع فريق التطوير. فالمطورون غالباً ما يُفضّلون المتغيرات الثابتة والتي يُمكن التنبؤ بها ، مثل `--color-text-primary` أو `--font-body-md`، بدلاً من الأسماء الجذابة التي تتغير مع التوجهات السائدة.

المكونات الإضافية الموصى بها للحفاظ على الأمور منظمة

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

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

العمل مع العملاء والحسابات المنظمة

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

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

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

التدريب والتطوير المهني

إذا كنت ترغب في تعزيز وتطوير مسيرتك المهنية في مجال تجربة المستخدم/واجهة المستخدم، ففكر في التدريب مع محترفين ذوي خبرة عملية. تجمع البرامج المكثفة، مثل برنامج KeepCoding's UX/UI Design AI Driven Full Stack Bootcamp، بين الخبرة العملية، والحكم السليم، والتكنولوجيا المُطبقة على التصميم والتطوير، مع مدربين يمارسون العمل في هذا المجال يوميًا.

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

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