كيفية تحويل Figma إلى وورد؟ [الطرق المجانية والمدفوعة]

تُعرف Figma بأنها أداة للتصميم والإبداع، بينما يشتهر WordPress بمرونته وتخصيصه وسهولة استخدامه. ماذا لو كان بإمكانك الجمع بين أفضل هذه المنصات لإنشاء موقع ويب مذهل؟

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

إذا كنت تبحث عن نفس الشيء، فأنت في المكان الصحيح.

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

الخيار 1: استخدم مكونًا إضافيًا مجانيًا لتحويل Figma إلى WordPress

على الرغم من وجود طرق متعددة لتحويل Figma إلى WordPress، يمكنك إما اختيار الطريقة المجانية، أو استخدام البرنامج الإضافي للتحويل المتميز، أو اتباع الطريقة اليدوية. (لديهم إيجابيات وسلبيات)

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

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

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

سيتم فتح مطالبة جديدة يتعين عليك فيها التمرير لأسفل إلى قسم "رموز الوصول الشخصية" والنقر على رابط إنشاء رمز مميز جديد .

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

ملاحظة : في قسم انتهاء الصلاحية، حدد دائمًا " لا يوجد انتهاء صلاحية " حتى لا تختفي صفحة Figma الخاصة بك من موقع الويب الخاص بك بعد إطار زمني محدد.

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

الخطوة 3: الآن بعد أن قمت بإنشاء وحفظ الرمز المميز بنجاح، فقد حان الوقت لتحويل صفحة Figma الخاصة بك إلى WordPress.

لبدء العملية، تحتاج إلى تثبيت وتنشيط مكون إضافي بسيط ولكنه قوي في WordPress يسمى "Animation and Design Converter for Gutenberg Block - Advanced Addons" على موقع WordPress الخاص بك.

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

في تلك الصفحة أو المنشور، انقر فوق الزر " استيراد من Figma " أعلى يسار الشاشة.

سيتم فتح مطالبة تطلب منك تقديم "رمز وصول Figma" الذي قمت بإنشائه وحفظه مسبقًا. أدخل عنوان URL لملف Figma.

للحصول على عنوان URL لملف Figma، عد إلى ملف Figma، وانسخ عنوان URL في علامة تبويب المتصفح أدناه، ثم الصقه في مربع URL لملف Figma.

بالنسبة للبقية، سيقوم البرنامج المساعد بعمله وتحويل ملف Figma إلى كتل WordPress. بعد ذلك، يمكنك إجراء أي عدد تريده من التخصيصات من لوحة الحظر.

بمجرد الانتهاء، انقر فوق الزر "نشر" أو "تحديث" لحفظ إعداداتك.

الخيار 2: استخدام مكون إضافي مدفوع لتحويل Figma إلى WordPress (أكثر كفاءة وخالية من المتاعب)

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

حاليًا، يمكن لهذا المكون الإضافي تحويل تصميمات Figma فقط إلى محرري مواقع الويب Elementor وBricks، لكن الشركة وعدت بتقديم الدعم لكتل ​​Gutenberg في المستقبل.

الخطوة 1: افتح تصميم Figma الخاص بك وقم بتثبيت البرنامج الإضافي Uichemy على لوحة معلومات Figma لبدء عملية التحويل.

• للقيام بذلك، ابحث عن " UiChemy " في شريط البحث وابحث عن المكون الإضافي UiChemy.

انقر فوق الزر "لنبدأ" واتبع تعليمات التثبيت والتنشيط.

• أدخل المفتاح التسلسلي الخاص بك لإنهاء التنشيط. (للحصول على المفتاح التسلسلي، أنشئ حسابًا مجانيًا بالنقر فوق الزر "البدء مجانًا". بعد إنشاء حسابك، ستجد مفتاح الترخيص الخاص بك في لوحة المعلومات الخاصة بحساب Posimyth Store الخاص بك.)

الخطوة 2: بعد التنشيط الناجح، حدد تصميم Figma أو الإطار الذي تريد تحويله إلى WordPress وانقر على زر " تحويل إلى Elementor " في النافذة المنبثقة.

(تأكد من تثبيت وتفعيل Elementor Plugin على موقع WordPress الخاص بك قبل عملية التحويل وكذلك قراءة جميع الشروط قبل تحويل تصميم Figma الخاص بك).

الخطوة 3: يمكنك الآن معاينة التصميم الخاص بك عن طريق إدخال عنوان URL لموقعك ومفتاح الرمز المميز. إذا كنت لا تريد ذلك، فقط انقر مباشرة على زر "تحويل إلى Elemetor". (ارجع إلى البرنامج التعليمي الخاص بـ UiChemy حول "ما هي المعاينة المباشرة" للحصول على إرشادات حول إنشاء مفتاح الرمز المميز وعنوان URL لموقع الويب.)

الخطوة 3: سيتم تحويل التصميم الخاص بك وتنزيل ملف JSON.

الآن افتح لوحة تحكم إدارة WordPress الخاصة بك > انتقل إلى القوالب > النماذج المحفوظة.

انقر الآن على زر " استيراد القوالب " الموجود أعلى الصفحة وقم بتحميل ملف JSON.

الخطوة 4: تهانينا! سيظهر الآن تصميم Figma الخاص بك في قسم "القوالب المحفوظة"، حيث يمكنك فتحه وإجراء المزيد من التحرير أو التخصيص.

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

الخيار 3: تحويل Figma إلى WordPress يدويًا (للمطورين)

هذه الطريقة تقنية تمامًا، وبالتالي تتطلب معرفة جيدة بنظام WordPress CMS وقليلًا من الصبر، وبالتالي فهي مناسبة تمامًا لأولئك الذين يحبون البرمجة.

الخطوة 1: الخطوة الأولى هي تصدير جميع أجزاء التصميم مثل الأيقونات والصور من Figma. لهذا، افتح تصميم Figma الخاص بك واختر ما تريد تصديره. انقر الآن على زر "تصدير" وقسم التنسيق والدقة المناسبين.

ملاحظة: يوصى بشدة، عند تصدير الصور، باختيار PNG أو JPG، وبالنسبة للأيقونات والمتجهات، اختر SVG للحفاظ على الجودة. كن حذرًا أيضًا عند تصدير ملفاتك، وتأكد من أنها بالتنسيق الصحيح، وإلا فسيؤثر ذلك بشدة على مظهر موقع الويب الخاص بك.

الخطوة 2: يتعين علينا الآن إنشاء سمة WordPress مخصصة لتحويل جميع تصميمات Figma إلى موقع WordPress. ذلك لأن سمة WordPress هي التي تتحكم في كيفية ظهور موقع الويب الخاص بك ووظائفه.

يتكون ملف سمة WordPress النموذجي من كود PHP وملفات JavaScript وملفات أوراق أنماط CSS.

• أنشئ مجلدًا جديدًا في WordPress لموضوعك في دليل wp-content/themes وقم بتسميته حسب اختيارك. (يمكنك الوصول إلى هذه الملفات، إما من خلال Cpanel أو WordPress Editor أو عملاء FTP) أو قم بمراجعة مدونتنا المخصصة حول "كيفية تثبيت سمة WordPress؟"

إذا كنت من مستخدمي WPOven، فيمكنك الوصول إلى ملف WordPress باتباع هذا البرنامج التعليمي. ""مدير ملفات جديد لإدارة ملفات ومجلدات موقعك بسهولة.""

الآن، قم بإضافة ملفات مثل Index.php، وheader.php، وfooter.php، وfunctions.php إليها. (اترك هذه الملفات فارغة الآن). أضف أيضًا ملف style.css لإعداد ورقة أنماط CSS الخاصة بموضوعك في نفس المجلد.

(يعد ملف style.css هذا مسؤولاً عن عرض جميع الألوان والخطوط والحدود والهوامش والعناصر المرئية الأخرى لموقع الويب.)

أضف الآن تعليق الرأس التالي إلى ملف style.css الخاص بك كما هو موضح أدناه:

/*

Theme Name: Example WordPress Theme
Author: WPOVen
Description: This code converts Figma design to WordPress.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

*/

هنا، يجب عليك تقديم اسم السمة لموضوع WordPress المخصص الخاص بك والمؤلف الخاص بك. سيساعد هذا WordPress على تحديد المظهر المخصص الخاص بك.

لا تنس أيضًا إضافة صورة لموضوع WordPress الخاص بك، بحيث يمكن التعرف عليها بسهولة في دليل WordPress، تمامًا مثل الصورة المصغرة على YouTube.

يجب أن يكون الحجم المفضل 800 × 600 بكسل ويجب أن يكون بتنسيق PNG. قم بتسمية أي شيء من اختيارك وأضفه إلى مجلد السمات.

الخطوة 3: يتعين علينا الآن إضافة جميع أصول Figma المصدرة داخل مجلد السمات المخصص الخاص بك.

نصيحة: إذا كان موقعك معقدًا فمن الأفضل إدارة جميع أصولك في مجلد فرعي محدد، تمامًا كما هو موضح في الصورة أدناه:

الخطوة 4: لجعل قالب WordPress الخاص بك يعمل بشكل كامل، تحتاج إلى إضافة HTML وCSS وJavaScript إلى ملفات السمات.

دعونا نرى كيف يمكنك القيام بذلك،

أولاً، يجب عليك تحويل نماذج Figma الخاصة بك إلى تعليمات برمجية، ولهذا سيُطلب منك أن يكون لديك أداة لتحرير التعليمات البرمجية.

ابدأ بإعداد بنية HTML باستخدام عناصر مثل الرؤوس والتذييلات وأشرطة التنقل والأقسام. أضف أكوادك إلى ملفات PHP (index.php، وheader.php، وfooter.php).

استخدم الآن CSS لتصميم عناصر HTML الخاصة بك. أضف أنماطك في ملف "style.css"، وقم بتعيين الألوان والخطوط والأحجام وجوانب التصميم الأخرى.

• للحصول على تصميم أفضل، يمكنك استخدام:
  • معالجات CSS الأولية مثل SASS أو LESS
  • أطر عمل مثل Bootstrap أو Tailwind
  • موضوع ووردبريس للمبتدئين
• بالنسبة للتصميمات المعقدة، لا تحتاج إلى وضع كل ملفات CSS الخاصة بك في ملف واحد، ولكن بطريقة أكثر تنظيمًا. يمكنك إضافة ملفات CSS منفصلة لأجزاء مختلفة في مجلد الأصول بحيث يصبح من السهل عليك إدارتها واستكشاف الأخطاء وإصلاحها في المستقبل.

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

فكر في استخدام jQuery لتسهيل المهام مثل استدعاءات AJAX ومعالجة DOM وتحميل CSS (أوراق الأنماط) وملفات JavaScript (البرامج النصية) بشكل صحيح في قالب WordPress الخاص بك باستخدام ملف functions.php .

الخطوة 5: الآن يأتي جزء الاختبار، بعد اتباع جميع الخطوات المذكورة أعلاه بنجاح، احفظ ملفاتك وتحقق مما إذا كان كل شيء يعمل بشكل جيد. ولكن قبل ذلك، علينا تفعيل البرنامج المساعد.

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

فيما يلي بعض اقتراحات الاختبار التي يمكنك اتباعها:

• تحقق من شكل موقعك وعمله في المتصفحات وأحجام الشاشات المختلفة.
• استخدم الأدوات لتحسين صورك لتحميلها بشكل أسرع.
• تنفيذ التخزين المؤقت لتسريع موقعك.
• قم بعمل نسخة احتياطية لموقعك قبل نشره.

ملخص

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

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

الأمر متروك تمامًا لتفضيلاتك وسهولة فهم الطريقة التي تختارها.

راهول

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