Figma Make أصبحت أداة حقيقية للتحويل من التصميم إلى الكود

النسخة المختصرة: Figma Make تمنحك الآن كوداً لن يحذفه مهندس الواجهة الأمامية فور رؤيته. هذا هو السبب الكامل وراء حديث المصممين عنها، وهو أمر أكبر من مجرد تحسين في السرعة.

في 18 يونيو، أطلقت Figma تحديثاً احترافياً لـ Make. العنوان الرئيسي ليس "أصبحت أسرع." العنوان الرئيسي هو الدقة. Make تُصدر الآن مكونات مرتبطة بتوكنات التصميم الحقيقية وتعيينات Code Connect بدلاً من الترميز المفكك والمؤقت الذي كان يُنتجه التصدير في السابق.

هذا الفرق هو الخط الفاصل بين الخدعة الترفيهية والأداة الحقيقية. الكود المؤقت يُرمى. الكود الذي يُشير إلى نظامك يُدمج.

الفروقات التي يتداولها الجميع

شاهدها مباشرة على figma.com

هذا التحديث اخترق حدوده لأن الناس يُقدمون دليلاً ملموساً. تجاوز موضوع إعلان @figma نحو 9.2 ألف إعادة نشر في غضون أيام، وامتلأت الردود بمقارنات من Figma إلى React من فرق جرّبتها على أنظمتها الخاصة.

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

لقد سمع المصممون وعود "من التصميم إلى الكود" على مدى عقد. هذا الوعد كان دائماً يتهاوى عند أول احتكاك بقاعدة كود حقيقية، لأن المخرجات كانت تتجاهل النظام الذي بُني عليه الكود. هذه المرة، المقارنات تصمد أمام الاختبار.

ما الذي تغيّر فعلاً (التوكنات و Code Connect، لا الـ hex الخام والترميز المباشر)

شاهدها مباشرة على figma.com/make

Make القديم كان يقرأ الإطار ويصف ما يراه. كان يرى زراً أزرق ويكتب #2D7FF9. كان يرى حشوة ويكتب قيمة بالبكسل. النتيجة تبدو صحيحة ولا ترتبط بشيء.

Make الجديد يقرأ الإطار ذاته ويُحلّله مقابل نظامك. الزر الأزرق يُترجَم إلى مرجع توكن، لا قيمة hex مجمّدة. المكوّن يُترجَم إلى تعيين Code Connect الفعلي، فيشير إلى المكوّن الحقيقي في قاعدة الكود بدلاً من اختراع واحد جديد.

هذا هو التحول كله في جملة واحدة. التصدير توقف عن وصف البكسلات وبدأ بالإشارة إلى مصدر الحقيقة لديك.

لماذا يهم هذا عملياً: مراجع التوكنات تعني أن الكود يرث تغييرات الثيم تلقائياً. غيّر التوكن، وكل تصدير يتابعه. تعيينات Code Connect تعني أن التصدير يُعيد استخدام Button التي يُشرف عليها فريقك بدلاً من إنتاج نسخة مكررة تبتعد عن الأصل فور أن يلمسها أحد.

مخرجات Make القديمة مقابل تحديث 18 يونيو

إليك المقارنة، لأن المقارنة هي الحجة.

العمود الأيمن هو الوحيد الذي يستحق مكاناً في طلب السحب. العمود الأيسر هو سبب عدم ثقة أحد بـ "من التصميم إلى الكود" حتى الآن.

أين لا تزال Make تحتاجك

Make تبني الهيكل، لا العقل. المبالغة في هذه الجملة لا تُفيد أحداً، لذا إليك الحد الصادق لما يفعله تحديث 18 يونيو.

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

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

البيانات الحقيقية هي القاتل الصامت الآخر. الإطار يُظهر صفاً واحداً مثالياً. الإنتاج يُظهر المستخدم الذي يبلغ اسمه 40 حرفاً، والسعر الذي يساوي null، والقائمة الفارغة في اليوم الأول.

Make تُسقّل المسار السعيد. أنت تتعامل مع الواقع.

سير عمل عملي مع Figma Make هذا الأسبوع

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

1. احرص أولاً على تعيين توكناتك و Code Connect فعلاً. هذا هو الشرط المسبق غير المبهج. Make لا تتجاوز جودة النظام الذي تُشير إليه، لذا إن كانت توكناتك نصف مُسمّاة وتغطية Code Connect لديك ضئيلة، فأصلح ذلك قبل أن تلوم التصدير.
2. شغّل Make على مكوّن واحد جيد البناء، لا على شاشة كاملة. اختر شيئاً ببنية واضحة وقصة توكنات نظيفة. أنت تختبر الدقة، لا تطلب معجزة.
3. اقرأ الفرق كمراجع كود، لا كمعجب. تأكد أنه حوّل القيم إلى مراجع توكنات وربط بمكوّنك الحقيقي. إن اخترع قيمة hex أو مكوّناً مكرراً، فذلك الإطار لم يكن نظيفاً من حيث النظام. أصلح المصدر.
4. سلّم السقالة للمهندس مع توضيح صريح بأن عمل الحالة والبيانات وإمكانية الوصول يقع على عاتقه. التصدير هو البنية الأولية. القرارات هي العمل الفعلي.
5. أعد تغذية ما تعلمته في النظام. كل مكان خمّنت فيه Make هو مكان كانت توكناتك أو تعيينات Code Connect فيه غامضة. تشديدها يجعل التصدير التالي أفضل. النظام يتراكم.

النمط هو إنسان في الحلقة، لا إنسان خارج الوظيفة. Make تُزيل خطوة الترجمة المملة. لا تُزيل التفكير.

ما يفعله هذا بمُخرَجك

شاهدها مباشرة على atlassian.design

هذا يُغيّر بهدوء معنى "الانتهاء" بالنسبة للمصمم. لسنوات، كان المُخرَج إطاراً مثالياً بالبكسل وأملاً مهذباً بأن الهندسة ستتطابق معه. كان التطابق دائماً ينطوي على خسارة.

الآن الإطار أقرب إلى العقد. إن كان تصميمك يُشير إلى توكنات حقيقية ومكوناتك مُعيّنة عبر Code Connect، فالتصدير يحمل قصدك إلى الكود بانزياح أقل. التسليم يتوقف عن كونه ترجمة ويبدأ في أن يكون نقلاً.

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

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

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

تحديث 18 يونيو يُغيّر الإجابات الحقيقية على الأسئلة التي يطرحها المصممون أكثر ما يطرحون حول Figma Make.

هل Figma Make تكتب React جاهزاً للإنتاج الآن؟

أقرب، لكن ليس من تلقاء نفسها. التحديث يُنتج React مرتبطاً بتوكناتك الحقيقية وتعيينات Code Connect، وهو سليم ويستحق الإبقاء عليه. لكنه لا يزال يُبقي الحالة وإمكانية الوصول والبيانات الحقيقية لك. تعامل معه كمسودة أولى قوية، لا كميزة مكتملة.

ما هو Code Connect ولماذا يهم للتصدير؟

Code Connect يُعيّن مكوّناً في ملف Figma الخاص بك إلى المكوّن الحقيقي في قاعدة الكود. إنه الفرق بين أن تخترع Make زراً جديداً وأن تُعيد استخدام Button التي يُشرف عليها فريقك، بحيث يُشير التصدير إلى مصدر الحقيقة لديك بدلاً من إنتاج نسخة مكررة.

هل Make تستخدم توكنات التصميم الخاصة بي أم تخترع قيمها الخاصة؟

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

أين لا تزال Make تقصر؟

خمسة أماكن لا تزال تحتاج إنساناً، وهي نفس الأماكن التي يُدرجها الجدول أعلاه:

• منطق الحالة: تحميل، خطأ، فراغ، نجاح
• سلوك التفاعل والحركة
• إمكانية الوصول ما وراء الواضح
• البيانات الحقيقية، الحالات الطرفية، والنصوص الطويلة
• متى تُعيد استخدام مكوّن مقابل إنشاء واحد جديد

Make تتعامل مع التخطيط والتنسيق المرتبط بالتوكنات والسقالات الثابتة. القرارات الحكمية هي حيث يسكن العمل الحقيقي.

هل ينبغي أن أُغيّر سير عملي هذا الأسبوع؟

نعم، بطريقة واحدة صغيرة. شغّل Make على مكوّن واحد نظيف، راجع الفرق كمهندس، واستخدم ما تكتشفه لتشديد توكناتك وتغطية Code Connect. لا تحوّل فريقك بالكامل إلى التسليم بالذكاء الاصطناعي بين عشية وضحاها.

الخلاصة

Figma Make تجاوزت الخط من عرض توضيحي إلى أداة في 18 يونيو. الدليل ليس نحو 9.2 ألف إعادة نشر على موضوع إعلان @figma، بل المقارنات الإنتاجية التي نشرها المهندسون تحته ولم يحذفوها.

الآلية بسيطة. Make توقفت عن وصف البكسلات بـ hex الخام والترميز المفرد، وبدأت بالإشارة إلى توكناتك الحقيقية وتعيينات Code Connect. هذا هو الفرق بين الكود الذي تتخلص منه والكود الذي تدمجه.

لا تُبالغ في بيعه لفريقك. Make تبني الهيكل. الحالة، التفاعل، إمكانية الوصول، والحالات الطرفية لا تزال وظيفتك، وستظل كذلك دائماً. أذكى خطوة هذا الأسبوع هي استخدام التحديث كسبب لتصحيح توكناتك و Code Connect أخيراً، لأن النظام النظيف هو ما يُحوّل هذه الميزة من لعبة إلى أداة يمكنك فعلاً الشحن بها.