design toolsJune 30, 20269 min read

أصبحت رموز التصميم الخاضعة للتحكم بالإصدارات ممارسة معيارية

أصبحت رموز التصميم تُراجَع الآن عبر طلبات السحب (pull requests)، وتُقارَن دلاليًا، وتُشحَن مع سجلات تغييرات، تمامًا كما يشحن المهندسون الكود عبر المنصات.

By Boone
XLinkedIn
design tokens version controlled

لم يعد رمز التصميم (design token) مجرد قيمة تُصدَّر ثم تُنسى. بل أصبح تغييرًا في المنتج خاضعًا للإصدارات، يمر عبر فرع (branch)، وطلب سحب (pull request)، ومراجعة، وسجل تغييرات، تمامًا كما يشحن المهندسون الكود. وقد تحوّل هذا التحول الهادئ إلى ضجة عندما بدأ المصممون بنشر طلبات سحب حقيقية لتعديلات لوحة الألوان: تغيير رمز لون، مراجعته في طلب سحب (PR)، الموافقة عليه، دمجه، وإصداره مع إدخال في سجل التغييرات.

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

ماذا تعني "الرموز الخاضعة للتحكم بالإصدارات" فعليًا

يعني ذلك أن رموزك تعيش في مستودع (repository)، لا في ملف Figma فقط. تُخزَّن قيم الألوان والمسافات والخطوط ونصف القطر (radius) والحركة كبيانات منظمة يمكن لنظام التحكم بالإصدارات تتبعها سطرًا بسطر.

والمحفّز هنا هو Tokens Studio. تتيح لك Tokens Studio تعديل الرموز داخل Figma، ثم مزامنة مجموعة الرموز تلك مع مستودع على GitHub. وفي اللحظة التي تصبح فيها رموزك داخل مستودع، يتحول كل تغيير إلى commit، ويتحول كل تغيير مقترح إلى pull request، ويتحول كل إصدار إلى نسخة موسومة (tagged version) لها تاريخ يمكنك قراءته.

Tokens Studio، "أنظمة تصميم، مؤتمتة بالكامل"، الأداة التي تُزامن رموز Figma الخاصة بك مع مستودع على GitHub بحيث يصبح كل تغيير commit قابلًا للمراجعة.
Tokens Studio، "أنظمة تصميم، مؤتمتة بالكامل"، الأداة التي تُزامن رموز Figma الخاصة بك مع مستودع على GitHub بحيث يصبح كل تغيير commit قابلًا للمراجعة.

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

التحول: تعديل رمز واحد أصبح الآن تغييرًا في الإنتاج

وهنا الجزء الذي يعيد صياغة كل شيء. الرمز مشترك بحكم تعريفه. والسبب الكامل وراء جعلك color.brand.primary رمزًا بدلًا من قيمة hex متناثرة عبر الشاشات هو أن تعديلًا واحدًا سيحدّث كل مكان يستهلكه.

وهذه القوة الخارقة هي نفسها الخطر. ففي اللحظة التي تعدّل فيها ذلك الرمز، تكون قد اقترحت تغييرًا على كل زر ورابط وشارة وحالة عبر الويب وiOS وAndroid. لا وجود لـ"هذه الشاشة فقط". وStyle Dictionary، خطوة البناء (build step) التي تقرنها معظم الفرق برموزها، تُجمِّع مجموعة الرموز المدموجة إلى مخرجات لكل منصة، بحيث يتحول تعديل واحد إلى إصدار متعدد المنصات.

مصدر رموز واحد يُجمَّع إلى كل منصة: يحوّل Style Dictionary مجموعة رموز مدموجة واحدة إلى مخرجات للويب وiOS وAndroid، بحيث يتحول تعديل واحد إلى إصدار متعدد المنصات.
مصدر رموز واحد يُجمَّع إلى كل منصة: يحوّل Style Dictionary مجموعة رموز مدموجة واحدة إلى مخرجات للويب وiOS وAndroid، بحيث يتحول تعديل واحد إلى إصدار متعدد المنصات.

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

دليل التحكم بالإصدارات، مُطبَّقًا على الرموز

هذا هو الجدول الذي يستحق الحفظ. فكل ممارسة يستخدمها المهندسون لشحن الكود بأمان لها الآن ما يقابلها بشكل واضح في رموز التصميم.

ممارسة برمجيةالمقابل في الرموز
Branch (فرع)نسخة عمل من مجموعة الرموز تعدّل فيها لوحة الألوان دون لمس الإنتاج
Pull request (طلب سحب)تغيير الرمز المقترح، مفتوحًا للمراجعة قبل دمجه
Code review (مراجعة الكود)موافقة قائد أنظمة التصميم على تغيير العينة أو المسافة أو نوع الخط ونطاق تأثيره
Semantic version (إصدار دلالي)ترقية إصدار الرمز حتى يعرف المستهلكون ما إذا كان تصحيحًا (patch) أو تحديثًا طفيفًا (minor) أو تغييرًا كاسرًا (breaking change)
Changelog (سجل التغييرات)السجل المقروء بشريًا لما تغيّر، ولماذا، وأي المنصات يطاله
Continuous integration (التكامل المستمر)تجميع Style Dictionary للرموز المدموجة إلى الويب وiOS وAndroid تلقائيًا عند الدمج

وهذا التطابق ليس مجرد ظرافة. فكل صف يحل نمط فشل حقيقي.

الفروع توقف تسرّب تجارب لوحة الألوان غير المكتملة إلى الإنتاج. والمراجعات ترصد مشكلة "لقد أغمقتُ لون العلامة التجارية وكسرتُ التباين في ثلاث حالات" قبل أن يراها المستخدمون. والترقيم الدلالي (semantic versioning) يخبر فرق التطبيقات ما إذا كان بإمكانها سحب تحديثك يوم جمعة أو يجب أن تخطط له.

GitHub، الركيزة التي تعتمد عليها الرموز الآن للتحكم بالإصدارات، حيث الفروع وطلبات السحب والمراجعات والإصدارات وسجلات التغييرات مُختبَرة بالفعل في المعارك من قبل كل فريق هندسي.
GitHub، الركيزة التي تعتمد عليها الرموز الآن للتحكم بالإصدارات، حيث الفروع وطلبات السحب والمراجعات والإصدارات وسجلات التغييرات مُختبَرة بالفعل في المعارك من قبل كل فريق هندسي.

كيف تبدو المقارنة الدلالية (semantic diff) للوحة الألوان

تُظهر المقارنة الدلالية ما يعنيه تغيير الرمز فعليًا، لا فقط أي حروف تغيّرت. فمقارنة git الخام (raw git diff) تخبرك أن #ff6b3d أصبحت #ff6434. أما المقارنة الدلالية فتخبرك أن اللون الأساسي للعلامة التجارية أصبح أكثر تشبعًا قليلًا، وأنه يؤثر الآن على 14 مكوّنًا، وأن القيمة الجديدة تنخفض دون عتبة التباين لديك في حالة التعطيل (disabled state).

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

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

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

لماذا يحدث هذا الآن

اصطفت ثلاثة أمور:

  • Tokens Studio جعلت الرحلة ذهابًا وإيابًا بين Figma وGitHub عملية، بحيث لم يعد المصممون بحاجة إلى مهندس لوضع الرموز في مستودع.
  • Style Dictionary نضجت كطبقة بناء تحوّل مصدر رموز واحدًا إلى مخرجات خاصة بكل منصة، وهذا ما يجعل الدمج إصدارًا فعليًا.
  • GitHub كانت موجودة دائمًا كركيزة، بفروعها وطلبات السحب والمراجعات والإصدارات وسجلات التغييرات المُختبَرة بالفعل في المعارك من قبل كل فريق هندسي على وجه الأرض.

والمحرك الآخر هو الحجم. فمنصات مثل Supernova حوّلت إدارة وتوزيع الرموز عبر منتجات متعددة إلى منتج قائم بذاته، وهو النوع من الأدوات التي لا تلجأ إليها إلا عندما تغذي لوحة ألوانك أكثر من تطبيق واحد. وبمجرد أن تخدم مجموعة الرموز الويب بالإضافة إلى تطبيقين أصليين (native) بالإضافة إلى موقع تسويقي، تتوقف عبارة "لقد عدّلت ملف Figma" عن كونها جملة آمنة.

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

وجهة النظر المضادة الصادقة (مسرحية design-ops حقيقية)

لا تحتاج معظم الفرق إلى كامل مراسم git-flow من أجل لوحة ألوانها. فإذا كنت استوديو من ثلاثة أشخاص يشحن منتجًا واحدًا، فإن تغليف كل تعديل لون بفرع وطلب سحب وموافقتين وترقية إصدار دلالي هو تقمّص لعملية (process cosplay). أنت تدفع تكلفة هندسية إضافية للحماية من نطاق تأثير لا تملكه أصلًا.

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

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

كيف تضع رموزك تحت التحكم بالإصدارات

ابدأ بالقرار، لا بالأدوات. أصدِر (version) الرموز التي تُشحَن إلى أكثر من مكان واحد وتكسر الأشياء عند تغييرها. واترك الباقي في Figma حيث ينتمي.

إذا تجاوزت ذلك الخط، فالإعداد قصير:

  1. انقل مجموعة رموزك إلى Tokens Studio داخل Figma بحيث تصبح القيم بيانات منظمة، لا أنماطًا فضفاضة.
  2. زامِن تلك المجموعة مع مستودع على GitHub. الآن أصبح كل تغيير commit وكل اقتراح pull request.
  3. أضف Style Dictionary كخطوة بناء بحيث يُجمِّع الدمج الرموز إلى الويب وiOS وAndroid تلقائيًا.
  4. حدّد قاعدة المراجعة الخاصة بك. من يجب أن يوافق على تغيير الرمز قبل دمجه، وما الذي يُعدّ كاسرًا (breaking).
  5. اكتب سجل التغييرات أولًا بأول. سطر واحد لكل تغيير: ما الذي تغيّر، ولماذا، وأي المنصات.

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

مدير رموز التصميم في Supernova، جدول حقيقي لرموز الألوان الدلالية يضم القيم والمتغيرات الداكنة وأسماء متغيرات CSS، النهاية المُنتَجة للرموز الخاضعة للإصدارات عبر المنتجات.
مدير رموز التصميم في Supernova، جدول حقيقي لرموز الألوان الدلالية يضم القيم والمتغيرات الداكنة وأسماء متغيرات CSS، النهاية المُنتَجة للرموز الخاضعة للإصدارات عبر المنتجات.

استخدم هذه القاعدة لتحديد مكان كل رمز.

الموقفأين يجب أن يعيش الرمز
يغذي منتجًا واحدًا، مالكًا واحدًا، ونطاق تأثير منخفضFigma، دون الحاجة إلى مراسم pull request
يغذي منصات أو منتجات متعددةمستودع، مع مراجعة وسجل تغييرات
تغييره يمكن أن يكسر التباين أو التخطيط أو العلامة التجاريةمستودع، مع موافقة إلزامية
تجريبي أو محصور بشاشة واحدةFigma، لا تُصدِره (version)

الأسئلة الشائعة

هل تحتاج الفرق الصغيرة إلى رموز خاضعة للتحكم بالإصدارات؟

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

ما الفرق بين Tokens Studio وStyle Dictionary؟

Tokens Studio هي المكان الذي تعدّل فيه الرموز وتزامنها، بربط Figma بمستودع على GitHub بحيث تصبح التغييرات طلبات سحب. أما Style Dictionary فهي خطوة البناء التي تُجمِّع الرموز المدموجة إلى مخرجات لكل منصة. إحداهما تتولى التأليف والمراجعة، والأخرى تتولى التوزيع.

هل يمكنك إصدار الرموز دون GitHub؟

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

ما هي المقارنة الدلالية (semantic diff) لرمز تصميم؟

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

هل يحل هذا محل حكم المصمم لديك؟

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

الخلاصة (أصدِر ما يُشحَن)

هذا التحول حقيقي. فقد حوّلت Tokens Studio وStyle Dictionary وGitHub مجتمعةً رمز التصميم من تصدير ثابت إلى تغيير منتج خاضع للإصدارات، له فروع ومراجعات ومقارنات دلالية وسجل تغييرات. وعندما يمكن لتعديل واحد أن يُصدَر إلى كل منصة دفعة واحدة، فإنه يستحق حواجز الأمان نفسها التي يستخدمها المهندسون بالفعل.

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

Need a design system that ships across platforms without breaking? Brainy builds them.

Get Started

More from Brainy Papers

Keep reading