Figma Dev Mode هو أول شيء تلجأ إليه بشكل طبيعي حين يُسلِّم مصمّم العمل. إنه مدمَج ورسمي ويتحدث لغة Figma الخاصة. فلماذا تلجأ إلى شيء آخر؟
الجواب ليس أن Dev Mode سيئ. بل أنه يحل مشكلة مختلفة. فهم تلك المشكلة — وما ليست عليه — هو موضوع هذا المقال بالكامل. إذا أردت القفز مباشرةً إلى الجواب، جرِّب figmascope هنا.
ما هو Figma Dev Mode
Dev Mode هو طبقة التسليم المدفوعة من Figma، متاحة في خططي Professional وOrganization. حين تُبدِّل إليه (زر </> في شريط الأدوات العلوي)، تحصل على لوحة تُظهر CSS أو مقتطفات iOS/Android للطبقات المحددة، وتعليقات المكوّنات، وقيم المتغيرات، وعلامة حالة "جاهز للتطوير" يمكن للمصمّمين تعيينها.
صُمِّم للحظة التي يقول فيها المصمّم "هذا منتهٍ، اذهب وابنه." يفتح المطوّر Figma ويضغط هنا وهناك وينسخ المقتطفات وينظر إلى التباعد. لا خطوة تصدير. لا ملف. أنت تقرأ التصميم في مكانه.
تشحن Figma أيضاً خادم MCP رسمياً لـ Dev Mode (منفصل — مُغطَّى في مقارنة MCP)، لكن Dev Mode كواجهة مستخدم هو في المقام الأول تجربة قراءة بشرية. تُشير وتنقر وتفحص وتنسخ.
مقتطفات الكود التي يُولِّدها Dev Mode مفيدة فعلاً كمراجع سريعة. يمكنك رؤية مجموعة الخطوط والتباعد الدقيق إن كانت المتغيرات مُعدَّة، وأنصاف الأقطار. لمطوّر خبير يحتاج مجرد التحقق من قيمة محددة، إنه سريع.
ما هو figmascope
figmascope أداة من جانب المتصفح — بدون خادم خلفي ولا تثبيت، تعمل في تبويب — تُصدِّر حزمة سياق منظَّمة من أي ملف Figma. تلصق رابط Figma ورمز وصول شخصي (محتجَز في الذاكرة، لا يُرسَل لأي خادم)، فيُنتج .zip يحتوي:
CONTEXT.md— مواصفة قابلة للقراءة بشرياً وآلياً للتصميمtokens.json— رموز تصميم مكتوبة (مصدرها متغيرات Figma حين تتوفر، مستنتجة من التكرار وإلا)screens/*.json— تمثيل وسيط لكل شاشة: عقد stack وoverlay وabsolute وleaf مع العلاقات المكانية محتفظاً بهاscreens/*.png— لقطات مرجعية بمقياس 2×components/inventory.json— فهرس المكوّنات مع معرّفات الحالاتstrings.json— جميع محتوى النص مُفهرَساً لـ i18n (stringRef.key)_meta.json— بيانات التصدير الوصفية ومعلومات الملف ومصدر الرموز
الحزمة ملفات عادية. لا وقت تشغيل. لا SDK. ضعها في مستودع، ثبّتها، قارنها، سلِّمها لأي وكيل ذكاء اصطناعي يقرأ الملفات.
الفرق الرئيسي عن Dev Mode: هذه ليست تجربة قراءة داخل Figma. إنها تصدير يغادر Figma كلياً.
أين يتفوق Dev Mode
الفحص المباشر. إذا أردت النقر على طبقة محددة والحصول على قيمتها المحسوبة الدقيقة الآن، فـ Dev Mode فوري. لا خطوة تصدير ولا zip ولا تبديل سياق. الجواب في اللوحة.
التكامل الرسمي. Figma تبنيه وتصونه وتشحن التحسينات جانباً مع بقية المنتج. دعم المتغيرات وسير عمل التعليقات التوضيحية وحالة "جاهز للتطوير" — هذه ميزات أصيلة بدعم من الطرف الأول. حين تُضيف Figma قدرة جديدة لنظام التصميم، يحصل عليها Dev Mode.
توزيع الفريق. كل مصمّم ومطوّر في خطة Figma org لديه بالفعل. لا أدوات إضافية للتثبيت أو الشرح أو الصيانة.
أدوات وقت التصميم. يمكن للمصمّمين وضع علامة على الإطارات كجاهزة وترك تعليقات توضيحية على مستوى الكود والتعاون مع المطوّرين داخل نفس اللوحة. هذا الذهاب والإياب جيد فعلاً لدورات ضمان الجودة حيث تحتاج تعليقات وتحديثات حالة.
أين يتفوق figmascope
إخراج قائم على الملفات متوافق مع أي وكيل. إخراج Dev Mode يعيش داخل Figma. إخراج figmascope يعيش في zip تتحكم فيه. ضعه جانباً من كودك وأشر Claude Code أو Cursor إليه، ويحصل الوكيل على المواصفة الكاملة — جميع الشاشات وجميع الرموز وجميع السلاسل — دون الحاجة للاتصال بـ Figma أبداً.
التحكم في الإصدارات. حزمة figmascope قابلة للمقارنة. ثبِّتها. ضعها في PR. انظر بالضبط أي الرموز تغيّرت بين تصميم الأسبوع الماضي والتصميم الحالي. لا يحتوي Dev Mode أي مفهوم لتاريخ الإصدارات للمواصفة نفسها — لدى Figma تاريخ إصدارات للملف، لكن ذلك للمصدر لا للقطة قابلة للتصدير من نية التصميم.
لا متطلب للطبقة المدفوعة. figmascope مرخَّص بـ MIT ومجاني. يستخدم Figma REST API العام الذي يتطلب فقط PAT (مجاني في أي حساب Figma). يتطلب Dev Mode خطة Professional أو Organization. للمطوّرين المستقلين أو الفرق الصغيرة التي تعمل مع مصمّم بخطة مجانية، figmascope هو الخيار الوحيد.
إخراج حتمي. كل تصدير لنفس ملف Figma في نفس الإصدار يُنتج نفس الحزمة. نفس JSON ونفس الرموز ونفس السلاسل. يهمّ هذا لقابلية التكرار — يمكنك تشغيله في CI وتثبيت حزمة على إصدار واختبار الانحدار ضدها.
محمول وغير متصل. بمجرد حصولك على الحزمة، تعمل بدون اتصال بـ Figma أو أي خادم. سياق الوكيل مكتفٍ بذاته. مفيد حين تكون في طائرة أو خلف جدار حماية أو تريد ببساطة عدم الاعتماد على وقت تشغيل Figma خلال سبرينت بناء.
IR يحتفظ بالدلالات المكانية. التمثيل الوسيط في screens/*.json يلتقط نوع التخطيط (stack وoverlay وabsolute) وهوية المكوّنات (componentId على عقد INSTANCE) ومراجع سلاسل النص — لا مجرد CSS محسوب. يمكن للوكيل التفكير في بنية التخطيط لا مجرد نسخ المقتطفات.
جانباً: نفس ملف Figma
خذ شاشة تسجيل دخول بنموذج وزر أساسي وبضعة رموز نصية. إليك ما تمنحك إياه كل أداة:
إخراج Dev Mode: خصائص CSS للطبقة التي نقرت عليها (font-size: 16px; color: #1f1d1a; border-radius: 8px). طبقة واحدة في كل مرة. تنسخ ما تحتاج. إذا أردت حالات الزر الكاملة، تنقر على كل منها. إذا أردت اسم الرمز، إنه موجود إن ربط المصمّم المتغيرات — مفقود وإلا.
إخراج حزمة figmascope: CONTEXT.md مع المواصفة الكاملة لشاشة تسجيل الدخول. tokens.json مع color.text.primary وspacing.4 وradius.md — مُفهرَسة ومكتوبة ومصدرها المتغيرات أو مستنتجة. screens/login.json مع شجرة IR: حاوية stack تحتوي INSTANCE نموذج تُشير إلى componentId: "abc123"، عقد leaf أبناء مع stringRef.key: "auth.login.cta". strings.json يُعيِّن ذلك المفتاح إلى "تسجيل الدخول". screens/login.png بمقياس 2×.
تُسلِّم الحزمة لـ Cursor. يقرأ CONTEXT.md ويسحب أسماء الرموز من tokens.json ويبني المكوّن من IR. لا يحتاج فتح Figma أبداً.
مقارنة
| البُعد | Figma Dev Mode | figmascope |
|---|---|---|
| التسعير | مدفوع (خطة Professional / Org) | مجاني، مفتوح المصدر MIT |
| تنسيق الإخراج | لوحة داخل Figma، مقتطفات CSS/iOS/Android | zip: CONTEXT.md، tokens.json، screens/*.json، *.png |
| نموذج التكامل | داخل واجهة Figma، فحص طبقة بطبقة | تصدير متصفح، ثم ملفات عادية في أي مكان |
| متوافق مع الوكيل | عبر خادم MCP (ميزة منفصلة) | أي وكيل يقرأ الملفات (Claude Code وCursor وAider وCopilot...) |
| ملائم للتحكم في الإصدارات | لا (الإخراج يعيش في Figma) | نعم — الحزمة قابلة للمقارنة والتثبيت |
| إخراج حتمي | لا (بالنقر، مرتبط بالجلسة) | نعم — نفس إصدار الملف → نفس الحزمة |
| غير متصل / محمول | لا — يتطلب اتصال Figma | نعم — الحزمة تعمل بدون أي اتصال |
| تعليقات توضيحية وقت التصميم | نعم — جاهز للتطوير، تعليقات | لا |
| IR مكاني / تخطيطي | لا — CSS مسطّح للطبقة المحددة | نعم — stack/overlay/absolute/leaf مع هوية المكوّنات |
| مصادر الرموز | من متغيرات Figma حين تُعيَّن | متغيرات Figma → مستنتجة من التكرار → لا شيء |
| مفاتيح سلاسل i18n | لا | نعم — stringRef.key في IR + strings.json |
| يتطلب تثبيت إضافة | لا (مدمَج في Figma) | لا (تبويب متصفح، REST API) |
متى تستخدم كل منهما
استخدم Dev Mode حين: تحتاج التحقق من قيمة محددة، أنت في وسط مراجعة تصميم وتريد البحث عن رمز، فريقك بالفعل في خطة Figma مدفوعة ويعيش داخل Figma، أو تريد سير عمل التعليقات التوضيحية للمصمّم وعلامات حالة "جاهز للتطوير".
استخدم figmascope حين: تُسلِّم سياقاً لوكيل ذكاء اصطناعي لسبرينت بناء، تريد التحكم في مواصفة التصميم بالإصدارات جانباً من الكود، أنت بخطة Figma مجانية، تحتاج IR التخطيط الكامل (لا مجرد CSS لكل طبقة)، أو تريد إخراجاً حتمياً وقابلاً للتكرار يمكنك تثبيته على إصدار أو مقارنته في PR.
إنهما ليسا متنافيَين. استخدم Dev Mode للفحص أثناء البناء، وصدِّر حزم figmascope لتثبيت مواصفة التصميم في مستودعك. الاثنان لا يتنافسان — يغطيان أجزاء مختلفة من سير العمل.