من Figma إلى HTMLتحويل التصميم إلى HTML

تصميمك في Figma مبنيًا بلغتي HTML وCSS: صفحة من الإطارات المصدَّرة، مع نسخة للهاتف

جاهز عادةً خلال 15 دقيقةالتعديلات مشمولةفحص الجودة
الباقات
حماية الدفعالتفاصيل
  • التعديلات ضمن الباقة مجانية.
  • إذا لم تردّ خلال 3 أيام من التسليم، يُقبل العمل تلقائيًا.

يُحجز المبلغ عند الدفع ولا يُحوَّل إلا بعد قبولك العمل.

تصميمك في Figma مبنيًا بلغتي HTML وCSS: صفحة من الإطارات المصدَّرة، مع نسخة للهاتف

مثال على النتيجة

مثال على الباقة القياسية

الصفحة الرئيسية لعيادة أسنان منفّذة وفق تصميمها

قبل: التصميم الذي أرسله العميل

تصميم الصفحة الرئيسية

بعد: الصفحة وهي تعمل

الملفات: أرشيف ZIP يضم index.html وملفات التنسيق وصورتين للصفحة، جاهز للرفع على استضافة العميل. الصور المعروضة هنا لقطات شاشة للصفحة.

العميل: عيادة الأسنان Bright Smile Dental. المهمة: تحويل تصميم الصفحة الرئيسية إلى صفحة HTML تعمل فعليًا بالتخطيط والألوان والنصوص نفسها، مع أزرار حجز تتصل بالعيادة مباشرة.

العميل وجميع التفاصيل افتراضية.

عن هذه الخدمة

تصميمك جاهز في Figma وتحتاجه صفحةً تعمل. صدّر الإطارات بصيغة PNG بمقاس 1x أو 2x وارفعها، ونبنيها لك بلغتي HTML وCSS: الأقسام نفسها والشبكة والمسافات والألوان والأزرار، مع نص حقيقي بدلًا من صورة للنص. إن كان لديك إطار للهاتف نتبعه، وإلا نصنع نسخة الهاتف من إطار سطح المكتب. لا يمكننا فتح ملفات .fig أو روابط Figma، لذا لا نقرأ الطبقات والمكونات والمتغيرات وروابط النموذج الأولي: كل ما لا يظهر في الملف المصدَّر، مثل ألوان التمرير، يُكتب في متطلبات الطلب. تُرسم الصور من جديد ما لم ترفعها. لا رسوم متحركة ولا واجهة خلفية ولا نظام إدارة محتوى ولا استضافة.

ما المشمول

  • ما تحصل عليهأرشيف ZIP فيه الصفحات والتنسيقات والصور، جاهز للرفع إلى استضافتك، مع معاينة لكل صفحة على صفحة الطلب.
  • وفيّ لإطاراتكالأقسام والشبكة والمسافات والألوان وأحجام الخط كما في الملف المصدَّر
  • نسخة للهاتفمن إطار الهاتف لديك، أو مصنوعة من إطار سطح المكتب
  • نص حقيقيعناوين وفقرات بلغة HTML تقرؤها محركات البحث
  • صورك، إن أرسلتهاالصور والأيقونات المصدَّرة منفصلة توضع كما هي، والباقي يُرسم من جديد
  • كود نظيفHTML وCSS بسيطان، بلا أطر عمل، ولا شيء يُحمَّل من مواقع أخرى

كيف يعمل

  1. 1
    التصديرتصدّر الإطارات بصيغة PNG وترفعها وتذكر ما لا يظهر فيها
  2. 2
    البناءنبني الصفحات ونرسم الصور الناقصة
  3. 3
    المعاينة والأرشيفتقارن الصفحات بتصميمك على الكمبيوتر والهاتف، وتنزّل الأرشيف، وتطلب التعديلات ضمن باقتك

ما نحتاجه منك

حتى 5 صور بصيغة PNG أو JPEG أو WebP: إطارات مصدَّرة من Figma بمقاس 1x أو 2x، صفحة واحدة في كل ملف، وإن أردت صورًا أو رسومًا توضيحية أو شعارك مصدَّرة منفصلة لاستخدامها كما هي. اذكر أي إطار لأي صفحة، وأسماء الخطوط المستخدمة، وحالات التمرير أو الفتح غير الظاهرة في الملف المصدَّر، وإلى أين يقود كل زر. لا ملفات .fig ولا روابط Figma.

سنسألك:

  • أي إطار لأي صفحة؟
  • الخطوط في التصميم
  • حالات غير ظاهرة في الملف المصدَّر
  • إلى أين يقود كل زر؟
  • هل التصميم ملكك؟

قارن بين الباقات

الباقاتالأساسيةإطار Figma واحد، حتى 5 أقسام‏21 US$القياسيةإطار Figma واحد، حتى 10 أقسام‏39 US$المميزةحتى 3 إطارات Figma‏67 US$
مدة التنفيذ1 يوم2 يوم3 أيام
التعديلات123
الصفحات113
الأقسامحتى 5حتى 10حتى 8 لكل صفحة
صور مرسومة خصيصًا للصفحة24—
نسخة للهاتفنعمنعمنعم
ما الذي ترفعهإطارات مصدَّرة بصيغة PNGإطارات مصدَّرة بصيغة PNGإطارات مصدَّرة بصيغة PNG
صور مرسومة خصيصًا للصفحات——6
اطلب الأساسيةاطلب القياسيةاطلب المميزة

حماية الدفع

تدفع عند الطلب، لكن المبلغ لا يُحوَّل إلا مقابل عمل قبلته.

  • سعر ثابتلا يتغير سعر الباقة بعد الدفع.
  • المبلغ محجوزعند الدفع، يُحجز المبلغ فقط. ولا يُحوَّل إلى Dleex إلا بعد قبولك العمل.
  • فحص قبل التسليمتخضع كل نتيجة لفحص الجودة قبل أن تصل إليك، وتراها في صفحة الطلب قبل قبولها.
  • تعديلات مجانيةاطلب تعديلات ضمن متطلبات طلبك بالعدد الذي تسمح به الباقة.
  • القبول بعد 3 أيامإذا لم تقبل العمل ولم تطلب تعديلات خلال 3 أيام من التسليم، يُقبل تلقائيًا. وإذا كتبت في محادثة الطلب بعد التسليم، يبقى الطلب قيد الانتظار؛ وبعد ردّنا، قد نعيد بدء مهلة 3 أيام وسنُعلمك بذلك في المحادثة.
  • إعادة التنفيذ أو استرداد المبلغ كاملًاإذا لم تطابق النتيجة متطلبات طلبك ولم تُصلحها التعديلات، أو استغرق العمل أكثر من ضعف مدة التنفيذ، فاكتب في محادثة الطلب: سنعيد تنفيذ العمل أو نردّ إليك المبلغ كاملًا.
كيف يعمل →

الأسئلة والأجوبة

كيف أصدّر من Figma؟

حدد الإطار، وأضف إعداد تصدير في قسم Export في اللوحة اليمنى، واختر PNG بمقاس 1x أو 2x ثم انقر Export. يمكن أن تكون الصفحة الطويلة إطارًا طويلًا واحدًا، والإطارات الطويلة جدًا تُصدَّر بشكل أفضل بمقاس 1x.

هل يمكنكم استخدام رابط Figma فقط؟

لا، نعمل فقط مع الصور المرفوعة، لا مع الروابط أو ملفات .fig، ولا نسجّل الدخول إلى حساباتك.

هل ستُستخدم خطوطي؟

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

هل ستطابق تصميمي بدقة البكسل؟

ستكون قريبة في التخطيط والألوان والأحجام وترتيب الأقسام، لكن ليس بدقة البكسل: الخطوط خطوط نظام مشابهة، والصور تُرسم من جديد ما لم ترفع صورك. والتعديلات تصلح ما يهمك.

هل ستعمل تفاعلات النموذج الأولي؟

الروابط والأزرار وقائمة الهاتف تعمل. أما مسارات النموذج الأولي والنوافذ المنبثقة والرسوم المتحركة والانتقالات فليست جزءًا من هذه الخدمة.

لم تجد إجابتك؟

الباقات