من Figma إلى الموقع: إطلاق صفحة هبوط
حوّل إطار تسويقي من Figma إلى HTML و CSS و JavaScript، ثم قم بنشر الموقع النهائي.
حوّل تصاميم Figma إلى تطبيقات ويب عاملة
ألصق رابط إطار Figma، وصف ما يجب أن تقوم به الصفحة، ودع Manus يبني الواجهة الأمامية والخلفية التي يمكنك نشرها.
من إطار التصميم إلى صفحة عاملة
يقرأ Manus التخطيط والمكونات والخطوط والألوان في إطار Figma لبناء تطبيق ويب وظيفي.
إطار التصميمصفحة عاملة
مثال توضيحي.
حوّل التصميم إلى كود للصفحات التي تحتاجها
ابدأ بصفحة هبوط، أو لوحة بيانات، أو عدة إطارات مرتبطة. يمكن أن يصف كل طلب السلوك الذي يقف خلف التصميم.
من Figma إلى الكود: بناء لوحة تحكم فعلية
شارك تصميم لوحة تحكم إدارية، وصِف البيانات والإجراءات التي تحتاجها. يبني Manus تطبيق ويب بمكونات واجهة أمامية وخلفية.
من Figma إلى التطبيق: ربط التدفق الكامل
أدخل إطارات متعددة في طلب واحد لتحويل التصميم إلى كود. صف كيفية ارتباط الصفحات، وما يحدث عند النقر، وحالات المكونات المهمة.
حوّل Figma إلى كود باستخدام رابط، لا إضافة
لا حاجة إلى إضافة مستقلة لتحويل Figma إلى كود في سياق التدفق الموثّق. اربط حسابك على Figma، وأرسل رابط إطار (frame)، واذكر ما ينبغي أن يعمل في الصفحة.
انشر موقعك، ثم استمر في تحسينه
تحويل التصميم إلى كود بالذكاء الاصطناعي لا ينتهي عند المعاينة. انشر الموقع، واربطه بنطاقك الخاص، وصف التغييرات التي تريدها في محادثة.
رابط واحد، وطلب واضح، وموقع جاهز للنشر
اشرح كيفية ارتباط إطاراتك ببعضها. ثم راجع النتيجة واستمر في إجراء التغييرات في المحادثة.
استمر في البناء مع Manus
الأسئلة الشائعة
كيف أحوّل Figma إلى كود باستخدام Manus؟
اتصل بحساب Figma الخاص بك مع Manus، ثم شارك رابط إطار من Figma واصف تطبيق الويب الذي تريد بناءه. سيقرأ Manus التخطيط والمكونات والخطوط والألوان، ثم يبني الواجهة الأمامية ومكونات الخلفية اللازمة.
هل يمكن لـ Manus تحويل Figma إلى HTML وCSS؟
نعم. يُنشئ استيراد Figma الموثّق كود HTML و CSS و JavaScript للواجهة الأمامية، بالإضافة إلى مكونات الخلفية اللازمة لتطبيق الويب المطلوب. بشكل افتراضي، يبني Manus التطبيق كمشروع React و Tailwind CSS يعمل كـ HTML و CSS و JavaScript في المتصفح. صِف الصفحات والسلوك الذي تحتاجه مع رابط الإطار.
هل يدعم Manus تحويل Figma إلى React و Figma إلى Tailwind؟
نعم. يبني Manus المواقع باستخدام React و Tailwind CSS بشكل افتراضي، فيتحول التصميم المستورد من Figma إلى واجهة أمامية React بتنسيق Tailwind، مع كود الواجهة الخلفية الذي يحتاجه طلبك. يمكنك تصدير كود المشروع إلى مستودع GitHub خاص.
هل أحتاج إلى إضافة Figma لتحويل التصميم إلى كود؟
لا يتضمن التدفق الموثّق أي إضافة مستقلة. اربط حسابك على Figma، وشارك رابط إطار (frame) مع Manus واشرح ما تريد بناءه؛ يمكنك إضافة إطارات أخرى عندما يحتوي تصميمك على عدة صفحات أو حالات.
هل أحتاج إلى تثبيت خادم Figma MCP؟
لا. يتصل Manus بحسابك على Figma مباشرة من خلال تسجيل الدخول عبر Figma. بعد الاتصال، استورد رابط إطار (frame) وصف التطبيق؛ لا حاجة لتثبيت أو تشغيل خادم MCP منفصل خاص بـ Figma.
هل أحتاج إلى Figma Dev Mode أو مقعد Figma مدفوع؟
لا. يستورد Manus الإطارات من خلال حساب Figma المتصل لديك بدلًا من Dev Mode، ويمكن لحساب Figma المجاني الاتصال أيضًا. يحدّ Figma من عدد مرات قراءة التطبيقات للملفات: تحصل الخطط المجانية والمقاعد بدون Dev Mode على حصة شهرية صغيرة، بينما تحصل المقاعد المدفوعة مع Dev Mode على حدود أعلى بكثير. إذا بلغت الحد، سيخبرك Manus بذلك.
هل يمكن لسير عمل ذكاء اصطناعي من Figma إلى الكود بناء تطبيق فعّال؟
نعم. شارك رابط إطار Figma وصِف التطبيق. يحلّل Manus التصميم ويبني الواجهة الأمامية بالإضافة إلى مكونات الخلفية اللازمة لتطبيق ويب يعمل بشكل كامل.
هل يمكن لـ Manus التعامل مع التصاميم والتفاعلات متعددة الصفحات؟
نعم. شارك عدة إطارات من Figma واشرح تدفق صفحاتها أو تفاعلاتها أو حالات مكوناتها، مثل hover. يساعد ذلك Manus على بناء تجربة ويب تفاعلية متعددة الصفحات.
هل يمكنني نشر الموقع بعد تحويله؟
نعم. اعرض تطبيق الويب معاينةً، ثم اضغط على نشر، وسيصبح متاحًا على الإنترنت. يمكنك ربط نطاق مخصص والاستمرار في إجراء التغييرات من خلال وصفها لـ Manus.
ما الفرق بين هذا و Figma Make؟
Figma Make هو منتج من Figma. باستخدام Manus، يبدأ المسار الموثق برابط إطار Figma وطلب لإنشاء تطبيق ويب: يمكن أن يشمل مكونات الخلفية (backend)، ثم يمكنك نشر الموقع ومتابعة تعديله أثناء المحادثة.
هل يمكنني استخدام تحويل Figma إلى Flutter أو Figma إلى React Native؟
تتناول هذه الصفحة تحويل Figma إلى تطبيق ويب. يذكر دليل الاستيراد HTML و CSS و JavaScript للواجهة الأمامية؛ ولا يؤكد ناتج Flutter أو React Native.