دبي · تطوير المواقع
تحويل Figma إلى HTML أو WordPress أو React أو Shopify: كود مكتوب يدويًا، لا مُصدَّر.
ترسل تصميمًا منتهيًا، وتستلم واجهة أمامية جاهزة للنشر: ترميز دلالي، وسلوك متجاوب حقيقي بين المقاسات التي رسمتها، ومكوّنات يمكن الوصول إليها بلوحة المفاتيح، ومستودع في حسابك مع ملف README يشغّل المشروع من نسخة نظيفة.
- دون ترميز منشئ الصفحات
- فحص لوحة المفاتيح والتباين
- المستودع ملكك
ما تشمله الخدمة
ستة أشياء تحدث بين الملف والمتصفح.
نقل الشاشات كما هي هو النصف الأصغر من العمل. أما الباقي فهو كل ما لم يستطع التصميم قوله، وهو النصف الذي يحدد كيف يكون امتلاك الموقع في عامه الثاني.
قراءة الملف قبل عرض السعر
نفتح ملف Figma ونمرّ عليه إطارًا إطارًا: ما هو مكوّن حقيقي وما هو نسخة ملصوقة، وأي المقاسات رُسمت، وأي الحالات موجودة، وهل الخطوط مرخَّصة للويب. تعود الثغرات إليك في قائمة مكتوبة، ويُبنى السعر على تلك القائمة لا على قراءة متفائلة للشاشات.
ترميز مكتوب يدويًا
عناوين مرتبة، ومعالم صفحة، وأزرار حقيقية، وحقول إدخال بتسميات: بنية تعني شيئًا لقارئ الشاشة وللمطوّر التالي. أما الترميز المولَّد آليًا فيعطيك حاويات بتموضع مطلق وفئة CSS لكل عنصر. يبدو مطابقًا يوم التسليم، ولا يستطيع أحد تغييره بعد ذلك.
المقاسات بين المقاسات
يُرسم التصميم عند مقاسين أو ثلاثة. أما المتصفح فهو كل مقاس بينها، إضافة إلى هاتف بوضع أفقي وحاسوب محمول بشريط جانبي مفتوح. سلوك كل قسم عند المقاسات التي لم يرسمها أحد يُقرَّر في الكود، ويُقترح عليك، ويُراجَع كأي جزء آخر من البناء.
الحالات التي لم يرسمها أحد
مرور المؤشر، والتركيز، والتعطيل، والتحميل، والحالة الفارغة، والخطأ، وصف الجدول الذي كتب فيه أحدهم اسم منتج من أربعين كلمة. كل واحدة من هذه قرار، لا فجوة تُملأ بصمت. ندرجها في قائمة، ونقترح معالجة بلغة التصميم نفسه، ونحصل على اعتمادها.
محتوى يستطيع المحرر تحريكه
حين يكون الهدف قالب WordPress أو Shopify، يتحول التصميم إلى كتل (blocks) وأقسام يستطيع فريقك إعادة ترتيبها في المحرر. النصوص والصور والترتيب ملك لهم؛ أما المسافات ومقياس الخط والألوان فتبقى مع النظام، فتبدو الصفحة الخامسة كالأولى.
مفحوص قبل التسليم
نسب التباين، وترتيب التركيز، والوصول بلوحة المفاتيح، ثم الأجهزة والمتصفحات الحقيقية، ثم وزن الصفحة مقابل ميزانية الأداء المتفق عليها في البداية. البناء الذي يطابق التصميم تمامًا ثم يتعثر على هاتف Android متوسط لم يطابق الجزء الذي يهم.
لمن هذه الخدمة
ثلاثة طرق تصل بك إلى هنا، وشرط واحد على الثلاثة.
الشرط أن يكون التصميم مستقرًا. فإن كان ما زال يتغير، فكل تعديل يكلّف مرتين: مرة في الملف ومرة في الكود. والنصيحة الصادقة أن تُنهي التصميم أولًا.
استوديو تصميم بلا فريق واجهة أمامية
تبيع التصميم، والعملاء يسألونك دائمًا من سيبنيه. التعاقد معنا من الباطن على الواجهة الأمامية يتيح لك تسعير المشروع كاملًا دون أن توظّف له، والتسليم الكامل يُكتب لمن سيرث الكود، وهو في هذا النوع من المشاريع غالبًا مطوّر عميلك لا نحن.
عرضك الأخير توقف عند ملف Figma.
فريق منتج سبقه التصميم
اعتُمدت الواجهة قبل أسابيع، والهندسة مشغولة بالواجهة الخلفية حتى الربع القادم. الواجهة الأمامية هي الجزء الذي يمكن فصله وتنفيذه بالتوازي، لأنه يعتمد على ملف التصميم لا على خارطة طريقك.
اعتُمد التصميم قبل شهر ولا شيء في البيئة التجريبية.
شركة تملك تصميمًا ولا شيء غيره
كلّفت أحدهم بتصميم، مستقلًا أو استوديو أو موظفًا غادر منذ ذلك الحين، وبين يديك ملف بلا مستودع ولا من يبنيه. ما تحتاج إليه هو البناء. وتسعير التصميم لك مرة أخرى يعني أن نبيعك شيئًا دفعت ثمنه بالفعل.
تملك ملف Figma ولا تملك كودًا.
كيف ننفّذ العمل
خمس مراحل، والأولى قد تُنهي الحديث.
مراجعة الملف تسبق السعر. فالتصميم بثلاثة مقاسات وحالات كاملة مشروع مختلف عن شاشة واحدة مسطحة، ومن حقك أن تعرف أيهما بين يديك قبل أن تلتزم بأي شيء.
01
مراجعة الملف وتحديد المخرج
قراءة لملف Figma إطارًا إطارًا، تُدوَّن في قائمة بما هو موجود وما هو ناقص: المكوّنات مقابل النسخ، والمقاسات المرسومة، والحالات المرسومة، وتراخيص الخطوط، وهل يمكن تصدير الأصول الرسومية أصلًا. ثم يُتفق على المخرج: HTML ثابت، أو واجهة أمامية بـ React، أو قالب WordPress، أو قالب Shopify.
02
البنية قبل التنسيق
هيكل الصفحة أولًا: ترتيب العناوين، ومعالم الصفحة، وحدود المكوّنات، واسم كل مكوّن. الأسماء تطابق ملف Figma، فيكون السؤال عن مكوّن الترويسة سؤالًا عن شيء واحد، لا عن شيئين يتشابهان مصادفة.
03
البناء على رابط بيئة تجريبية
المكوّنات وحالاتها، عند كل مقاس شاشة، في دفعات أسبوعية على رابط تفتحه متى شئت. لا كشف مفاجئ في النهاية: البناء مرئي من الأسبوع الأول، وهو أيضًا الوقت الذي تكون فيه الخلافات أقل كلفة.
04
ضبط جودة التصميم جنبًا إلى جنب
البناء والملف مفتوحان أحدهما بجانب الآخر، عند كل مقاس، مع من رسمه. ثم المتصفحات، والأجهزة الحقيقية، ولوحة المفاتيح، والتباين، وكل مسار في النماذج. الانحرافات عن الملف تُدرج مع سببها، لأن بعضها مقصود ومن حقك أن تعرف أيّها.
05
التسليم الكامل
المستودع، وملف README، وجولة شرح مسجّلة مع من سيتولى الصيانة. وحين يكون الهدف قالبًا، يرافقه تدريب على التحرير، لأن القالب الذي لا يستطيع أحد في فريقك تشغيله هو موقع ثابت بخطوات إضافية.
التقنيات
تقنيات مألوفة، اختيرت ليعرفها المطوّر التالي.
لا شيء هنا غريب. وهذا هو المقصود: التقنيات غير المألوفة وسيلة لتقييد العميل بمن بناها، متنكّرة في زيّ الابتكار.
- الواجهة الأمامية
- Next.jsReactTypeScriptTailwind CSSAstro
- إدارة المحتوى والتجارة
- WordPressShopifySanityPayloadWooCommerce
المخرجات
ما الذي يصلك، وكيف يبدو لمن يرثه.
الاختبار ليس أن يطابق البناءُ التصميمَ يوم التسليم، بل أن يستطيع من لم يتحدث معنا قط تعديله بعد ستة أشهر دون أن يفتح ملف Figma ليخمّن.
- المستودع في حسابك بسجل الإيداعات كاملًا، لا ملف مضغوط بالنسخ النهائية
- ملف README يشغّل المشروع من نسخة نظيفة
- مكوّنات تحمل أسماء المكوّنات نفسها في ملف Figma
- كل حالة تفاعلية مبنية ومراجَعة: مرور المؤشر، والتركيز، والتعطيل، والتحميل، والحالة الفارغة، والخطأ
- رموز التصميم (design tokens) ككود: مقياس الخط ومقياس المسافات والألوان، مقروءة من الملف لا مقدَّرة بالعين
- رابط بيئة تجريبية من الأسبوع الأول، يُحدَّث مع تقدم البناء
- قالب WordPress أو Shopify يستطيع محرروك تشغيله، حين يكون ذلك هو المخرج
- جولة شرح مسجّلة في الكود مع من سيتولى صيانته
حين يخلو الملف من شيء يحتاج إليه البناء، كمقاس أو حالة تفاعلية أو محتوى طويل، يُدرج في قائمة مكتوبة قبل عرض السعر، لا في طلب تغيير في منتصف الطريق.
الأسعار
ما يكلّفه التحويل.
يُسعَّر لكل مشروع
سعر ثابت
التحويل يقع خارج الباقات المنشورة، لأنه يبدأ من تصميم موجود بالفعل: يُسعَّر على حدة وفق عدد الصفحات وعدد المكوّنات والمخرج المطلوب، ويُثبَّت قبل أن يبدأ أي شيء. أقرب نقطة مرجعية في هذا الموقع هي 16,000 درهم، وهي ثمن باقة الانطلاق: موقع من 5 إلى 8 صفحات مصمَّم ومبني، وهو منتج مختلف لا نسخة من هذا. أما مكتبة مكوّنات كبيرة، أو واجهة أمامية بـ React تحمل التوجيه والحالة، أو نسخة عربية تُبنى إلى جانب الإنجليزية، فتضع العمل في نطاق باقة النمو، من 48,000 درهم. الأسعار لا تشمل ضريبة القيمة المضافة 5%، والدفع على دفعات مرحلية.
ما الذي يغيّر السعرما يشمله ذلك
- مراجعة ملف Figma، وقائمة مكتوبة بما لا يحتويه
- ترميز مكتوب يدويًا، لا مُصدَّر ولا مولَّد
- كل مقاس شاشة مرسوم، والمقاسات بينها
- حالات تفاعلية محددة ومبنية ومعتمدة
- فحص لوحة المفاتيح والتباين والأجهزة الحقيقية قبل التسليم الكامل
- المستودع، وملف README، وجولة شرح مسجّلة
استوديوهات ووكالات التصميم
التصميم هنا هو المنتج، فيُقرأ البناء سطرًا سطرًا مقابل الملف، وسمعة الاستوديو هي ما يُطلق فعلًا. وما يحتاج إليه هذا العمل هو الإبلاغ عن الانحراف لا امتصاصه: حين تتعذر إعادة إنتاج ظل بدقة، أو يفشل اقتران خطوط في التباين، يعود القرار إلى من رسمه.
البرمجيات ومنتجات البرمجيات كخدمة (SaaS)
الواجهات هنا مكوّنات قبل أن تكون صفحات، والزر نفسه يظهر في أربعين موضعًا. وما يحتاج إليه هذا القطاع بناء يصل كمكتبة مكوّنات بحالاتها، لا كمجموعة شاشات، لأن الميزة التالية سيجمّعها منها مهندس لم يكن طرفًا في هذا الحديث قط.
التحويل هو أضيق تعاقد ضمن خدمة التطوير الأوسع لدينا وهو الذي يبدأ من أكثر المراحل تقدمًا، لأن قرارات التصميم الصعبة اتُّخذت بالفعل. فإن كان التصميم ما زال يتغير، أو لم يكن هناك تصميم أصلًا، فالبناء المخصص هو نقطة البداية الأصدق.
أسئلة
تُطرح قبل أن ينتقل الملف من يد إلى يد.
تستطيع إنتاج كود، وللنموذج الأولي الذي يُرمى بعد الاستخدام يكفي ذلك غالبًا. لكن ما تنتجه نادرًا ما يكون قابلًا للصيانة: حاويات بتموضع مطلق، وفئة CSS لكل عنصر، ولا بنية عناوين، وتخطيط يصمد عند المقاس الذي رُسم فيه الإطار ولا يصمد في غيره. كتابة CSS لم تكن يومًا الجزء المكلف. المكلف هو البنية والحالات والسلوك المتجاوب التي لم يحددها الملف قط.
خاصية Auto layout، ومكوّنات حقيقية لا نسخًا ملصوقة، والمقاسات التي تهمك مرسومة فعلًا. وبعد ذلك، كلما حمل الملف حالات أكثر، من مرور المؤشر والتركيز والتعطيل والحالة الفارغة والخطأ، قلّت القرارات التي نتخذها نيابة عنك. ولا شيء من هذا شرط مسبق: نراجع الملف أولًا ونرسل إليك ما ينقصه، وتختار أنت بين أن تسد الثغرات بنفسك وأن نقترح نحن ما ينقص.
نعم، لكن التخطيطات الأصغر تصبح قرارات لا تحويلًا. نقترح كيف يُعاد تدفق كل قسم، ونحصل على اعتماده ضمن البناء، ونراجعه مع كل شيء آخر في الوقت نفسه. وهذا أسرع من تكليف أحد بتصميم ثانٍ، وأبطأ من البناء من ملف مقاساته مرسومة بالفعل، ولهذا يفصل عرض السعر بين الاثنين.
يتبع ذلك ما يجب أن تفعله الصفحات بعد الإطلاق، لا شكل التصميم. فـ HTML الثابت يناسب صفحة هبوط أو حزمة قوالب سيدمجها شخص آخر. وReact أو Next.js يناسب واجهة منتج فيها حالة وتوجيه ومكوّنات قابلة لإعادة الاستخدام. وقالب WordPress يناسب فريقًا ينشر، وقالب Shopify يناسب كتالوجًا وصفحة دفع. ونوصي بأبسط خيار يفي بالغرض.
إلى حد يجعل المراجعة جنبًا إلى جنب عند كل مقاس مرحلة من مراحل المشروع، ويُدرج كل انحراف مع سببه. بعض الانحرافات مقصود: الخطوط الطباعية تظهر في المتصفح بشكل يختلف عنه على لوحة التصميم، والفاصل الرفيع بسماكة نصف بكسل يختفي على بعض الشاشات، واقتران ألوان يفشل في التباين يُطرح للنقاش بدل أن يُطلق. الدقة البكسلية وصف للقطة شاشة؛ أما البناء فعليه أن يعمل على جهاز.
غالبًا، والجواب يعتمد على ما داخل الملف لا على امتداده. ملفات Sketch وXD تحمل عادةً بنية تستحق القراءة. أما ملف PSD أو PDF أو JPEG المسطح فهو صورة: لا قيم مسافات، ولا مكوّنات، ولا حالات، فنضطر أثناء البناء إلى إعادة تركيب القرارات بدل قراءتها. وإعادة بناء العمل الفني كملف Figma سليم أولًا أرخص عادةً من كتابة الكود مرتين من تخمين.
نعم، وهو قرار بناء بقدر ما هو قرار ترجمة. التخطيط ينعكس، والأيقونات ومؤشرات التقدم تنقلب، ومحاذاة النماذج تتغير، والعربية تحتاج إلى خط مختار لها لا خط احتياطي من النظام. ومن ملف إنجليزي فقط يعني ذلك اقتراح معالجة الاتجاه من اليمين إلى اليسار (RTL) قسمًا قسمًا للاعتماد، وهو أرخص من جولة تصميم ثانية، وأرخص بكثير من إضافته بعد الإطلاق.
لكل مشروع، وفق عدد الصفحات وعدد المكوّنات والمخرج المطلوب، لا لكل صفحة ولا بالساعة. يُكتب النطاق ويُسعَّر قبل أن يبدأ أي شيء، فتكون الحالة أو المقاس الذي لم يكن في الملف حديثًا في مرحلة عرض السعر لا فاتورة في النهاية. الأسعار لا تشمل ضريبة القيمة المضافة 5%، والدفع على دفعات مرحلية.
مستعد لبناء شيء يدوم؟
أخبرنا بما تحتاج إليه. ستحصل على رد محدد النطاق مع سعر تقديري، من مهندس لا من مندوب مبيعات.