التصميم الذكي يعني تصميمًا منظمًا: عندما تُسمى الأشياء بنفس الأسماء للجميع، يعمل الفريق بسلاسة وتسير عمليات التسليم بسلاسة. في Figma، يُترجم هذا إلى اعتماد تسمية واضحة للطبقات والمكونات والأنماط والمتغيرات والحالات، بحيث يمكن لأي شخص فهم ماهية كل عنصر في لمحة. يؤدي إنشاء قواعد تسمية متسقة إلى زيادة السرعة وتجنب الارتباك والحفاظ على الاتساق البصري. في أي مشروع، من مجموعة واجهة مستخدم بسيطة إلى نظام تصميم ناضج.
في هذا الدليل، ستتعلم كيفية بناء تصنيف شامل يغطي كل شيء، من أنواع العناصر وخصائصها إلى قواعد التسمية والبنية والترتيب. ستتعلم أيضًا كيفية الاستفادة من Figma AI لإعادة تسمية الطبقات بشكل جماعي، واستخدام المتغيرات كرموز قابلة لإعادة الاستخدام للتصميم المتقدم والنماذج الأولية. الفكرة هي أنك ستنتهي إلى لغة عمل مشتركة يمكنك توسيع نطاقها بسلاسة..
الأساسيات: لماذا تعتبر التسمية مهمة في نظام التصميم
قبل الخوض في التفاصيل، يجدر بنا تحديد الإطار: يجمع نظام التصميم في Figma بين المكونات والأنماط والقواعد التي تحدد الواجهة. يعد تعريف الأسماء بشكل متسق عبر النظام أمرًا حيويًا للحفاظ على الاتساق والكفاءة.بهذه الطريقة، لن تصبح مكتبتك عبارة عن فوضى من الأزرار المتطابقة تقريبًا ولكن يتم تسميتها بألف اسم مختلف.
داخل هذا النظام، تعتبر الخصائص وقيمها أساسية: اللون، الطباعة، التباعد، الأحجام، الحالات، الأوضاع… كلما كنت متسقًا في تسمية كل خاصية وكل قيمة، كلما كان من الأسهل تطبيق المظهر العام والحفاظ عليه. في جميع أجزاء المنتج.
التنظيم العملي للمكونات والأنماط
عند العمل مع المكونات، فإن استخدام أسماء وصفية ويمكن التنبؤ بها يوفر لك الوقت الذي تقضيه في البحث عن الحالات وفهمها. بالنسبة للأزرار، على سبيل المثال، قم بالتمييز بين النوع والغرض (أساسي، ثانوي)؛ وأضف الحالة (على سبيل المثال، طبيعية أو متحركة) حيثما كان ذلك مناسبًا.
بالنسبة للرموز، من الأفضل تجنب الرموز العامة مثل "الرمز 123". اختر أسماء معروفة مثل "البريد" أو "عربة التسوق" أو "الشبكات" ينبغي عليهم شرح ما يريدونه دون فتح الطبقة. يُقدَّر هذا الوضوح عند التصفية في المكتبة وعند الفحص من وضع التطوير.
بالنسبة لحالات المكونات التفاعلية، قم بتسميتها بحيث يمكن تمييزها بشكل لا لبس فيه: على سبيل المثال، يجب التمييز بوضوح بين الزر الرئيسي في وضع السكون وإصدار التحويم الخاص به. يؤدي استخدام لاحقة أو معدِّل حالة إلى حل المشكلة (على سبيل المثال، primary/primary-hover).
إذا كنت تدير أكثر من نظام تصميم بالتوازي، قم بتحديد التسلسل الهرمي الخاص بهم. إن التمييز بين المجموعة "الرئيسية" والمجموعة "الثانوية" يمنع خلط القطع التي لا تنتمي إلى بعضها البعض.وخاصة في المؤسسات التي لديها علامات تجارية أو قطاعات متعددة.
فوائد محاذاة الأسماء بين التصميم والتطوير
يؤدي استخدام الفريق بأكمله لنفس اللغة إلى تقليل الاحتكاك: عندما يقرأ المطور اسم الطبقة ويتطابق مع الرمز أو الفئة في الكود، يكون التنفيذ أكثر وضوحًا. إن التسمية هي الغراء الذي يربط التعاون بين التخصصات. ويختصر دورات المراجعة.
علاوة على ذلك، عندما يحين وقت التدقيق أو توسيع نطاق النظام، يصبح تحديد العناصر وتجميعها أمرًا بسيطًا إذا تم تطبيق قواعد التسمية بشكل متسق. الاتساق الاسمي يترجم إلى إمكانية الصيانة وتوفير التكاليف مع مرور الوقت.
خطوات إنشاء ملف نظام التصميم الخاص بك في Figma
إن بناء نظام قوي ليس مسألة وقت، ولكن هناك مسار واضح يمكنك اتباعه حتى لا تضيع على طول الطريق. ابدأ بالأساسيات وقم بتوثيق كل قرار لجعله قابلاً للمشاركة.
- جرد العناصر الرئيسية: قم بتحديد ما تريد توحيده (اللوحة، الخطوط، مقاييس التباعد، المكونات المهمة مثل الأزرار، المدخلات، البطاقات...). يمنع النطاق الواضح إعادة العمل لاحقًا.
- ملف مخصص للنظام:ينشئ ملفًا محددًا يعمل كمصدر للحقيقة. يضمن فصل المكتبة عن المشاريع التحكم في التغييرات وإصداراتها بشكل أفضل..
- تكوين المكونات باستخدام المعايير: يقوم ببناء المكونات ومتغيراتها وفقًا للاتفاقية المختارة. يجب أن يعكس الاسم النوع والغرض والحالة عندما يلمس.
- تحديد الأنماطأنماط النصوص والألوان والتأثيرات بأسماء متسقة حتى يسهل العثور عليها. ويطبق نفس القواعد النحوية وأنماط ربط الكلمات..
- توثيق الاستخدام:أضف ملاحظات حول متى تستخدم كل قطعة، والحدود، والأمثلة. دليل واضح يجعل من الأسهل على المنظمة بأكملها التصميم "في نفس درجة الحرارة".
التصنيف: المكونات، والكائنات، والخصائص، والقيم
لكي يعمل المسرد، عليك أولاً معرفة الأجزاء التي تتحدث عنها وكيفية ارتباطها ببعضها البعض. سيعمل هذا التصنيف كخريطة للتأكد من عدم ترك أي نهايات فضفاضة..
المكونات: القاعدة والمركبات
بمصطلحات Figma، المكون عبارة عن كتلة لها هويتها البصرية الخاصة ضمن مجموعة واجهة المستخدم (مثل البطاقة). المكون الأساسي هو قطعة مصممة لتتداخل مع قطع أخرى. (على سبيل المثال، الزر الرقمي الموجود فقط ضمن مُحدِّد التاريخ). تُصنِّفه بعض المكتبات كأصول، أو مقتطفات، أو أجزاء، أو عناصر، أو مكونات فرعية: الفكرة واحدة.
الكائنات: الحاويات والعناصر
الكائن هو قطعة داخل مكون. هناك مجموعتان رئيسيتان: الحاويات (الصناديق والأقسام) والعناصر (المحتويات)من بين العناصر ستجد النص (التسمية، العنوان، العنوان الفرعي، التسمية التوضيحية)، والمكونات الأخرى (الرموز، الرسوم التوضيحية، الأزرار، الجداول)، والمتجهات (الدائرة، المستطيل، المضلع) والوسائط (الصورة، gif، الفيديو).
الخصائص والقيم
الخصائص هي الأجزاء المتغيرة (الحجم، الحالة، اللون، الكثافة، الخ). يقدم كل عقار مجموعة من القيم الممكنةعلى سبيل المثال، يمكن أن تكون خاصية "الحالة" الخاصة بالزر عادية، أو متحركة، أو مضغوطة، أو معطلة...
هناك نوعان من القيم: المتغيرات والقيم المنطقية. يدعم أحد المتغيرات أكثر من خيارين (xs/s/m/l، أو info/warn/error)، في حين يمثل القيمة المنطقية نعم/لا نموذجية (صواب/خطأ، تشغيل/إيقاف، إظهار الرمز/إخفاء الرمز).
بنية التسمية: المُعدِّلات وموقعها
بمجرد أن تتأكد من ما تريد تسميته (المكون أو الكائن أو الخاصية أو القيمة)، يجب عليك أن تقرر كيفية تحديد الاختلافات بينها. تساعد المعدلات على التمييز بين المتغيرات والحالات والسياقات.
أنواع المعدلات
هناك عدة طرق لتعديل الاسم بصريًا. يمكنك استخدام الأيقونات أو الرموز أو الكلمات الرئيسية. لتعزيز قراءتك:
- الرمز: على سبيل المثال، رمز في المقدمة للإشارة إلى الأداة المساعدة أو الحالة (فقط إذا كان جهاز الكمبيوتر الخاص بك يدعمه ويفهمه).
- علامات الترقيم: البادئات أو الفواصل مثل ._Base أو علامات المستوى الفرعي.
- الكلمات والاختصارات والمختصرات: اللواحق مثل Item-List، Cell-Header، ShowIcon، BC_…
المهم أن تكون الاتفاقية واضحة وموثقة. إذا قمت بدمج أنواع التعديل، فقم بتحديد الأولويات وحالات الاستخدام. لتجنب الاختلاط الفوضوي.
موضع التعديل
يجب أن يكون الترتيب متسقًا في جميع أنحاء النظام بأكمله. يمكنك وضع المُعدِّل قبل (قائمة العناصر) أو بعد (قائمة العناصر)الأمر الأساسي هو عدم التبديل بين النمطين دون استراتيجية واضحة.
قواعد الأسماء: النوع والعدد والأحرف الأولى والنقابات
يؤدي توحيد القواعد النحوية إلى جعل الأسماء قابلة للقراءة والتنبؤ. قرر مرة واحدة وطبقها دائماوإلا فإن الاستثناءات التي يصعب تذكرها سوف تنمو.
نوع المصطلح
اختر ما إذا كان الاسم سيكون فعلاً، أو صفة، أو اسمًا، وبأي شكل يتم تصريفه. الخيارات الصحيحة: اسم المفعول (انهار)، زمن المضارع (انهيار)، الصفة (قابل للانهيار)، الاسم (قابل للانهيار) أو مجموعات مثل "قابل للطي"، "إظهار قابل للطي"، "الرمز قبل".
مفرد أو جمع
حدد ما إذا كان الاسم مفردًا أم جمعًا وحافظ على النمط. يؤدي استخدام الزر/الأزرار أو الحجم/الأحجام باستمرار إلى تسهيل عملية البحث والقراءةيمكنك أيضًا تعيين عنصر عام ("إجراءات") إذا كان من الأفضل تجميع عناصر متعددة.
الأحرف الأولى والأسلوب المرئي
قم بتعيين كيفية استخدام الأحرف الكبيرة: أحرف كبيرة + أحرف كبيرة (الأيقونة قبل)، أحرف صغيرة + أحرف صغيرة (الأيقونة قبل)، أحرف كبيرة + أحرف صغيرة (الأيقونة قبل) أو أحرف صغيرة + أحرف كبيرة (الأيقونة قبل). إن استخدام الأحرف الكبيرة هو جزء من النظام وليس تفصيلاً بسيطاً.
أزواج الكلمات
إن كيفية دمج المصطلحات تحدد قابلية القراءة والتوافق مع الكود. الخيارات الشائعة: بدون مسافة (iconBefore)، مع مسافة (icon before)، نقطة (icon.Before)، شرطة (icon-before)، شرطة سفلية (icon_before)تجنب التركيبات التي تعيق القراءة إذا لم تضيف أي قيمة.
يتم حاليًا تطوير أنماط محددة مسبقًا (أنماط الحالة) تجمع بين الأحرف الأولى والاتحادات: camelCase (بدون مسافات وكل كلمة بأحرف كبيرة باستثناء الأولى)، وPascalCase (جميعها بأحرف كبيرة ولا مسافات)، وkebab-case (شرطة وأحرف صغيرة) وsnake_case (شرطة سفلية وأحرف صغيرة)اختر ما يناسب مجموعتك بشكل أفضل وكن متسقًا.
كيفية الفرز: أبجديًا، وتسلسليًا، وهرميًا
إلى جانب الاسم، فإن طريقة ترتيب القوائم الطويلة مهمة أيضًا للعثور على الأشياء بسرعة. هناك ثلاثة أساليب تعمل بشكل جيد في المكتبات:
- أبجديًا: أ-زوز-أ (على سبيل المثال، أسفل، يسار، يمين، أعلى).
- متسلسل: 0–10 أو 10–0 (على سبيل المثال، الأحجام أو الحالات الافتراضية/المرور فوقها/النشطة).
- هرمي: من الأكثر إلى الأقل أو العكس (على سبيل المثال، مستويات الخطورة الأساسية أو الثانوية أو المعلومات/التحذير/الخطأ).
إن تطبيق معايير الترتيب نفسها على جميع المجموعات يمنع كل فريق من الطلب "بطريقته الخاصة". حدد تفضيلاتك ووثّق الأمثلة للحالات الغامضة.
التنفيذ: التدقيق وإنشاء المسرد
وبعد تحديد القواعد، حان الوقت لتطبيقها عمليا. لديك مسارين يمكنك حتى دمجهما. لضمان الهبوط:
تدقيق المحتوى
قم بمراجعة ما تم بناؤه بالفعل: مكونات المخزون، والكائنات، والخصائص، والقيم مع أسمائها الحالية. الهدف هو التوصل إلى توافق في الآراء بشأن نظام تصنيفي واحد مع التصميم والتطوير وتخطيط الهجرة دون كسر النماذج الأولية أو عمليات التسليم.
إنشاء المصطلحات
سواء كنت تبدأ من الصفر أو قمت بالفعل بالتدقيق، قم بتحديد البنية والقواعد والترتيب لكل نوع من العناصر (المكون والكائن والخاصية والقيمة). يصبح هذا القاموس "قاموسك الرسمي" للأسماء وفي مورد للأعضاء الجدد.
Figma AI لإعادة تسمية الطبقات سياقيًا
إعادة تسمية مئات الطبقات يدويًا أمرٌ مُمل. هنا، يُوفر لك Figma AI الوقت باستخدام علاقات المحتوى والموضع والطبقات لاقتراح أسماء سياقية. تقوم الأداة بتحليل اختيارك وتطبيق أسماء متسقة حيث تكتشف النمط الافتراضي..
هناك حدود متعمدة: يقوم Figma AI فقط بإعادة تسمية الإطارات والمجموعات وطبقات النص والمستطيلات (والمستديرة) باستخدام تعبئة الصورة، وبعض الحالات التي لا تزال تحتفظ بالاسم الافتراضي للمكون الرئيسي (الحاوية فقط، دون لمس الطبقات الفرعية). إذا كانت الطبقة تحمل اسمًا بالفعل، أو كانت مقفلة أو مخفية، أو كانت عبارة عن شكل متجه فردي (قطع ناقص، مضلع، نجمة، شبكة) بدون صورة، فلن تتم إعادة تسميتها..
يمكنك البدء في إعادة التسمية بعدة طرق: من قائمة السياق بالنقر بزر الماوس الأيمن، أو من الإجراءات في شريط الأدوات، أو من خلال إجراءات سريعة عن طريق كتابة "إعادة تسمية الطبقات". إذا تم تسمية كل شيء بشكل صحيح بالفعل، فسترى الرسالة "ليست هناك حاجة لإعادة تسمية الطبقات"، مع خيار "إعادة التسمية على أي حال" إذا كنت تريد فرض ذلك..
تفصيل مفيد: إذا كان لديك طبقات متطابقة بدون اسم في عدة إطارات عالية المستوى، فسوف يقوم Figma AI بإعادة تسمية الطبقات المطابقة. يساعد هذا في الحفاظ على الرسوم المتحركة الذكية ومواضع التمرير في النماذج الأولية من خلال الحفاظ على المراسلات الاسمية.
المتغيرات في Figma: رموز قابلة لإعادة الاستخدام للتصميم والنماذج الأولية
تخزن المتغيرات القيم التي يمكنك إعادة استخدامها في خصائص التصميم وإجراءات النموذج الأولي، وتتواجد جنبًا إلى جنب مع أدوات التصميم الأخرى مثل برامج التصميم ثلاثي الأبعاد لنظام التشغيل Mac. إنهم الجسر الطبيعي لتنفيذ رموز التصميم وبناء المنطق التفاعلي دون تكرار الأطر.
بعض الاستخدامات العملية: إنشاء الرموز (الألوان والخطوط والمسافات) وتطبيقها، والتبديل بين أحجام الأجهزة مع تعديلات التباعد الفورية وفقًا لمقياسك، ومعاينة النصوص بلغات مختلفة مع تغيير السياق، أو بناء عربة تسوق تحسب إجمالي الطلبات. كل هذا دون مضاعفة الاختلافات غير الضرورية.
هناك ثلاثة مجالات رئيسية يتفوقون فيها: التصميم وأنظمة التصميم، والنماذج الأولية المتقدمة، وواجهات برمجة التطبيقات. إن إتقان هذه العناصر الثلاثة يسمح لك بربط التصميم والتفاعل والأتمتة. في تدفق متسق.
متغيرات التصميم والأنظمة
استخدم المتغيرات والأوضاع لتمثيل الرموز والسياقات البديلة (الفاتح/الداكن، والعلامات التجارية، والمناطق). اللون والعدد هما الأساس للوحات والأحجام والكثافات.ويمكنك ربطها بالمجموعات والأوضاع للتبديل بينها في لمحة.
تشتمل الموارد النموذجية في هذا المجال على دروس تعليمية تمهيدية، وأدلة للمجموعات والأوضاع، ومقارنات بين المتغيرات والأنماط لمساعدتك في تحديد متى تستخدم كل منها. باختصار: تعمل الأنماط كإعدادات مسبقة مرئية؛ حيث تقوم المتغيرات بتغليف القيم القابلة للتحديد باستخدام الأوضاع.
متغيرات النمذجة المتقدمة
في النماذج الأولية، تخزن المتغيرات الحالات والخصائص التي تتغير من خلال التفاعل. يمكنك استخدام الإجراءات لتعديل قيمها وبالتالي تغيير المظهر أو المحتوى أو الرؤية دون تكرار الإطارات.
يؤدي الجمع بين المتغيرات والتعابير والشروط إلى فتح الباب أمام السلاسل الديناميكية والعمليات الرياضية والتقييمات المنطقية. من خلال استخدام العديد من الإجراءات ومنطق if/else، يمكنك تجميع السلوكيات المعقدة في نفس المحفز..
تلعب الأوضاع المتغيرة أيضًا دورًا في النماذج الأولية: تعيين القيم حسب السياق (على سبيل المثال، السمة) واستخدامها في التعبيرات لتبديل المظهر في الوقت الفعلي. يتم تقليل عدد الشاشات المطلوبة للسيناريوهات الغنية بشكل كبير.
المتغيرات وواجهات برمجة التطبيقات (REST والمكونات الإضافية والأدوات)
المتغيرات متاحة في كل من واجهة برمجة التطبيقات الإضافية وواجهة برمجة التطبيقات REST. يمكنك عرض المتغيرات وإنشائها وتحديثها وحذفها، بالإضافة إلى ربطها بالمكونات من المكونات الإضافية.يؤدي هذا إلى تمكين أدوات مثل المستوردين/المصدرين أو محولات الأنماط إلى المتغيرات.
تتمكن عناصر واجهة المستخدم من الوصول إلى المتغيرات من خلال واجهة برمجة التطبيقات الإضافية (القراءة والإنشاء)، باستثناء أنها لا تستطيع ربط خصائص عناصر واجهة المستخدم بالمتغيرات بشكل مباشر. للمزامنة مع المستودع، هناك أمثلة لإجراءات GitHub التي تربط متغيرات Figma بقاعدة التعليمات البرمجية الخاصة بك.بالإضافة إلى ملفات الحماية المجتمعية لممارسة خالية من المخاطر.
ممارسات التسمية الجيدة للطبقات والمكونات
قم بتعيين بادئة للنوع (على سبيل المثال، Btn، Card، Input) ولاحقة للحالة (التحليق، التركيز، تعطيل) أو الحجم (sm، md، lg). الترتيب الموصى به عادة هو النوع/الغرض/الحجم/الحالةواستخدم فواصل موحدة (kebab-case أو PascalCase، أيهما يناسب المكدس الخاص بك).
الحفاظ على الاتساق بين الطبقات والمثيلات: يجب أن يرث حاوية المثيل نمط المكون الرئيسي. تجنب الاختلافات المحلية المرتجلة لأنها تعطل البحث والاستبدال.عندما يحين وقت التغيير، قم بذلك في الإصدار الرئيسي ونشر إصدار جديد.
بالنسبة للخصائص المنطقية، قم بتسمية الخاصية، وليس القيمة: "أيقونة" مع قيم تشغيل/إيقاف أو صحيح/خطأ؛ تجنب "مع الأيقونة/بدون الأيقونة" إذا كان نظامك يستخدم تبديلات منطقية. يؤدي هذا إلى محاذاة اللغة مع منطق النموذج الأولي والرمز..
إذا كان مشروعك يتضمن أكثر من نطاق (على سبيل المثال، backoffice والعميل)، فأضف نطاقًا إلى اسم المجموعة أو المجلد. يؤدي الفصل حسب السياق إلى تقليل التصادمات الدلالية وتعزيز إعادة الاستخدام المناسبة.
الأخطاء الشائعة وكيفية تجنبها
أحد الأخطاء الأكثر شيوعًا هو عدم توثيق الاتفاقية والسماح لكل شخص بتسمية الأشياء "بطريقته الخاصة". بدون التوجيه، تصبح المكتبة مجزأة وتنخفض سرعة الفريقتقديم أمثلة واضحة وحالات حدودية لإزالة الشكوك.
خطأ آخر: خلط أنماط الضم واستخدام الأحرف الكبيرة داخل نفس عائلة المكونات (كباب في بعض الأحيان، جمل في أوقات أخرى). يؤدي هذا إلى تعقيد عملية المرشحات والاستعلامات وقراءة لوحة الطبقات.قم بتحديد نمط افتراضي وتطبيق استثناءات محدودة ومبررة.
تجنب الأسماء التي لا معنى لها ("الإطار 27 النسخة 3"، "المستطيل 12"). إذا لم يتمكن Figma AI من المساعدة لأن الأسماء تم تعيينها بالفعل، فقم بإعادة تسميتها يدويًا أو على مستوى المكون. واغتنم الفرصة لتعزيز الاتفاقية المختارة.
لا تقم بتكرار المتغيرات التي تم حلها بالفعل بواسطة متغير أو قيمة منطقية في المكون. القاعدة الذهبية: شاشات أقل، ومعلمات أكثرسوف تحصل في النهاية على مكتبة أخف وزناً وأكثر قابلية للإدارة.
خريطة طريق التبني للفرق
ابدأ بجزء صغير من مجموعة من المكونات ذات التأثير العالي (الأزرار، والمدخلات، والطباعة، ولوحة الألوان). شارك في الاتفاقية، وجمع التعليقات، وقم بتحسينها قبل طرحها على الآخرين.من هناك، قم بالهجرة حسب الوحدات والإصدار.
إذا كنت تبحث عن تسريع إتقانك لهذه الممارسات، ففكر في التدريب المكثف الموجه نحو المنتج. تساعد البرامج التي يدرسها متخصصون نشطون على وضع النظرية موضع التنفيذ في حالات العالم الحقيقي. دمج Figma بالفعل مع عمليات التطوير.
المفتاح لكل ما سبق هو التعامل مع التسمية باعتبارها جزءًا من التصميم، وليس باعتبارها فكرة لاحقة. بفضل وجود مسرد واضح وقواعد نحوية وهيكلية ودعم Figma AI ومتغيرات محددة جيدًا، يكتسب نظامك السرعة والتناسق وقابلية التوسع.وفريقك، خصص وقتًا جيدًا للتركيز على مشاكل المستخدمين وليس على القتال على الأسماء.
