تحويل تصميم فيجما إلى ووردبريس: 4 طرق ومتى تختار كل واحدة

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

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

القرار السريع: أي طريقة تناسبك؟

• موقع كامل له نظام تصميم واضح (ألوان ومكونات متكررة): وكيل ذكاء اصطناعي عبر MCP.
• صفحة هبوط واحدة لحملة إعلانية: إضافة تحويل جاهزة، مع وقت مخصص للتنظيف بعدها.
• مشروع لعميل يريد قالبًا خفيفًا بلا منشئ صفحات: قالب كتل (Block Theme) مبني على theme.json.
• موقع صغير من صفحة إلى خمس صفحات، أو تصميم غير منظم: أعد بناءه يدويًا في Elementor، فهو أسرع مما تتوقع.

قبل أي طريقة: جهّز ملف Figma أولًا

كل الطرق، الآلية منها واليدوية، تقرأ بنية الملف. إطار مكوّن من طبقات متناثرة بمواضع ثابتة لن يفهم أي وكيل أنه كان صفًا متجاوبًا من البطاقات. أما الملف المبني جيدًا فينتقل شبه مباشرة إلى CSS.

راجع الملف بهذه القائمة قبل التسليم أو التحويل:

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

تنبيه للمواقع العربية: صمّم النسخة العربية في Figma باتجاه RTL فعلًا (محاذاة النص لليمين وترتيب العناصر معكوسًا)، ولا تعتمد على أن الوكيل أو الإضافة سيعكس التصميم الإنجليزي من تلقاء نفسه. واختر خطًا عربيًا مرخصًا للويب، مثل Cairo أو Tajawal من Google Fonts، واستضفه محليًا على موقعك.

الطريقة الأولى: وكيل ذكاء اصطناعي عبر MCP

بروتوكول MCP (Model Context Protocol) يتيح لمساعد مثل Claude أو Cursor أو Codex الاتصال بأداة خارجية والعمل داخلها. في حالتنا تحتاج اتصالين بالمساعد نفسه: خادم MCP (MCP Server) يقرأ ملف Figma، وآخر يبني داخل ووردبريس.

جهة Figma: من يقرأ التصميم؟

• خادم Figma الرسمي: تستضيفه Figma وتوصي بالنسخة البعيدة (Remote). يعمل بالروابط: تنسخ رابط الطبقة أو الملف وتلصقه في المساعد. حسب صفحة المساعدة الرسمية يحتاج مقعدًا كاملًا أو مقعد مطوّر (Dev seat)، والمقاعد الأخرى قد تواجه حدودًا في الاستخدام. ويعمل أفضل مع Code Connect لربط مكونات التصميم بمكونات الكود.
• Framelink: خادم مجاني من المجتمع يقرأ الملف عبر Figma API بمفتاح خاص بك. هو الطريق الأوفر لو ليس لديك مقعد مدفوع.

إعداد Framelink النموذجي في ملف إعدادات المساعد يبدو هكذا:

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR_KEY", "--stdio"]
    }
  }
}

تحذير: مفتاح Figma API يفتح ملفاتك لمن يملكه. لا تضعه في مستودع Git عام، ولا تشاركه مع عميل في لقطة شاشة.

جهة ووردبريس: من يبني الصفحة؟

معظم تكاملات MCP في ووردبريس مبنية على قطعتين: واجهة القدرات (Abilities API) التي تسجّل فيها الإضافات ما تستطيع فعله، ومحوّل MCP الذي يعرض هذه القدرات للمساعد. ولأن ما تتيحه النواة محدود عمدًا، بدأت المنشئات تطلق تكاملاتها الخاصة حتى يبني الوكيل عناصر أصلية بدل لصق كتلة HTML في الصفحة.

في Elementor: هذا هو الخيار الأقرب لمعظم قرّاء ArabCMS. حسب صفحة Elementor الرسمية:

1. من لوحة ووردبريس افتح Elementor ← Elementor MCP.
2. اختر المساعد الذي تستخدمه (Claude Code وClaude Desktop وCodex وCursor هي الأفضل توافقًا).
3. انسخ الأمر الجاهز، وفيه كلمة مرور تطبيق ينشئها Elementor تلقائيًا، والصقه في المساعد.

كل ما يولّده يُحفظ كمسودة ولا يُنشر قبل مراجعتك. الاتصال نفسه مجاني، لكن عناصر Pro مثل النماذج والنوافذ المنبثقة والحلقات والمحتوى الديناميكي والترويسة والتذييل تحتاج اشتراك Pro. وهناك قيدان مهمان: الدعم حاليًا لـالعناصر الذرية (Atomic Elements) في الإصدار الرابع فقط، والتعديل على تخطيطات الإصدار الثالث القديمة «قريبًا». أما تعديل التصاميم الحالية وأنظمة التصميم الكاملة وقدرات الإضافات الأخرى فتحتاج إضافة Angie المجانية بجانبه.

في JetEngine: الديناميكية لا تنتقل من Figma وحدها. لو الصفحة فيها قوائم عقارات أو دورات مبنية على JetEngine، صل JetEngine MCP بالمساعد أيضًا، وإلا سيبني الوكيل بطاقات ثابتة بدل حلقة تقرأ من أنواع المحتوى المخصصة.

خيارات أخرى ذكرها المصدر

• CrocoBuilder: منشئ صفحات Crocoblock الجديد، يعتمد بنية ينتج فيها كل عنصر وسمًا واحدًا بلا أغلفة، ويقرأ متغيرات المشروع قبل التوليد. Crocoblock تعدّه الأنسب لهذا العمل، وهذا رأي صاحب المنتج.
• Bricks: حسب Crocoblock أضاف قدرات AI في الإصدار 2.4، لكنها ما زالت تجريبية ولا يُنصح بتشغيلها على موقع حي، والوكيل يميل إلى كتابة الألوان مباشرة بدل استخدام المتغيرات.
• خوادم MCP عامة مثل Novamira وRespira تربط وكيلًا واحدًا بمنشئات كثيرة. انتبه إلى أن بعضها يمنح الوكيل وصولًا واسعًا إلى PHP وقاعدة البيانات، فمكانه بيئة تجريبية فيها نسخة احتياطية.

الترتيب الذي يصنع الفرق

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

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

بصراحة: هذا القسم قراءة لتوثيق Figma وElementor ولمقال Crocoblock، لم نختبر التحويل بأنفسنا على مشروع حقيقي. Crocoblock نفسها وصفت نتيجة Elementor MCP في اختبارها بأنها «ليست دقيقة جدًا لكنها مقبولة»، فخطط لوقت مراجعة يدوية.

الطريقة الثانية: إضافات التحويل الجاهزة

تعمل هذه الإضافات من جزأين: إضافة داخل Figma تقرأ التصميم، وإضافة في ووردبريس تستقبله. الأفضل منها لا يصدّر HTML، بل يحوّل الطبقات إلى عناصر أصلية في المنشئ. المصدر يذكر UiChemy (يدعم Elementor وGutenberg وBricks) وFigWebX.

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

الطريقة الثالثة: قالب كتل مبني على theme.json

لو العميل يريد قالبًا خفيفًا بلا منشئ صفحات، فالجسر بين Figma وووردبريس هو ملف theme.json في قالب الكتل. كل متغير في Figma يصبح إعدادًا فيه، فمتغير اسمه color/primary يتحول إلى لون في اللوحة يعرضه ووردبريس كمتغير CSS:

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        { "slug": "primary", "color": "#1F4FFF", "name": "Primary" },
        { "slug": "surface", "color": "#F7F8FA", "name": "Surface" }
      ]
    },
    "typography": {
      "fontSizes": [
        { "slug": "body", "size": "1rem", "name": "Body" },
        { "slug": "h1", "size": "clamp(2rem, 4vw, 3.5rem)", "name": "H1" }
      ]
    },
    "layout": {
      "contentSize": "760px",
      "wideSize": "1200px"
    }
  }
}

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

الطريقة الرابعة: إعادة البناء يدويًا

افتح ملف Figma بجانب Elementor وابنِ التصميم بنفسك. أبطأ، لكنك تتحكم في كل عنصر وكل فئة وكل نقطة توقف، وتربط المحتوى الديناميكي من JetEngine أثناء البناء. هذه الطريقة منطقية لموقع صغير، أو لتصميم بلا نظام ثابت، أو حين تريد فهم التصميم قبل أتمتة أي شيء.

قائمة الفحص قبل التسليم للعميل

أيًا كانت الطريقة، لا تسلّم قبل هذه المراجعة:

• التجاوب على سطح المكتب والتابلت والجوال، بما فيه التفاف النص العربي وقص الصور.
• عنوان H1 واحد في الصفحة، وتسلسل H2 ثم H3 منطقي، لا عناوين مختارة حسب حجم الخط.
• الأزرار أزرار والروابط روابط، والقائمة داخل وسم nav.
• تباين الألوان، وحالة التركيز ظاهرة، ونص بديل للصور المهمة.
• الخطوط مرخصة للويب ومستضافة محليًا.
• الصور بصيغ حديثة ومقاسات متجاوبة وتحميل كسول أسفل الصفحة.
• لا قيم مكتوبة مباشرة كان يجب أن تأتي من المتغيرات.

الأسئلة الشائعة

س: هل يمكن تحويل تصميم فيجما إلى المنتور مباشرة؟
ج: نعم، إما بإضافة تحويل مثل UiChemy، أو عبر Elementor MCP مع مساعد ذكاء اصطناعي متصل بـ Figma. الطريقة الثانية تنتج عناصر Elementor أصلية تُحفظ كمسودات، لكنها تعمل حاليًا مع عناصر الإصدار الرابع الذرية فقط.

س: هل أحتاج اشتراك Figma مدفوعًا لاستخدام MCP؟
ج: خادم Figma الرسمي يحتاج مقعدًا كاملًا أو مقعد مطوّر حسب صفحة المساعدة، والمقاعد الأخرى قد تواجه حدودًا. البديل المجاني الشائع هو Framelink الذي يعمل بمفتاح Figma API.

س: هل يمكن تحويل فيجما لووردبريس بدون برمجة؟
ج: نعم. الوكيل عبر MCP وإضافات التحويل وإعادة البناء في Elementor لا تحتاج كودًا. فقط طريقة قالب الكتل تتطلب معرفة بـ CSS وترميز الكتل.

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

الخلاصة

الطريقة الصح بتتحدد من الملف نفسه قبل الأداة: ملف فيه متغيرات ومكونات وAuto Layout هيتحول كويس بأي طريقة، وملف عشوائي هيتعبك بأي طريقة. لو بتشتغل على مشاريع Figma لعملاء، ابدأ بتجهيز الملف، وجرّب Elementor MCP على صفحة واحدة في بيئة تجريبية قبل ما تعتمد عليه في مشروع كامل.

مراجع إضافية: Introducing the Elementor MCP، Figma MCP server — Figma Help Center

مرجع المقال (بالإنجليزية): Converting Figma to WordPress: Methods, Tools, and AI Workflows (2026)
المقال ده مش ترجمة حرفية: متكيّف للقارئ العربي ومضاف عليه سياق ووردبريس وElementor وJetEngine.