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

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

ما هو ثنائي لايت؟

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

يتيح لك Dualite تحويل أي تصميم فيجما أو رسوم متحركة إلى كود فعال بنقرة واحدة يمكنك تخصيصه وفقًا لمشروعك، ويأتي مع ميزات مثيرة، دعني أقدم ملخصًا عنها:

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

تصميم فيجما

لنبدأ بتصميم الشكل للصفحة المقصودة، انظر أدناه:

لذا، يحتوي Dualite على ميزة الوضع حيث يمكنك التبديل بين وضع الصفحة ووضع المكون

في الأساس، وضع الصفحة مخصص لتحويل التصميم الكامل أثناء التنقل، ووضع المكونات هو إنشاء مكونات منفصلة يمكننا دمجها في مشروعنا، ومعرفة المزيد حول المكونات في المستندات

سنستخدم وضع المكون لإنشاء تعليمات برمجية لجميع المكونات الموجودة في التصميم ومن ثم سنقوم بدمجها في مشروع واحد

لنبدأ بتقسيم الصفحة المقصودة إلى مكونات، انظر أدناه:

الإعداد الأولي للمشروع

سأستخدم Reactjs وTailwind في Dualite لإنشاء التعليمات البرمجية، لذا فلنقم بإعداد المشروع أولاً:

• تطبيق Reactjs: أنشئ تطبيق تفاعل باستخدام Vite أو أي أداة أخرى. يعد Vite خيارًا شائعًا لإنشاء تطبيقات Javascript
• إعداد Tailwind: اتبع Tailwind Docs لإعداد Tailwind في تطبيق Reactjs دون أي خطأ غير ضروري. تأكد من إضافة التبعيات أيضًا مثل PostCSS والبادئة التلقائية لإعداد Tailwind بسلاسة.
• ملفات التكوين: قم بإنشاء tailwind.config.js وpostcss.config.css في جذر المشروع. قد يكون tailwind.config.js موجودًا إذا اتبعت جميع الخطوات الواردة في مستندات Tailwind. إذا كان موجودًا بالفعل، فقم بتحديثه وفقًا لذلك
• استخدم Javascript: اعتبارًا من الآن، لا يدعم Dualite Typescript، لذا تأكد من إنشاء تطبيق Reactjs باستخدام Javascript فقط

ابدأ في تحويل المكونات في Dualite

الإعداد الأولي:

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

الآن، لنبدأ بتحويل التصميم إلى مكون:

1. مكون شريط الإعلانات: تحقق من الكود الذي تم إنشاؤه هنا
    

2. مكون شريط التنقل: تحقق من الكود الذي تم إنشاؤه هنا
    

3. مكون مرشح الفئة: تحقق من الكود الذي تم إنشاؤه هنا
    

4. مكون مكون البطاقة: تحقق من الكود الذي تم إنشاؤه هنا
    

5. مكون ترقيم الصفحات: تحقق من الكود الذي تم إنشاؤه هنا
    

6. مكون التذييل: تحقق من الكود الذي تم إنشاؤه هنا
    

التخصيصات

1. مكونات النسخ:
   • الآن، انسخ مجلد المكونات من جميع التعليمات البرمجية التي تم إنشاؤها أعلاه والصقه في المشروع في مجلد المكونات
   • ربما لاحظت أن جميع أسماء المكونات هي "مكون" فقط، لذلك دعونا نسمي جميع المكونات وفقًا لذلك. مثال: سيتم تسمية مكون شريط الإعلان باسم "AnnouncementBar". تحقق كيف فعلت ذلك هنا
2. عرض جميع المكونات:
   • الآن، قم باستيراد جميع المكونات حسب التصميم الموجود داخل ملف App.jsx
   • قم بتشغيل المشروع وسترى النتيجة، تحقق من ملف App.jsx هنا
   • ربما لاحظت أن بعض المكونات تحتاج إلى الإصلاح. لنبدأ بالتخصيصات
3. إصلاح أنماط المكونات:
   • الخطوط:
     • كما ترون في التصميم، لدينا الخطوط الخاصة بنا. إضافتها داخل مجلدات الأصول حتى أتمكن من استخدام الخط في المشروع في أي مكان.
     • يلزم أيضًا إنشاء @font-face لجميع الخطوط التي نستخدمها في ملف Index.css حيث توجد توجيهات Tailwind
   • مكون شريط التنقل:
     • التخطيط غير دقيق لذا يجب إصلاح النمط
   • مكون البطاقة:
     • رمز النجمة: تمت إضافة رمز النجمة داخل مجلد الرسومات
     • Text.js: تم تحديث ملف Text.js لإصلاح تسمية الزر والنص الآخر للمكون
     • الأنماط: أنماط محدثة لإضافة وزن الخط إلى عنصر نص محدد وتسمية الزر
   • منطق مكون البطاقة:
     • يعرض مكون البطاقة مكونًا واحدًا فقط لأنه مكون واحد فقط.
     • لعرض مكونات بطاقة متعددة، لا بد لي من إضافة بعض البيانات التجريبية لتعيينها وتقديم بطاقات متعددة

ملاحظة: يمكن رؤية جميع التغييرات والكود على CodeSandBox هنا

الإخراج

بمجرد إجراء كل هذه التخصيصات والتغييرات في المشروع، يمكنني رؤية نسخة أفضل من تصميمي، والتحقق من الكود والإخراج هنا

هل كان Dualite مفيدًا؟

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

بدلاً من قضاء الكثير من الوقت في بناء واجهة المستخدم، يمكنني استخدام Dualite لذلك.

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

نعم، كان Dualite مفيدًا جدًا وسريعًا في إنشاء التعليمات البرمجية لمكوناتي.

خاتمة

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