متغيرات Figma لتوليد الكود بالذكاء الاصطناعي — لماذا تهمّ وما تفعله بدونها

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

لتوليد الكود بالذكاء الاصطناعي، المتغيرات ليست مفيدة فحسب. إنها الآلية التي تحوّل ملف Figma من نموذج أولي مثالي البكسل إلى مواصفة يمكن لوكيلك تنفيذها بشكل صحيح. حين يكون للون اسم — color/brand/primary لا #7F5CFE — يمكن للوكيل تعيينه إلى رمز كود وتنفيذ الوضع الداكن بشكل صحيح وإنتاج كود يشارك في نظام تصميمك الفعلي.

المشكلة: معظم ملفات Figma النشطة اليوم لا تحتوي متغيرات مُعدَّة. تتعامل figmascope مع كلتا الحالتين. يوضّح هذا المقال كيف.

ما هي المتغيرات فعلاً

متغير Figma هو قيمة مفردة مُسمَّاة مرتبطة بمجموعة. المجموعات تُنظِّم المتغيرات حسب الوضع — "فاتح" و"داكن" هما المثال الكلاسيكي. كل متغير في مجموعة يمكن أن يحتوي قيماً مختلفة لكل وضع: color/surface/background هو #FFFFFF في الفاتح و#0D0D0D في الداكن. الارتباط يتوسّع: كل تعبئة تُشير إلى color/surface/background تتحدث حين تبدّل الأوضاع.

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

تعرض Figma المتغيرات عبر REST API كمجموعة localVariables. كل متغير له معرّف واسم ونوع وقيم لكل وضع. خصائص المكوّنات التي تُشير إلى المتغيرات تحمل حقل boundVariables مع معرّف المتغير. هذه بيانات منظَّمة تنتقل بسلاسة عبر خط أنابيب الاستخراج.

المسار السعيد: المتغيرات موجودة

حين يحتوي ملف Figma متغيرات، تقرأها figmascope من API وتبني tokens.json وفق هيكل متوافق مع W3C Design Tokens Community Group. كل رمز له $value و$type. رموز الألوان تحصل على قيم hex مع alpha اختيارية. رموز التباعد تحصل على قيم رقمية مع تلميح وحدة px. اسم الرمز يتبع مسار اسم المجموعة والمتغير:

{
  "color": {
    "brand": {
      "primary": { "$value": "#7F5CFE", "$type": "color" }
    },
    "surface": {
      "background": { "$value": "#FFFFFF", "$type": "color" }
    }
  },
  "spacing": {
    "4": { "$value": 4, "$type": "number" },
    "8": { "$value": 8, "$type": "number" },
    "16": { "$value": 16, "$type": "number" }
  }
}

حين يُبنى IR لكل شاشة، كل تعبئة كانت تحتوي مرجع boundVariables تحصل على اسم الرمز بدلاً من الـ hex المحلول. تحمل العقدة:

"fills": [{ "type": "SOLID", "tokenRef": "color/brand/primary" }]

ليس #7F5CFE. اسم الرمز. يقرأ الوكيل هذا ويُولِّد background-color: var(--color-brand-primary) أو Color.brandPrimary أو أياً كان نمط استهلاك الرموز في إطار العمل الهدف. هذا هو الإخراج الذي تريده: كود مرتبط بنظام تصميمك، لا كود سيتكسّر فور تحديث مصمّم لون.

التسمية الدلالية هي الفرق بين الكود الذي يتقادم جيداً والكود الذي ينحرف. قيمة hex في المصدر مسؤولية؛ مرجع رمز هو عقد. المتغيرات هي ما يجعل ملفات Figma قادرة على التعبير عن عقود لا مجرد بكسلات.

الواقع: معظم الملفات لا تحتوي متغيرات

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

صُمِّمت figmascope لتكون مفيدة لتلك الملفات أيضاً. تتراجع بلطف: حين تغيب المتغيرات، تعود إلى الاستنتاج بالتكرار.

الاحتياطي: الاستنتاج بالتكرار

تعمل خوارزمية الاستنتاج هكذا:

1. سِر عبر كل عقدة leaf في كل إطار مُصدَّر.
2. اجمع جميع ألوان التعبئة وقيم التباعد وأنصاف الأقطار.
3. عُدّ تكرارات كل قيمة فريدة.
4. القيم التي تظهر فوق عتبة التكرار تُرفَّع إلى رموز مستنتجة.
5. كل رمز يحصل على اسم مشتق من القيمة: color.7f5cfe، spacing.16، radius.8.

tokens.json المُخرَج يبدو هيكلياً مشابهاً لمسار المتغيرات، لكن الأسماء مشتقة من القيمة لا دلالية:

{
  "color": {
    "7f5cfe": { "$value": "#7F5CFE", "$type": "color" },
    "f6f2ea": { "$value": "#F6F2EA", "$type": "color" }
  },
  "spacing": {
    "16": { "$value": 16, "$type": "number" },
    "8": { "$value": 8, "$type": "number" }
  }
}

في IR، العقد التي تستخدم هذه القيم تحصل على مراجع رموز: "tokenRef": "color.7f5cfe". ليس قيماً حرفية مُرمَّزة. مراجع — لكن إلى رموز مستنتجة لا مُسمَّاة.

لا يزال الوكيل يُولِّد كوداً مُشاراً إلى الرموز. var(--color-7f5cfe) ليس بقراءة var(--color-brand-primary)، لكنه لا يزال رمزاً — يمكنك البحث عنه واستبداله وإعادة تسميته ومراجعة استخدامه. إنه مقبض مُسمَّى على قيمة لا رقم سحري.

حقل tokensSource

كل حزمة figmascope تحتوي _meta.json يوثّق ما في الحزمة وكيف أُنتجت. حقل tokensSource له ثلاث قيم محتملة:

• figma-variables — المتغيرات موجودة وتم استخدامها. أسماء الرموز دلالية.
• inferred-from-frequency — لا متغيرات وُجدت. الرموز مستنتجة من تكرار القيم. الأسماء مشتقة من القيم.
• none — لا يمكن استخراج أو استنتاج رموز. يستخدم IR القيم المحلولة مباشرةً.

يهمّ هذا لأنه يُخبر الوكيل المستهلك (والمطوّر الذي يقرأ الحزمة) بمدى الثقة في أسماء الرموز. حزمة figma-variables هي مصدر الحقيقة لنظام تصميمك. حزمة inferred-from-frequency هيكل داربة مفيد يحتاج مراجعة مصمّم للتسمية قبل أن يكون أساسياً. حزمة none هي نقطة بداية بقيم مُرمَّزة تحتاج ترميزاً لاحقاً.

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

لماذا استنتاج التكرار أفضل من لا شيء

البديل للاستنتاج بالتكرار هو إخراج قيم حرفية محلولة في كل مكان — #7F5CFE في كل عقدة تعبئة تستخدم ذلك اللون. هذا يُنتج كوداً أصعب في إعادة الهيكلة وأصعب في المراجعة وأصعب في الربط بنظام تصميم حين يُضاف في نهاية المطاف.

استنتاج التكرار على الأقل يستخرج مجموعة القيم التي يستخدمها التصميم فعلاً. إذا ظهر #7F5CFE 47 مرة عبر التصميم، هذا إشارة: هذا لون أساسي لا لهجة. اسم الرمز لا يعرف ذلك — إنه مجرد color.7f5cfe — لكن بيانات التكرار تروي القصة. وكيل مُعطى الرموز المستنتجة يمكنه التخمين بشكل معقول حول أي القيم أساسية وأيها مفردة.

بشكل أكثر عملية: يمنحك استنتاج التكرار tokens.json قابلاً للمقارنة عبر الإصدارات. إذا صدَّرت نفس الملف مرتين بعد أن غيّر مصمّم لوناً متكرراً، يُظهر الـ diff تغيّر قيمة الرمز. بدون الاستنتاج، ستطارد كل تغيير حرفي فردي منتشر عبر ملفات IR متعددة.

ما يجب على المصمّمين فعله

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

تفتح المتغيرات أيضاً التسمية في الحزمة: قيم وضع متعددة لكل رمز. ملف بأوضاع فاتح/داكن يُنتج tokens.json بقيم لكل وضع تغذّي مباشرةً خصائص CSS المخصصة مع تجاوزات استعلام الوسائط، أو كائنات سمة خاصة بالمنصة. هذا مستحيل الاستنتاج من لقطة تصميم واحدة — يتطلب نية مصمّم صريحة معبَّراً عنها بالمتغيرات.

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

خط أنابيب الرموز بالكامل

لجعل هذا ملموساً، هذا هو ترتيب الحل الكامل الذي تستخدمه figmascope لكل تعبئة في IR:

1. هل تحتوي العقدة مرجع boundVariables.fills؟ إذا نعم، احلّه إلى اسم المتغير وقيمة الوضع الصفري. مصدر الرمز: figma-variables.
2. هل القيمة المحلولة موجودة في رموز التكرار المستنتجة (فوق العتبة)؟ إذا نعم، عيِّنها إلى اسم الرمز المستنتج. مصدر الرمز: inferred-from-frequency.
3. وإلا: استخدم قيمة hex المحلولة مباشرةً. لا مرجع رمز. مصدر الرمز: none.

الخطوات تُجرَّب بالترتيب. المصدر الأعلى جودة يفوز. حقل tokensSource في _meta.json يعكس المسار السائد للحزمة ككل.

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

صدِّر حزمتك من تطبيق figmascope لترى أي tokensSource يُنتجه ملفك. ثم استخدم الحزمة مع Claude Code أو Cursor لتوليد كود دقيق ومُشار إلى الرموز.