استهلاك توكنات Figma MCP: لماذا يرتفع وكيف تقلّله

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

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

لماذا يستهلك Figma MCP كمًّا كبيرًا من التوكنات

رابط واحد، وشجرة كاملة

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

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

أربعة أمور تميل إلى تضخيم الاستجابة بأسرع معدل:

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

الشيفرة ولقطات الشاشة والبيانات الوصفية تتراكم

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

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

كل دور يعيد قراءة الكومة

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

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

كيف تقيس الضرر

اقرأ مقياس السياق

تعرض معظم أدوات البرمجة مقدار امتلاء النافذة. في Claude Code يقوم بذلك الأمر /context. تحقق من الرقم قبل كل استدعاء لـ Figma وبعده. الفرق هو التكلفة الحقيقية لذلك الاستدعاء، بما فيه لقطة الشاشة، وهو الرقم الوحيد المهم لملفك.

أجرِ اختبار الإطار نفسه

اختر إطارًا حقيقيًا واحدًا، ونفّذ ثلاثة استدعاءات في جلسة جديدة، واكتب حجم السياق بعد كل منها:

1. get_metadata على الإطار كاملًا.
2. get_design_context على الإطار كاملًا.
3. get_design_context على عقدة فرعية واحدة مأخوذة من البيانات الوصفية.

سجّل النتائج في جدول كهذا:

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

7 إصلاحات تقلّص استهلاك التوكنات

مرتبة تقريبًا حسب مقدار التوفير الذي تميل إلى تحقيقه.

1. ابدأ بالمخطط عبر get_metadata

توصي Figma باستخدام get_metadata للتصاميم الكبيرة جدًا لأنه يُعيد مخططًا مختصرًا بصيغة XML دون أي تنسيق مرفق. اقرأ المخطط، واختر القسم الذي تحتاجه فعلًا، ثم استدعِ get_design_context على معرّف تلك العقدة فقط.

Run get_metadata on this frame. Do not call get_design_context yet.
List the top level sections with their node IDs and wait for my pick.

نسخ الأمر النصي

2. حدّد أصغر عقدة

يعمل الخادم انطلاقًا من العقدة التي تحددها أو تربطها. اربط الزر، لا الصفحة. ابنِ الصفحة كما يفعل الإنسان: الترويسة، ثم القسم الرئيسي، ثم الأسعار، ثم التذييل، ولكل منها طلب مستقل.

• أهداف جيدة: مكوّن واحد، أو متغير واحد، أو قسم واحد.
• أهداف سيئة: صفحة كاملة، أو لوحة كاملة، أو إطار مليء بطبقات مخفية.

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

3. أعدّ Code Connect

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

فرق واحد يجب مراقبته: يستخدم الخادم المكتبي التعيينات التي تحددها، بينما يحتاج الخادم البعيد إلى ضبط المعامل clientFrameworks على تسمية محددة مثل React أو SwiftUI.

4. استخدم المتغيرات لا القيم الخام

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

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

5. اختر إطار العمل من البداية

React مع Tailwind هو المخرج الافتراضي. إذا كان مشروعك يعتمد على Vue أو SwiftUI أو CSS عادي، فإن إجابة باستخدام React تحتاج إلى مرور ثانٍ للتحويل، فتدفع ثمن الاثنين. حدّد مجموعة الأدوات في الأمر النصي، وعلى الخادم البعيد اضبط clientFrameworks بصراحة. ينطبق الأمر نفسه على التنسيق: اذكر هل تستخدم Tailwind أو وحدات CSS أو مكتبة مكوّنات، لأن خلط الأساليب في مرور واحد هو ما يبدأ عمليات إعادة الكتابة.

6. اجلب الأصول مرة واحدة

استخدم download_assets لتصدير الأيقونات والصور كملفات إلى المستودع، ثم أشِر إليها بالمسار. لا تجعل الوكيل يعيد قراءة عقدة صورة من أجل كل مكوّن يعرض الشعار نفسه. يمكن أن تكون التصديرات بصيغة SVG للأيقونات وPNG أو JPG للصور، فاختر الصيغة التي يستخدمها بناؤك. وبمجرد أن تصبح الملفات في المستودع، تحتاج الأوامر اللاحقة إلى مسار الملف فقط.

7. قرّر بشأن لقطات الشاشة

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

رفع الحد ليس حلًا

تقترح رسالة الخطأ رفع MAX_MCP_OUTPUT_TOKENS، وتذكر صفحة استكشاف أخطاء Figma القيمتين 50000 و100000 كأمثلة. في Claude Code تضبط المتغير في إعدادات البيئة ثم تعيد تشغيل التطبيق. هذا يفك الاستدعاء، لكنه لا يغيّر شيئًا في عدد التوكنات التي تحتوي عليها الاستجابة. الحد الأكبر يسمح فقط بدخول كومة أكبر إلى النافذة.

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

سير عمل خفيف، خطوة بخطوة

قبل أن تكتب الأمر النصي

1. اطلب من المصمم تسمية الطبقات بوضوح وربط القيم بالمتغيرات.
2. انسخ روابط العقد للأقسام، لا للصفحات كاملة أبدًا.
3. أضف إلى المستودع ملف قواعد قصيرًا يحدد إطار العمل ومجلد المكوّنات وتسمية التوكنات.
4. راجع حدود المعدل وصفحة الوصول في Figma. تختلف الحدود بحسب الخطة ونوع المقعد، لذلك قد يكلّفك الاستدعاء الضائع حصة إضافية أيضًا.

يمكن أن يبقى ملف القواعد قصيرًا. يكفي شيء مثل هذا:

Design to code rules
- Framework: React with Tailwind. Reuse components from src/components first.
- Colors and spacing: use the tokens in src/styles/tokens.css, never raw hex values.
- Figma: call get_metadata first on any frame larger than one section.
- Fetch one node per request. Do not re-pull a node that is already built.

نسخ الأمر النصي

يكلّف ذلك بضع عشرات من التوكنات في كل جلسة، ويمنع أغلى العادات قبل أن تبدأ.

أثناء الجلسة

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

مثال عملي: صفحة أسعار

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

1. يُعيد get_metadata على إطار الصفحة المخطط ومعرّفات العقد.
2. تطلب get_design_context لبطاقة خطة واحدة، مع تفعيل لقطات الشاشة.
3. يبني الوكيل مكوّنًا PlanCard بخصائص للاسم والسعر والميزات.
4. تعيد البطاقتان الأخريان استخدام ذلك المكوّن. تحتاجان نصهما والبيانات الوصفية فقط، لذلك لا تحتاجان أي عملية جلب إضافية للتصميم.
5. يحصل قسم الأسئلة الشائعة والتذييل كل منهما على جلسة قصيرة خاصة به.

ثلاث بطاقات خطط، وعملية جلب تصميم واحدة. على صفحة كاملة، تكمن في الفجوة بين "عملية جلب واحدة لكل قسم" و"عملية جلب واحدة لكل شيء" معظم التوفير.

أخطاء تستنزف التوكنات

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

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

أين تناسب نماذج PicassoIA

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

• صِغ مواصفات المكوّن في مكان آخر. حوّل موجز تصميم فوضوي إلى مواصفات قصيرة باستخدام Claude Sonnet 5 أو Gemini 3.5 Flash، ثم الصق المواصفات وحدها في وكيلك.
• اختصر المحادثات الطويلة. يتعامل GPT 5.6 Luna مع الردود النصية السريعة، وهو مناسب لتقليص سلسلة مراجعة طويلة إلى خمس نقاط.
• جرّب أوامر الوكيل قبل اعتمادها. Kimi K2.6 مصمم لأعمال الوكلاء والبرمجة، لذلك هو بيئة تجريب مناسبة لاختبار ملف قواعد قبل إضافته إلى مستودعك.

الصور مجال آخر للتوفير. لا يلزم أن تمر صور الواجهة الرئيسية ولقطات الأماكن المؤقتة عبر خادم Figma. ولّدها من أمر نصي باستخدام Flux 2 Pro أو Seedream 4.5 أو P-Image، ولن يمس أي منها سياق وكيل البرمجة لديك. هل تحتاج إلى حركة لصفحة الهبوط؟ يحوّل Seedance 2.0 وPicassoIA Video أمرًا نصيًا أو صورة ثابتة إلى مقطع قصير.

أنشئ صورك الخاصة مع Picasso IA

ستسير جلسة التصميم إلى الشيفرة التالية أسرع عندما تكون الصور جاهزة قبل الأمر النصي الأول. افتح Picasso IA، واكتب وصفًا قصيرًا للمشهد، وشغّله عبر Flux 2 Pro وSeedream 4.5 جنبًا إلى جنب. احتفظ بالصورة التي تناسب تخطيطك، ثم حرّكها باستخدام Seedance 2.0 إذا كانت الصفحة تحتاج إلى واجهة رئيسية متحركة.

جرّب عددًا من الأوامر النصية اليوم، وشاهد أيها تفضّل. كل النماذج مدرجة في picassoia.com/en/all-models، فيمكنك تجربة ما تشاء منها.