توقف عن التصميم في Figma

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

هذا ليس هجوماً على Figma. ما زال Figma يتفوق في أعمال الأنظمة واستكشاف الهوية والرسم التخطيطي في FigJam. الأطروحة أضيق وأصعب. في 2026 يحدث تصميم المنتجات في الكود. لقد حلّ v0 وCursor وLovable وسجل Vercel UI محل لوحة العمل (artboard) كمكان تُصمَّم فيه الواجهات فعلاً. المصممون الذين ما زالوا يسلّمون إطارات Figma مثالية البكسل ليقوم المهندسون بـ"تنفيذها" يؤدون وظيفتين بنصف السرعة.

ما الذي تغيّر فعلاً

بُني Figma لعصر كان الإنتاج فيه هو عنق الزجاجة. في 2018 كان بناء مكوّن React يعمل يستغرق من المهندس ثلاثة أيام، وفي المدة نفسها كان المصمم يخرج عشرين إطاراً عالي الدقة. كان تسليم لوحات مسطحة هو الخيار العقلاني. كانت اللوحة أسرع جزء في خط الإنتاج.

انقلبت هذه المعادلة في 2026. يحوّل v0 جملة واحدة إلى مكوّن يعمل خلال ثلاثين ثانية. يعدّل Cursor مستودعاً حقيقياً مع diff حقيقي. ويُنشئ Lovable تطبيقاً قابلاً للنشر من موجّه واحد. صارت اللوحة أبطأ جزء في خط الإنتاج لا أسرعه، والفجوة تتسع كل ربع سنة. التحليل الأعمق للتحول على مستوى المُخرَج موجود في موت الموك أب. أما هذا المقال فيدور حول الأداة التي تنتج المُخرَج.

الإطار المسطح لم يزدد سوءاً. المنضدة هي التي تحسّنت.

أين ما زال Figma يستحق مكانه

كن صريحاً. Figma ممتاز في أربع مهام، والتظاهر بغير ذلك يجعل بقية الحجة تُرفض.

ما زال Figma يتفوق في استكشاف الهوية البصرية، حيث تعيش الشعارات ودراسات الخطوط وأنظمة الألوان قبل وجود أي قاعدة كود. ويتفوق في جرد أنظمة التصميم، الملف الواحد الذي يسرد كل token وكل variant وكل حالة بنموذج تعاون متعدد المستخدمين لا يضاهيه شيء. ويتفوق في الرسم التخطيطي في FigJam ومواءمة الفريق، حيث السبورة وخرائط الرحلة والسطح نفسه هو الحوار. وما زال يتفوق للمصمم الذي لا يستطيع فعلاً قراءة الكود، وهو دور أندر في 2026 مما تدّعي الصناعة، لكنه حقيقي.

كل ما عدا ذلك، أي كل واجهة منتج تصل إلى مستخدم حقيقي، مكانه الكود.

الفروق الخمسة

التصميم في Figma والتصميم في الكود ليسا العمل نفسه بسرعتين مختلفتين. إنهما عملان مختلفان.

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

السرعة. حلقة Figma هي: عدّل الإطار، علّق للمهندس، انتظر، راجع البناء، علّق مجدداً، انتظر مجدداً. حلقة الكود هي: عدّل، أعد التحميل، شاهد. الأولى تستغرق أياماً والثانية ثواني. سرعة التكرار تحدد كم فكرة يختبرها الفريق قبل الإطلاق.

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

يختفي التسليم. التسليم هو اللحظة الأغلى في الخط التقليدي. التصميم في الكود يحذفه. لا توجد خطوة ترجمة لأن التصميم هو التنفيذ.

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

v0 وCursor وLovable وVercel UI هي سطح التصميم الجديد

بيئة التصميم الجديدة ليست أداة واحدة، بل حزمة بلغت الكتلة الحرجة دفعة واحدة. كل أداة منها تتولى طبقة مما كان Figma يفعله وحده.

v0 من Vercel يحوّل موجّهاً إلى مكوّن React وTailwind يعمل في نحو ثلاثين ثانية. انسخ (fork) النتيجة، وكرّر بالموجّه أو يدوياً، واشحنها إلى قاعدة الكود. نموذج النسخ والتكرار يحل محل "كرّر وعدّل" في Figma، إلا أن النسخة هنا كود حقيقي.

Cursor هو سطح التصميم لـمصممي المنتجات الذين يقرؤون الكود. افتح المستودع الفعلي، وشاهد العرض الفعلي، وعدّل مكوّناً بموجّه أو يدوياً، وراقب التغيير في المتصفح في الدقيقة نفسها.

Lovable هو سطح المؤسس والمصمم المنفرد. موجّه واحد إلى تطبيق ويب يعمل، ثم كرّر على الشيء الشغّال. أسرع طريق من النية إلى رابط حي، دون حاجة إلى ملف Figma.

Vercel UI وسجل shadcn هما رف المكوّنات. اسحب مكوّناً حقيقياً، وخصصه داخل قاعدة الكود، واشحنه. يقدّم shadcn المكوّنات ككود تملكه، أي أن نظام التصميم قابل للتعديل في السطح نفسه الذي يجري فيه التصميم.

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

كيف تعمل Linear وStripe وAnthropic فعلاً

الفرق التي تشحن أفضل واجهات المنتجات في 2026 تتشارك شكل سير العمل، ولا واحدة منها تشحن Figma كمُخرَج نهائي.

Linear تعامل قاعدة الكود كمصدر الحقيقة. فريق هندسة التصميم لديها يُنزل التصاميم كـ pull requests على التطبيق العامل، لا كإطارات Figma. أما نظام التصميم في Stripe فيُبنى ويُشحن من الكود. يوجد Figma كتوثيق لاحق للكود، لا كمصدر سابق له. تعديل النظام يعني تعديل الكود. وتصمّم Anthropic واجهات Claude مباشرة، في مكوّنات React وClaude artifacts، مع مصممين يقرؤون التطبيق الفعلي ويعدّلونه في كل إصدار.

يتكرر النمط في كل فريق منتج يشحن بسرعة فائقة. Tokens من المنبع، والكود كقماش رسم، والذكاء الاصطناعي بوصفه طبقة الإنتاج، والمصممون داخل الـ diff. خط الإطارات المسطحة ليس طريقة عمل أي منهم، وقد لحقت الحسابات ببقية الصناعة.

خمسة أسئلة قبل أن تصمم في الكود

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

1. هل تشحن العمل أم تسلّمه؟ إن كنت تشحن، فالكود يفوز. وإن كنت تسلّم، فالكود يفوز أيضاً، لكن الفرق الثقافي أكبر.
2. هل تستطيع قراءة قاعدة الكود؟ ليس كتابة React إنتاجي من الصفر، بل قراءة المكوّنات وفهم الـ props والتعرف على design token وتعديل القيم دون كسر البناء.
3. هل التصميم مواصفات ثابتة أم سطح تفاعلي؟ المواصفات مكانها Figma. أما السطح الذي فيه hover وfocus وتمرير وحركة وحالات حدّية فمكانه الكود.
4. هل لدى الفريق نظام تصميم يمكن توسيعه؟ مكتبة مكوّنات حقيقية، ولو بقاعدة shadcn، تجعل التصميم بالكود أولاً أسرع من Figma بمرتبتين من الحجم.
5. هل سرعة التكرار هي عنق الزجاجة لديك؟ إن كنت تخسر السبرنتات في دورة التسليم، فالكود أولاً يقتل عنق الزجاجة. وإن كنت تخسرها في استراتيجية العلامة، فالكود أولاً لا يفعل شيئاً. حل المشكلة الصحيحة.

الفريق الذي يحقق أربعاً من خمس يعيش في الكود. والفريق الذي يحقق اثنتين من خمس عليه أن يقسّم العمل بين Figma والكود، مع ميل طفيف نحو الكود في كل مشروع جديد.

أنماط سيئة يجب التخلي عنها

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

وهم Dev Mode كتسليم. يشحن المصمم ملف Figma مليئاً بالخطوط الحمراء. و"يستخدم المهندس Dev Mode" للترجمة. يتظاهر الطرفان أن الترجمة أمينة. وهي لا تكون كذلك أبداً. Dev Mode مفيد، لكنه وهم التسليم نفسه بغلاف جديد. الحل الحقيقي أن يعدّل المهندس والمصمم القطعة نفسها، وهذا ما تتيحه أسطح الكود. وللطبقة الرابطة انظر دليل Figma MCP.

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

نظام التصميم الذي يعيش في Figma ويبتعد بصمت عن الكود. مكتبة Figma تقول إن حشوة الزر 12px. والكود يقول 14px. لم يحدّث أحد أياً منهما. بعد ستة أشهر يصبح ملف Figma خيالاً. مصدر حقيقة واحد، في الكود، مع Figma كعرض لاحق.

إعادة التصميم التي تستغرق ستة أشهر وتُشحن كملف PDF. إعادة تصميم رئيسية تُسلَّم كتصدير Figma من مئة صفحة، وتُعرض على الإدارة العليا، وتُمرَّر إلى الهندسة لـ"المرحلة الثانية". المرحلة الثانية لا تحدث لأنه حين تقدّر الهندسة حجم إعادة البناء تكون الشركة قد غيّرت استراتيجيتها مرتين. إعادة التصميم التي لا تُشحن لم تكن موجودة.

تدقيق التصميم بالكود أولاً

قبل انطلاق المشروع القادم، أجرِ التدقيق. سبعة أسئلة، عشر دقائق، إجابات حادة.

1. ما المُخرَج، إطار أم واجهة مشحونة؟ إن كانت مشحونة، فالمُخرَج هو الكود. كفّ عن التظاهر بأن الإطار هو المنتج.
2. من يملك التطبيق العامل، وهل المصمم داخل الـ diff؟ إن لم يكن المصمم في الـ diff، فأصلح ذلك قبل تغيير الأدوات.
3. أين تعيش الـ tokens؟ إن كان الجواب Figma، فانقلها. ملف الـ tokens يجب أن يكون مصدر الحقيقة الذي يقرؤه Figma، لا العكس. يغطي تحليل سير عمل التصميم بالذكاء الاصطناعي مسار الترقية.
4. كم تبلغ دورة التكرار بالساعات؟ إن كانت أكثر من أربع ساعات من التعديل إلى التغيير المشحون، فسير العمل هو المشكلة لا التصميم.
5. أي الواجهات ما زالت تُصمَّم في لوحات مسطحة، وأيها انتقلت إلى الكود؟ ارسم خريطة التقسيم. يجب أن يميل التقسيم نحو الكود في كل مبادرة جديدة.
6. ما الإضافات التي يعتمد عليها الفريق لتزييف دقة التسليم؟ إن كان الجواب "كثيرة"، فراجع إضافات Figma التي تستحق البقاء واحذف الباقي.
7. ماذا سيشحن الفريق في الربع القادم ليثبت أن سير العمل يعمل؟ ليست شريحة عرض، بل واجهة منشورة. إن كان الجواب فضفاضاً، فسير العمل لم يتغير فعلاً بعد.

سير العمل الذي ينجو من التدقيق يشحن منتجاً. والذي يفشل فيه يشحن عروضاً تقديمية. الفرق يتراكم كل ربع سنة، والسرعة هي العلامة حين تتساوى بقية المتغيرات تقريباً.

الأسئلة الشائعة

هل مات Figma؟

لا. Figma لم يمت، والأطروحة ليست "Figma مات". Figma ممتاز لأعمال الهوية البصرية وجرد أنظمة التصميم والرسم في FigJam وعروض أصحاب المصلحة. الأطروحة أضيق. لم يعد Figma المكان الذي يحدث فيه تصميم المنتج، لأن قاعدة الكود أسرع وأعلى دقة وتشحن المُخرَج نفسه الذي يلمسه المستخدم.

ماذا عن المصممين الذين لا يستطيعون قراءة الكود؟

على هذا المصمم أن يتعلم قراءة الكود لا كتابته. قراءة المكوّنات والتعرف على الـ tokens وتعديل القيم ومراجعة الـ diff مهارة تُكتسب في أسبوع، لا تغيير مهنة. يتولى الذكاء الاصطناعي العبء الثقيل في كود الإنتاج في 2026. ويجلب المصمم التكوين والحكم والذوق إلى السطح العامل، وهذا أثمن لا أقل حين تكون طبقة الإنتاج رخيصة.

هل على فريق صغير فعلاً أن يتخطى Figma كلياً؟

لا كلياً. على الفريق الصغير أن يستخدم Figma لاستكشاف الهوية وجرد الأنظمة ومواءمة الفريق. التحول يخص واجهات المنتج، حيث سيتفوق v0 أو Cursor أو Lovable أو سجل shadcn على اللوحة في كل مقياس. التقسيم الصريح هو الهوية والأنظمة في Figma، وواجهات المنتج في الكود، والميل في المبادرات الجديدة نحو الكود.

كن في الجانب الصحيح من سير العمل

كان عصر Figma كأداة تصميم صحيحاً لخمس عشرة سنة وقد انتهى. قاعدة الكود هي بيئة التصميم في 2026، والفرق التي تشحن واجهات المنتجات في الكود تتقاضى أكثر وتتعلم أسرع وتفوز بالمشاريع التي كانت تملكها استوديوهات عروض Figma.

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