كود المنصات figma · ما الذي يضمه ملف التصميم

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

figma ثاني أكثر ما يُضاف إلى اسم كود المنصات في البحث تكرارًا، بعد pdf مباشرةً. والباحث هنا غالبًا مصمم يريد أن يبدأ من الأصل الرسمي بدل أن يعيد رسم ما هو مرسوم.

هيئة الحكومة الرقمية تنشر ملف توضيح المعايير على figma، وهو المرجع المصوَّر لما يُقاس في كل معيار:

ملف توضيح معايير كود المنصات على figma

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

ولمن يريده مغلقًا يفتحه دون اتصال، جمعناه في كود المنصات pdf.

الملف يضم مكوّنات النظام بحالاتها لا بأشكالها الساكنة، وهذا هو الفرق الذي يقرر النتيجة:

1. التصميم الأساسي دون تعديل: الشكل والحواف واللون والمسافات
2. الحالات التفاعلية: الافتراضية والتمرير والضغط والتركيز والتعطيل
3. الحالات السياقية: الاختيار والتحديد والتشغيل والإيقاف والتوسيع
4. مجموعة القيم المعتمدة: الألوان والمسافات وأنماط الخط ومقاسات الأيقونات

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

ما وراء ملف واحد

أصول التصميم ليست ملفًا مفردًا، بل مجموعة ملفات يخدم كل منها غرضًا: المكوّنات، والقوالب، والقيم المعتمدة، والأيقونات، وأصول الهوية.

ومكتبة الأيقونات المعتمدة خارجية واسعة، تضم عشرات الآلاف من الأيقونات. ولذلك ينص معيار ٦ على استعمالها دون استبدال، وعلى ألا يُعدَّل حجم الأيقونة ولا لونها بعد استدعائها.

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

أنفع ترتيب للقراءة ليس من أوله إلى آخره:

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

افتحوا حالات المكوّن الواحد كاملة قبل الانتقال إلى غيره. المكوّن ليس شكلًا، بل شكل ودورة حالات.

قيسوا المقاسات ولا تقدّروها. نصف القطر والمسافة الداخلية وارتفاع الحقل ومساحة اللمس أرقام في الملف، وأي تقدير بصري لها ينحرف.

الملف الصحيح لا يضمن منصة مطابقة.

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

وهذا ما يفسّر أرقام القياس: في عيّنة من المنصات الحكومية بلغت ٢٩ منصة، بلغ التطبيق الجزئي في الأزرار ٧٩٪ والتطبيق الكلي ٠٪. الشكل موجود، والمواصفة غير مطابقة.

والنمط نفسه يتكرر في كل مكوّن تقريبًا: القائمة المنسدلة والبطاقة ومسار التصفح عند ١٠٠٪ تطبيق جزئي و٠٪ تطبيق كلي.

الفجوة بين الملف والمنصة تُغلق في التسليم لا في المراجعة:

1. سلّموا اسم المكوّن ومتغيّره، لا لقطة له. اللقطة تُعاد رسمها، والاسم يُستدعى
2. سلّموا الحالات كلها، لا الحالة الافتراضية وحدها
3. سلّموا القيمة باسم متغيّرها لا برقمها، فالرقم يُنسخ يدويًا ثم يتقادم
4. راجعوا التنفيذ على الملف لا على التصميم المصدَّر منه

الخطر الأكثر شيوعًا في التعامل مع الملف هو فصل المكوّن عن مكتبته (Detach) ثم تعديله. والمكوّن المفصول يبدو صحيحًا اليوم، ولا تصله تحديثات النظام أبدًا. وتحذّر الهيئة من ذلك في ورشها، وتشبّه المكوّنات بقطع الليغو: ابنوا بها ما شئتم، ولا تعدّلوا القطعة.

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

للصورة الكاملة اقرأوا الدليل الشامل لكود المنصات، ولمعرفة ما إذا كان ما نُفّذ يطابق ما صُمّم ابدأوا فحصًا.