حين يبحث المطورون عن "Figma inspector"، يريدون عادةً أحد أمرين: طريقة لرؤية قيم الخصائص على العقد دون الحاجة إلى مقعد Dev Mode، أو طريقة لتغذية محتوى Figma لوكيل ذكاء اصطناعي. الفئة الأولى تخدمها الإضافات جيدًا. الفئة الثانية لا تخدمها كاد أي أداة — حتى جاء figmascope.

تقارن هذه المقالة بين الفئتين، وتشرح سبب حلهما لمشكلتين مختلفتين، وتُظهر كيف يبدو التصدير الموجه للوكيل في الممارسة الفعلية. توجه إلى figmascope.dev لتجربة التصدير بنفسك، أو تابع القراءة للمقارنة الكاملة. للحصول على سير العمل العملي، اطلع على Figma إلى Cursor أو Figma إلى Claude Code.

ما تفعله أدوات "Figma inspector" فعليًا

أداة فحص Figma الكلاسيكية هي اللوحة اليمنى في واجهة Figma الخاصة. اختر عقدة: ترى تعبئتها وحدودها وتأثيراتها وأبعادها وقيودها وطباعتها. في Dev Mode (أُضيف في 2023)، تحصل هذه اللوحة على مقتطفات كود — خصائص CSS مستنتجة من العقدة، والتخطيط التلقائي معبرًا عنه كـ flexbox، وألوان بأسماء متغيراتها إذا كانت Variables معدة.

الإضافات مثل Inspect وFigma to Code وAnima وعشرات غيرها تمد هذا أبعد. بعضها يولّد مقتطفات React أو SwiftUI من العقد المحددة. بعضها يُصدّر ملفات CSS. بعضها يشرح اللوحة لمراجعات التسليم.

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

لماذا لا يعمل هذا النموذج لوكلاء الذكاء الاصطناعي

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

هناك أيضًا مشكلة التنسيق. ينتج Dev Mode مقتطفات CSS قريبة من الصحيح ولكن ليست دقيقة تمامًا — أسماء الخصائص تختلف بين الأطر، والخصائص المختصرة تحتاج إلى تمديد، والقيم المطلقة بالبكسل تحتاج إلى تعيين إلى نظام الرموز الخاص بك. وكيل يستهلك ناتج Dev Mode الخام سيُعيد اختراع أسماء الرموز، ويخترع قيم المسافات، وينتج كودًا يبدو كأنه صُمم من شخص رأى تصميمك مرة واحدة.

أدوات الفحص تجيب على "ما هذه العقدة؟" وأدوات الوكيل تجيب على "ما هذه الشاشة كاملة، بتنسيق يمكن للنموذج التفكير فيه؟"

figmascope كبديل لـ Figma inspector

figmascope ليست لوحة داخل Figma. تعمل في متصفحك، تتواصل مباشرة مع Figma REST API، وتُصدّر حزمة سياق — ملف zip منظم يحتوي على كل ما يحتاجه وكيل الذكاء الاصطناعي لتطبيق التصميم. يُوثَّق تنسيق الرموز بالتفصيل في تصدير رموز التصميم لوكلاء الذكاء الاصطناعي، وفلسفة التسليم الأشمل مُغطاة في تسليم التصميم للذكاء الاصطناعي.

يتضمن التصدير:

مقارنة مباشرة

الإمكانية Figma Dev Mode إضافات الفحص figmascope
قيم خصائص عقدة واحدة نعم نعم لا (ليس الهدف)
تصدير شجرة تخطيط كاملة للشاشة لا جزئي نعم — screens/*.json
JSON رموز تصميم مكتوبة لا بعض الإضافات نعم — tokens.json
مستند مواصفة لوكيل الذكاء الاصطناعي لا لا نعم — CONTEXT.md
نصوص مجمّعة بمفاتيح لا لا نعم — strings.json
مخزون المكونات جزئي جزئي نعم — components/inventory.json
عروض مرجعية تصدير يدوي لا نعم — screens/*.png (2×)
استنتاج تكرار الرموز لا لا نعم — احتياطي للملفات بلا Variables
يتطلب مقعد Figma مقعد Dev Mode مطلوب يختلف لا — PAT فقط
الخصوصية / بلا رفع البيانات تُعالج بواسطة Figma يختلف حسب الإضافة من جانب العميل، الرمز لـ api.figma.com فقط

Figma Dev Mode — ما يُتقنه وما يقصر فيه

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

أين يقصر لسير عمل الذكاء الاصطناعي:

إضافات Figma Inspector — المشهد العام

هناك ثلاث فئات تقريبًا من إضافات Figma inspector:

  1. عارضو الخصائص — يُكرّرون ما تُظهره اللوحة اليمنى في Dev Mode، غالبًا لمستخدمي الخطة المجانية الذين ليس لديهم وصول Dev Mode. أمثلة: Figma Inspect، Handoff.
  2. مولّدو الكود — ينتجون كودًا خاصًا بإطار عمل من العقد المحددة. أمثلة: Figma to Code، Anima، Locofy. تولّد هذه الكود من التحديد الفردي، لا من تصدير منظم للملف كاملاً.
  3. مُصدِّرو الرموز — يُصدّرون رموز التصميم من Figma Variables. أمثلة: Tokens Studio (المعروف سابقًا بـ Figma Tokens)، Variables2JSON. تحل هذه مشكلة تصدير الرموز لكن ليس مشكلة IR التخطيط أو مواصفة الوكيل.

figmascope ليست في أيٍّ من هذه الفئات. هي أقرب روحًا إلى فئة "مُصدِّر الرموز"، لكنها تحل مشكلة أوسع: إنتاج السياق المنظم الكامل الذي يحتاجه وكيل الذكاء الاصطناعي لتطبيق شاشة كاملة بشكل صحيح.

اطلع على figmascope مقابل إضافات Figma لتفصيل أشمل لمشهد الإضافات.

متى تستخدم ماذا

هذه الأدوات ليست حصرية بعضها لبعض. سير عمل واقعي:

الفرق هو الفحص المتزامن (بشر يقرأ عقدة في كل مرة) مقابل التصدير الدُفعي (الوكيل يحصل على الصورة كاملة في مستند منظم واحد).

PAT — ما يصل إليه وما لا يصل

تستخدم figmascope Figma Personal Access Token لقراءة الملف عبر REST API. يُدخل الرمز في متصفحك، يعيش في ذاكرة المتصفح طوال الجلسة، ويُرسل فقط كرأس إلى api.figma.com. لا خادم يستقبله. عند إغلاق التبويب، يختفي.

النطاق الأدنى المطلوب هو محتوى الملف: للقراءة فقط. figmascope لا تكتب إلى Figma، لا تُنشئ تعليقات، لا تصل إلى ملفات الفريق بما يتجاوز ما يملك الرمز إذنًا لقراءته. اطلع على أمان PAT وfigmascope لنموذج التهديد الكامل.

كيف يبدو الناتج في مشروع حقيقي

بعد التصدير، تجلس حزمة السياق جنبًا إلى جنب مع كودك المصدري:

myapp/
├── src/
│   ├── screens/
│   └── components/
├── design/
│   ├── CONTEXT.md          ← الوكيل يقرأ هذا أولًا
│   ├── tokens.json         ← رموز تصميم مكتوبة
│   ├── _meta.json          ← بيان التصدير والتحذيرات
│   ├── components/
│   │   └── inventory.json  ← أسماء المكونات الأساسية + معرفاتها
│   ├── screens/
│   │   ├── Home.json       ← IR التخطيط
│   │   ├── Home.png        ← عرض 2×
│   │   ├── Profile.json
│   │   └── Profile.png
│   └── strings.json        ← كل نصوص UI، مفاتيح بتدوين النقطة
└── package.json

هذا هو المنتج الذي تلتزمه، وتُشير إليه في CLAUDE.md أو .cursorrules، وتوجه وكيلك نحوه. تصدير واحد، كل السياق الضروري.

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

الإشارة إلى الحزمة في ملف إعداد الذكاء الاصطناعي لمشروعك

Claude Code يقرأ CLAUDE.md في بداية الجلسة. Cursor يقرأ .cursorrules. كلاهما يدعم ملف تعليمات على مستوى المشروع يُوجّه الذكاء الاصطناعي قبل أن يفعل أي شيء. أضف قسم تصميم قصيرًا يُشير إلى مجلد design/:

# For CLAUDE.md (Claude Code)
## Design context

All design data is in `design/`. Before implementing any UI:
1. Read `design/CONTEXT.md` for scope and token conventions
2. Use `design/tokens.json` for all color, spacing, radius, and typography values
3. Use `design/components/inventory.json` for canonical component names
4. Use `design/strings.json` for all UI copy — reference by dot-notation key
5. Validate against `design/screens/*.png` renders
# For .cursorrules (Cursor)
Always read design/CONTEXT.md before implementing UI.
Token values are in design/tokens.json — never hardcode colors or spacing.
Component names come from design/components/inventory.json.
UI strings come from design/strings.json with dot-notation keys.

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

بديل MCP — ولماذا ليس الشيء ذاته

يتيح خادم Model Context Protocol (MCP) الخاص بـ Figma لذكاء اصطناعي الاتصال مباشرة بـ Figma API والاستعلام عن العقد عند الطلب. هذا مفيد للعمل الاستكشافي — سؤال "ما لون هذا الزر؟" في محادثة مباشرة. لكنه لا ينتج منتجًا قابلًا للتكرار ومُحكَم الإصدار. في كل مرة يعمل الوكيل، يُعيد قراءة ملف Figma الحي الذي ربما تغيّر. لا CONTEXT.md يشرح النطاق. لا قاموس رموز مُولَّد مسبقًا بأسماء ثابتة. لا نظام تحذير للتخطيط الشاذ.

figmascope وFigma MCP يحلان مشكلتين مختلفتين. MCP عبر الإنترنت، مباشر، وجيد للاستكشاف التفاعلي. figmascope ينتج منتجًا غير متصل، مُصدَّرًا، منظمًا، جيدًا لتوليد الكود الحتمي وقت التطبيق. اطلع على figmascope مقابل Figma MCP للمقارنة التفصيلية، واستكشف مدونة figmascope لمزيد من التعمق في سير عمل تصميم الذكاء الاصطناعي.