تصدير رموز نظام التصميم من Figma إلى WordPress

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

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

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

تعمل العملية على النحو التالي:

1. يتم تعريف نظام التصميم في وثيقة Figma.
2. نحن نستخدم المكون الإضافي Figma Tokens لتحديد الرموز المميزة للتصميم المستخدمة في Figma.
3. باستخدام تخزين GitHub الخاص بـ Figma Token ، نقوم بتصدير الرموز المميزة إلى مستودع.
4. باستخدام أداة vip-design-system-bridge ، نقوم بإدراج رموز التصميم في WordPress عبر القسم المخصص theme.json.
5. في الكود و CSS ، نستخدم فئات WordPress المُنشأة - wp - المخصصة للإشارة إلى الرموز المميزة للتصميم.

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

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

1. قم بعمل نسخة من مثال نظام التصميم.
2. استخدم المكون الإضافي Figma Tokens لإضافة الرموز المميزة للتصميم.
3. قم بتغيير رمز اللون في Figma وتصدير الرموز المميزة الجديدة للتصميم.
4. قم بتشغيل نسخة محلية من WordPress باستخدام مدير البيئة المحلي الخاص بـ VIP لعرض نموذج WordPress النموذجي.
5. استخدم أداة vip-design-system-bridge لتحديث سمة WordPress برموز تصميم جديدة.

هذه الموارد متاحة أيضًا لمساعدتك على البدء:

• نظام مستندات تصميم بسيط في Figma بناءً على قالب Material 3 Design Kit.
• مجموعة من الرموز المميزة للتصميم تستخدم للتكامل مع رموز Figma الرمزية.
• مثال على سمة WordPress تم تكوينها لاستخدام الألوان والطباعة التي يوفرها نظام التصميم.

قم بإعداد رموز Figma

سنبدأ بسير عمل المصمم باستخدام نظام تصميم في Figma وتصدير الرموز المميزة للتصميم.

لتثبيت رموز Figma ، قم بتسجيل الدخول إلى Figma وقم بزيارة صفحة المكون الإضافي Figma Tokens. في الزاوية العلوية اليمنى ، انقر فوق الزر "جربه". في الصفحة التالية ، انقر فوق الزر "تشغيل". بمجرد التثبيت ، سيكون المكون الإضافي متاحًا للاستخدام في مستندات Figma.

1. احصل على نسخة من نظام التصميم

سنستخدم نظام تصميم صغير في Figma بناءً على نموذج Material 3 Design Kit على سبيل المثال.

1. افتح مثال نظام تصميم Figma. سنقوم بعمل نسخة محلية من هذا المستند لاستخدامها مع المكون الإضافي Figma Tokens.

2. على الجانب الأيمن من عنوان المستند ، انقر فوق السهم لأسفل وحدد "تكرار في المسودات":

3. في النافذة المنبثقة أسفل الصفحة ، انقر فوق الزر "فتح":

2. قم بتوصيل رموز Figma لتصميم الرموز المميزة

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

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

2. بعد إطلاق Figma Tokens ، حدد زر "البدء". يجب أن تشاهد مجموعة فارغة من الرموز المميزة في الصفحة التالية:

3. في الجزء العلوي من المكون الإضافي ، انقر فوق علامة التبويب "الإعدادات". ضمن قسم "Token Storage" ، انقر على زر "URL":

انقر فوق الزر "إضافة بيانات اعتماد جديدة". في حقل "الاسم" ، أدخل أي اسم (على سبيل المثال ، الرموز المميزة). في مربع URL ، أدخل عنوان URL هذا:

 https://raw.githubusercontent.com/Automattic/vip-design-system-bridge/trunk/docs/design-tokens-example/tokens.json

4. يجب أن تبدو النتيجة كما يلي:

5. ضمن "تخزين الرمز المميز" ، انقر فوق الزر "مستند محلي". في نافذة التأكيد المنبثقة ، انقر على "نعم ، تعيين إلى محلي".

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

• بعد تغيير خيار تخزين الرمز المميز إلى "مستند محلي" ، أعد تحميل الصفحة.
• أعد فتح Figma Tokens عبر قائمة البرنامج المساعد.

7. في رموز فيجما ، انتقل إلى علامة التبويب "الرموز" لعرض جميع الرموز. باستخدام مربعات الاختيار الموجودة على اليسار ، حدد مجموعات الرموز المميزة "عالمي" و "material-3-color" و "material-3-text". يجب أن تكون الآن قادرًا على عرض الرموز المميزة للكتابة والألوان في اللوحة الرئيسية:

تمثل المجموعة "العالمية" لوحة الألوان الكاملة وخيارات الطباعة المتوفرة في نظام التصميم. تحتوي مجموعة "material-3-color" على ألوان رمزية للتصميم مُسماة يستخدمها نظام التصميم ، على سبيل المثال "موضوع / ضوء / أساسي" و "موضوع / ضوء / خلفية". يحتوي "نص المادة 3" على خيارات الطباعة التي يستخدمها نظام التصميم.

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

3. تغيير رمز التصميم والتصدير

سيغطي هذا القسم تغيير رمز تصميم الخلفية إلى قيمة جديدة ، وتصدير ملف الرمز المحدّث لاستخدامه في نظام التصميم.

1. في رموز Figma ، انقر فوق مجموعة ألوان "material-3-color". بعد ذلك ، في مستند Figma ضمن قسم "Light Theme" ، حدد كتلة "Background" وشاهد أن رمز التصميم المطابق محدد في Figma Tokens:

2. في رموز فيجما ، انقر بزر الماوس الأيمن على رمز لون الخلفية وحدد "تحرير الرمز". غيّر القيمة إلى {color.error.70} (أو رمز مميز آخر للون لوحة من اختيارك) وانقر على "تحديث":

كما هو موضح أعلاه ، يجب أن تتغير كتلة لون الخلفية المحددة لتتناسب مع رمز اللون الجديد.

3. في الجزء السفلي الأيمن من المكون الإضافي Figma Tokens ، انقر فوق "تصدير". حدد "جميع مجموعات الرموز المميزة" ، ثم انتقل إلى أسفل مربع الحوار وانقر على الزر "تصدير".

ملاحظة: عند استخدام نظام تخزين رمز الإصدار مثل "GitHub" ، يمكن دفع تغييرات الرمز المميز مباشرة إلى فرع المستودع بدلاً من تنزيلها عبر المتصفح.

أدوات الإعداد لبرنامج WordPress

في الخطوتين التاليتين ، سنستخدم الرموز المميزة للتصميم المُصدَّر من Figma لتحديث سمة WordPress التي يتم تشغيلها محليًا. يتطلب استخدام هذه الأدوات بعض الخبرة مع GitHub وتشغيل الأوامر الطرفية و npm. تابع مع استخدام الأدوات التالية:
قم بتنزيل أو استنساخ نسخة من مستودع vip-design-system-bridge. يمكن لعملاء WordPress VIP أيضًا استخدام رمز WordPress الحالي مباشرةً مع تضمين نسخة من سمة الرمز المميز.

1. قم بتثبيت أداة المحطة الطرفية vip dev-env ، والتي تُستخدم لتشغيل نسخة من WordPress ومشاهدة تغييرات الرمز المميز:

 $ npm install -g @automattic/vip

ملاحظة: قد تحتاج أيضًا إلى تثبيت Node.js و Docker Desktop كمتطلبات أساسية لـ vip dev-env. راجع قسم المتطلبات الأساسية في صفحة المستندات هذه لمزيد من المعلومات.

4. قم بتشغيل نسخة محلية من WordPress

لمشاهدة تحديث الرموز المميزة للتصميم ، قم بتشغيل نسخة محلية من WordPress باستخدام npm و vip dev-env. تأكد من تثبيت VIP CLI وتنزيل نسخة من مستودع vip-design-system-bridge محليًا.

1. باستخدام مجلد مستودع التخزين vip-design-system-bridge الذي تم تنزيله محليًا ، قم بتشغيل هذه الأوامر لإنشاء موقع WordPress محلي على الويب:

 cd vip-design-system-bridge/docs/design-tokens-example vip dev-env create --multisite=false --php=8.0 --wordpress=6.1 --mu-plugins=demo --elasticsearch=false --phpmyadmin=false --xdebug=false --app-code=token-site/ --slug=token-site --title=Tokens

2. بعد اكتمال التثبيت ، قم بتشغيل هذا الأمر لبدء البيئة

 vip dev-env start --slug=token-site

يجب أن تبدو النتيجة كما يلي:

3. بعد ذلك ، قم بتنشيط سمة الرمز المميز عن طريق تشغيل:

 vip dev-env exec --slug=token-site -- wp theme activate token-theme

يجب الآن تشغيل الإصدار المحلي من WordPress مع تمكين سمة الرمز المميز الخاصة بنا.

4. قم بزيارة نسخة WordPress التي تعمل محليًا على http://token-site.vipdev.lndo.site/. يجب أن تشاهد صفحة WordPress تستخدم سمة Material 3 UI المبسطة:

5. استخدم الرموز لتحديث سمة WordPress

الآن بعد أن أصبح المظهر الافتراضي مرئيًا ، يمكننا تحديث السمة الخاصة بنا في مكانها وعرض نتائج تغييرات الرمز المميز.

انتقل إلى مستودع vip-design-system-bridge الذي تم تنزيله في محطة طرفية وقم بتثبيت تبعيات npm للبرنامج النصي لمعالجة الرمز المميز:

 cd vip-design-system-bridge/ npm install

بعد ذلك ، قم بتشغيل الأمر التالي. قم بتحديث –tokenPath لمطابقة مسار tokens.json الذي تم تنزيله في الخطوة 3:

 node ingest-tokens.js --tokenPath=~/Downloads/tokens.json --themePath=./docs/design-tokens-example/token-site/themes/token-theme --sourceSet=global --layerSets=material-3-color,material-3-text --overwrite

فيما يلي تفصيل للإشارات المستخدمة في هذا الأمر:

 –tokenPath=~/Downloads/tokens.json # The path to the tokens.json file downloaded from Figma Tokens. Change # this to match the path of the tokens.json file downloaded in step 3. --themePath=./docs/design-tokens-example/token-site/themes/token-theme # The path to the WordPress theme folder that'll receive the updated tokens --sourceSet=global # Use the tokens in the “global” set as a source. Source sets are excluded # from the output, but can still be referenced by other token sets. This # option is used to avoid including the whole color palette and typography # choices in the resulting tokens. --layerSets=material-3-color,material-3-text # Use the “material-3-color” and “material-3-text” token sets to produce the # final output. All tokens included in these sets will be available to # WordPress.

عند تشغيل الأمر أعلاه ، يجب أن ينتج هذا الإخراج:

 Using source and layer sets for tokens (source: global, layers: material-3-color, material-3-text) ︎ Processed with token-transformer wordpress-theme-json ︎ src/build/tokens.json ︎ Processed with Style Dictionary ︎ Wrote theme file: ~/vip-design-system-bridge/docs/design-tokens-example/token-theme/theme.json

الآن وقد تم تحديث الرموز المميزة في WordPress ، قم بزيارة http://token-site.vipdev.lndo.site/ أو قم بتحديث الصفحة. يجب أن ترى أن لون الخلفية قد تغير إلى قيمة الرمز المعين في Figma:

ختاماً

لقد أظهرنا العملية الشاملة لإنشاء مصدر واحد للحقيقة لنظام التصميم ودفعهم إلى قالب WordPress. ومع ذلك ، هناك موضوعات مهمة ومعقدة لم يتم تناولها في هذا المنشور ، مثل عملية إنشاء الرموز المميزة لـ Figma Tokens ، وتصميم قالب قالب WordPress يمكنه الاستفادة من هذه الرموز المميزة.

ومع ذلك ، نأمل أن يوفر هذا عملية مفيدة لأولئك الذين يتصارعون مع تطبيق نظام التصميم في WordPress ، ويمكن استخدام رمز المثال كمكان بداية.

لموضوعات نظام التصميم ذات الصلة ، راجع هذه الموارد:

المكون الإضافي لـ Figma Tokens - الشروع في العمل.

المؤلفون

أليك جياتش ، مطور برامج أول في شركة Automattic

مطور ووردبريس Enterprise WordPress وعشاق أنظمة التصميم الذين يعيشون في تايبيه ، تايوان.

جوبال كريشنان ، مطور برامج أول في شركة Automattic

يعمل Gopal على عرض WordPress المنفصل لـ WordPress VIP ، مع الاهتمام بأنظمة التصميم و Gutenberg. يقيم في سيدني بأستراليا وانتقل مؤخرًا من كندا.