مرجع واحد للتصميم والشيفرة
نظام التصميم هو المجموعة المشتركة من الرموز والمكوّنات والقواعد التي تُركَّب منها منتجاتك. ونبني نصفيه معاً: مكتبة في Figma للمصممين، بأشكال متعددة لكل مكوّن وتخطيط تلقائي، وحزمة مكوّنات React محددة الأنواع وموثّقة في Storybook للمهندسين. وتصل بينهما رموز الألوان والخطوط والمسافات ومستويات الارتفاع، فيبلغ التغيير الذي تُجريه مرة واحدة كل منتج.
تؤتي هذه الخدمة ثمارها حين تتشارك فرق أو منتجات عدة واجهة واحدة، أو حين يوجد الزر نفسه بخمسة أشكال متقاربة، أو حين تحتاج إلى تكييف منصة واحدة مع أكثر من علامة تجارية. نبدأ بمراجعة ما هو موجود، ونُبقي ما ينجح، ثم نبني النظام بالترتيب الذي تحتاجه خارطة طريقك، بدلاً من محاولة إنهاء كل شيء دفعة واحدة.
مراجعة الواجهات
جرد للمكوّنات والألوان وأنماط الخطوط في منتجاتك الحالية، يكشف التكرار وعدم الاتساق، ويعطي النظام قائمة بداية مرتبة بحسب الأولوية.
رموز التصميم
نعرّف الألوان والخطوط والمسافات وانحناء الزوايا والارتفاع كرموز مسماة بصيغة قياسية، ثم نحوّلها إلى متغيرات CSS وقيم لكل منصة من مصدر واحد.
مكتبة مكوّنات في Figma
مكوّنات مبنية بأشكال وخصائص وتخطيط تلقائي، تُنشر كمكتبة للفريق مع ملاحظات للاستخدام، فيركّب المصممون الشاشات بدلاً من إعادة رسمها.
مكوّنات React مبرمجة
مكوّنات محددة الأنواع تراعي إمكانية الوصول، مبنية على عناصر أساسية مختبَرة، مع دعم للوحة المفاتيح وإدارة للتركيز، ومجمّعة للنشر عبر npm، وموثّقة بأمثلة حية في Storybook.
السمات والوضع الداكن
بنية رموز بطبقات دلالية تدعم الوضع الداكن وخيارات الكثافة وسمة لكل علامة تجارية، فيتغير مظهر المنتجات التي تُقدَّم بعلامات تجارية أخرى دون نسخ المكوّنات وتفريعها.
الحوكمة والإصدارات
إدارة الإصدارات، وسجلات التغيير، وإرشادات المساهمة، واختبارات المقارنة البصرية في مسار النشر لديك، ليواصل النظام تطوره بأمان بعد نشر الإصدار الأول.
ما تتسلمه منا
- مراجعة لأنماط الواجهات الحالية
- الملفات المصدرية لرموز التصميم
- مكتبة مكوّنات منشورة في Figma
- حزمة مكوّنات React بإصدارات مرقّمة
- موقع توثيق في Storybook
- سمات فاتحة وداكنة وخاصة بالعلامة التجارية
- إرشادات المساهمة والحوكمة
- إعداد اختبارات المقارنة البصرية
طريقة عملنا
- 01
المراجعة
نجرد المكوّنات والأنماط في منتجاتك وشيفرتك، ونسأل المصممين والمهندسين عما يبطئهم، ثم نتفق على المكوّنات التي يجب أن يغطيها الإصدار الأول.
- 02
الأسس
نحدد بنية الرموز، وقواعد التسمية، وتدرج الخطوط، وأدوار الألوان، وقواعد المسافات، ثم نجرّبها على بضع شاشات حقيقية قبل أن نبني فوقها أي مكوّن.
- 03
بناء المكوّنات
نصمم كل مكوّن في Figma ونبرمجه في React ضمن الدورة نفسها، بأسماء خصائص متطابقة، وفحوص لإمكانية الوصول، واختبارات، وصفحة في Storybook يراجعها المصممون والمهندسون معاً.
- 04
الاعتماد
ننقل مع فريقك أول جزء من المنتج، وننشر الحزمة والمكتبة، ونؤتمت الإصدارات، ونسلّم إرشادات المساهمة ليتمكن فريقك من توسيع النظام بنفسه.
التقنيات التي نستخدمها
| المجال | التقنيات |
|---|---|
| التصميم | Figma، Figma Variables، Tokens Studio، FigJam |
| الرموز | Style Dictionary، W3C Design Tokens، خصائص CSS المخصصة، Tailwind CSS |
| المكوّنات | React، TypeScript، Radix UI، Storybook |
| الجودة | Chromatic، axe-core، Vitest، Testing Library، Changesets |
فرق عدة تبني المكوّنات نفسها بطرق مختلفة
لكل فريق أزراره ونوافذه المنبثقة وأنماط نماذجه، ويعيد المصممون رسم ما هو موجود أصلاً، ويعني تحديث الهوية أن تمس كل مستودع شيفرة. ما تريده مكتبة واحدة تحظى بالصيانة، يثق بها المصممون والمهندسون معاً، ومعها طريقة لتغييرها دون تعطيل المنتجات.
- منصات المؤسسات متعددة المنتجات
- واجهات منتجات البرمجيات كخدمة (SaaS) النامية
- سمات لعلامات تجارية متعددة أو لمنتجات تحمل علامات الآخرين
- تغيير الهوية عبر شاشات كثيرة
- الانتقال من مجموعات واجهات قديمة
- مكوّنات مشتركة بين الويب والجوال
أسئلة شائعة
هل نحتاج إلى نظام تصميم أم تكفينا مكتبة مكوّنات؟
مكتبة المكوّنات جزء واحد من النظام. فإذا كان فريق واحد يطلق منتجاً واحداً، فكثيراً ما تكفي مكتبة منظمة في Figma وفي الشيفرة، وسنقول لك ذلك صراحة. أما النظام الكامل فيضيف الرموز والسمات والتوثيق وإدارة الإصدارات والحوكمة، وهذه تصبح مهمة حين تعتمد فرق أو علامات تجارية عدة على الأجزاء نفسها. ونحدد حجم العمل بحسب عدد من سيستخدمه.
هل يمكنكم البناء على مكوّناتنا الحالية بدلاً من البدء من الصفر؟
نعم، وهذا ما نفضّله. تبيّن المراجعة أي المكوّنات الحالية سليم، وأيها يحتاج إلى إعادة هيكلة، وأيها يجب استبداله. ونُبقي إطار العمل وأسلوب التنسيق لديك حيث يخدمانك، ونضيف الرموز تحت المكوّنات الموجودة، وننقل أجزاء المنتج تدريجياً. ويمكن أن تتعايش المكوّنات القديمة والجديدة خلال الانتقال، فتواصل الفرق إطلاق الميزات بينما يتشكل النظام.
كيف تبقون مكتبة Figma والشيفرة متطابقتين؟
بثلاثة أمور. تُحفظ الرموز في مصدر واحد وتُصدَّر إلى متغيرات Figma وإلى الشيفرة معاً، فلا تتباعد القيم. وتتطابق أسماء المكوّنات وأشكالها وخصائصها بين Figma وReact، فتظهر الفروق بوضوح عند المراجعة. ويمر كل تغيير بعملية إصدار واحدة، مع سجل تغييرات يغطي التصميم والشيفرة معاً. كما نربط صفحات Storybook بما يقابلها في Figma.
هل تُبنى المكوّنات وفق معايير إمكانية الوصول؟
نصمم المكوّنات ونبرمجها وفق معايير WCAG 2.2 بمستوى AA. ويعني ذلك تبايناً كافياً في كل سمة، وحالات تركيز ظاهرة، وتشغيلاً كاملاً من لوحة المفاتيح، وأدواراً وتسميات صحيحة للتقنيات المساعدة، واحترام إعدادات تقليل الحركة. ونختبر بفحوص مؤتمتة، وبقارئات الشاشة يدوياً. ولا يستطيع النظام وحده أن يجعل المنتج كله متاحاً للجميع، لذلك يشرح التوثيق أيضاً طريقة الاستخدام الصحيحة.
من يتولى صيانة نظام التصميم بعد التسليم؟
الأفضل أن يتولاها فريقك، والنظام مهيأ لذلك. تتسلم المستودع، ومكتبة Figma، وأتمتة الإصدارات، وإرشادات المساهمة التي تشرح كيف يُقترح التغيير ويُراجع ويُنشر. ونعمل إلى جانب مصمميك ومهندسيك أثناء البناء ليعرفوا تفاصيله الداخلية. وإن أردت دعماً مستمراً، يمكننا أن نبقى لبناء مكوّنات جديدة وإجراء المراجعات.