web design uiJune 30, 20269 min read

مصدر الحقيقة في Figma انتقل: Figma أصبحت الآن توثيقاً

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

By Boone
XLinkedIn
figma documentation not source of truth

قاعدة الكود هي مصدر الحقيقة الآن، وFigma توثيق يصفها. هذا هو التحوّل الذي أجرته مجموعة متنامية من فرق المنتجات خلال 2026، وهو ليس موقفاً ضد Figma. إنه النهاية المنطقية لثلاثة أشياء نضجت في الوقت ذاته.

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

ماذا يعني "مصدر الحقيقة" فعلاً

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

لسنوات، كان ذلك Figma. المصمّمون يحدّدون القيم، والمهندسون يترجمونها، وحين ينحرف الإنتاج، كان ملف Figma هو المرجع الذي تُصحّح إليه.

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

التحوّل: الكود أولاً مع Figma كتوثيق

الكود-أولاً يعكس الافتراض الافتراضي. القيم والمكوّنات وواجهة المستخدم المُشحنة مُعرَّفة في الـ repo. Figma تصف هذا النظام بدلاً من أن تُعرّفه.

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

هرم فوكسل: عمود repo مضيء بالمرجاني الشاهق على قاعدة مضاءة بالسماوي كمصدر وحيد للحقيقة، بجانب عمود لوح Figma رمادي داكن أقصر يعمل الآن كتوثيق.
هرم فوكسل: عمود repo مضيء بالمرجاني الشاهق على قاعدة مضاءة بالسماوي كمصدر وحيد للحقيقة، بجانب عمود لوح Figma رمادي داكن أقصر يعمل الآن كتوثيق.

إليك ما يمتلكه كل طبقة بمجرد أن تجعل التحوّل صريحاً.

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

ما الذي جعل الـ repo مصدر الحقيقة

ثلاثة أشياء نضجت في آنٍ واحد. لا شيء منها هو "الذكاء الاصطناعي حلّ محلّ المصمّمين." كلها بنية تحتية مملّة أخيراً وصلت.

انتقلت الـ tokens إلى الكود. الـ design tokens هي القيم الخام: اللون والمسافات ونصف القطر وحجم الخط. مع خطوط أنابيب الـ token المبنية على أدوات مثل Style Dictionary، تُعرَّف هذه القيم مرة واحدة في الكود وتُزامَن إلى الخارج لكل منصة. في اللحظة التي يعيش فيها اللون الأساسي في الـ repo وتقرأه Figma منه، يصبح الـ repo مصدراً للون. القيم الأخرى تتبع.

ارتبط التصميم والكود. Dev Mode في Figma وCode Connect يتيحان لمكوّن Figma أن يشير إلى المكوّن المُبرمَج الفعلي في الـ repo. هذا هو الجزء الذي يتجاوزه الناس. Figma لا تحارب هذا التحوّل، بل شحنت الميزة التي تجعل الكود هدفاً ملزماً.

في الوقت ذاته يمنح Storybook المكوّن المُبرمَج بيتاً حياً يمكنك رؤيته واختباره، ويوزّع shadcn/ui المكوّنات ككود حقيقي تنسخه إلى الـ repo بدلاً من طبقة تُعيد رسمها. حين يملك سؤال "أيّهما صحيح" أخيراً إجابةً حتمية، تكون الإجابة هي الكود.

صفحة تسويق Figma Dev Mode، "التطوير والتصميم، متصلان في كل خطوة"، Figma نفسها تجعل المكوّن المُبرمَج الهدفَ الملزم.
صفحة تسويق Figma Dev Mode، "التطوير والتصميم، متصلان في كل خطوة"، Figma نفسها تجعل المكوّن المُبرمَج الهدفَ الملزم.

الذكاء الاصطناعي يبني في الـ repo، لا على اللوحة. الجيل الحالي من توليد واجهة المستخدم يقرأ الكود ويكتبه. لا يقرأ طبقات Figma ولا يعيد كتابتها. لذا تبدأ حلقة البناء الآن وتنتهي في الـ repo، مما يجعل الـ repo بهدوء المكانَ الذي يتراكم فيه العمل فعلاً.

عرض مكوّنات shadcn/ui، كتل واجهة مستخدم مصقولة موزَّعة ككود حقيقي تنسخه مباشرةً إلى الـ repo بدلاً من إعادة رسمه كطبقة Figma.
عرض مكوّنات shadcn/ui، كتل واجهة مستخدم مصقولة موزَّعة ككود حقيقي تنسخه مباشرةً إلى الـ repo بدلاً من إعادة رسمه كطبقة Figma.

ما الذي تُستخدم Figma من أجله الآن فعلاً

الكثير، ومعظمه هو الجزء الذي يحبّه المصمّمون أكثر.

لا تزال Figma تمتلك مقدّمة العملية: الاستكشاف والتشعّب والتكرار السريع والوسط الفوضوي حيث تجد التصميم قبل أن يوجد. الكود مكان سيئ للتفكير بصوت عالٍ. Figma مبنية لذلك.

كذلك تمتلك التوثيق. التدفقات والحالات والحالات الحدودية والتعليقات التوضيحية و"السبب" والنموذج الأولي الذي تضعه أمام مستخدم. الـ repo هو مصدر الحقيقة، لكن الـ repo مكان سيئ لشرح قرار تصميم لعميل. الملف يفعل ذلك.

المهمةأفضل مكان
استكشاف فكرة قبل أن توجدFigma
تحديد قيمة الـ token الأساسيةالكود
رسم خرائط التدفقات والحالات والحالات الحدوديةFigma
حلّ "أيّ مكوّن صحيح"الكود (عبر Code Connect / Storybook)
مراجعة التصميم وعرض العميلFigma
ما يصل فعلاً إلى المستخدمينالكود

النقطة المضادة الصريحة

Figma لا تحتضر، ومن يبيعك هذا العنوان يبيعك مجرد عنوان.

ثلاثة قيود حقيقية تُبقي Figma ضرورية:

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

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

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

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

  1. انقل الـ tokens أولاً، ولا شيء آخر. عرّف اللون والمسافات والخط ونصف القطر في الكود وزامنها إلى الخارج. دع Figma تستهلك هذه القيم بدلاً من أن تُعلنها. هذا أصغر تغيير يجعل الـ repo موثوقاً، ولا يمسّ أي مكوّن بعد.

  2. اربط أعلى عشرة مكوّنات لديك. استخدم Code Connect لتوجيه مكوّنات Figma الأكثر استخداماً إلى نظيراتها المُبرمَجة، وأعطها بيتاً حياً في Storybook. لا تحاول إنجاز كل شيء دفعة واحدة. العشرة مكوّنات الموجودة في كل شيء تحمل معظم الانحراف.

فوكسل لربط Code Connect: بطاقة واجهة مستخدم رمادية داكنة مرتبطة بكابل سماوي مضيء بكتلة أقواس كود مرجانية، المكوّن المُبرمَج مضاء باعتباره الجانب الأساسي الأصيل.
فوكسل لربط Code Connect: بطاقة واجهة مستخدم رمادية داكنة مرتبطة بكابل سماوي مضيء بكتلة أقواس كود مرجانية، المكوّن المُبرمَج مضاء باعتباره الجانب الأساسي الأصيل.
  1. سمِّ المصدر بصوت عالٍ. اكتب جملة واحدة في وثائق نظامك: "حين يختلف الملف والكود، الكود صحيح." الغموض هو ما يشعل الحرب، لا القاعدة نفسها.

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

  3. اجعل المزامنة مهمة يمتلكها أحد. الربط بين التصميم والكود لا يُدار وحده. عيّن مسؤولاً. خريطة Code Connect المتقادمة أسوأ من لا خريطة لأنها تكذب بثقة.

من يجب أن يتحوّل ومن لا يجب

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

تحوّل إذا:

  • لديك تطبيق إنتاجي بمكتبة مكوّنات في الكود
  • ترى انحرافاً متكرراً بين التصميم والبناء
  • مهندسوك يعيشون في Storybook أو إعداد مماثل

الـ repo هو المكان الذي تتراكم فيه حقيقتك بالفعل. اجعله رسمياً.

صفحة تسويق Storybook، "ابنِ واختبر ووثّق المكوّنات"، البيت الحي حيث يصبح المكوّن المُبرمَج شيئاً يمكن للفريق رؤيته والوثوق به.
صفحة تسويق Storybook، "ابنِ واختبر ووثّق المكوّنات"، البيت الحي حيث يصبح المكوّن المُبرمَج شيئاً يمكن للفريق رؤيته والوثوق به.

انتظر إذا:

  • مخرجاتك في الغالب مواد تسليم ثابتة أو صفحات تسويقية أو أعمال عروض تقديمية
  • لا شيء يُنفَّذ كمكتبة مكوّنات دائمة

إذا لم يكن هناك قاعدة كود لتعيش فيها الحقيقة، فـ"الكود-أولاً" شعار لا نظام. الإبقاء على Figma كمصدر حقيقتك هو القرار الصحيح.

الإشارةميِّل نحو الكود-أولاًابقَ مع Figma-أولاً
مكتبة مكوّنات مُبرمَجة دائمةنعملا
انحراف متكرر من التصميم إلى البناءنعمنادر
المهندسون في Storybook بالفعلنعملا
المخرجات في الغالب ثابتة أو عروض تقديميةلانعم

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

هل لا تزال Figma مصدر الحقيقة في 2026؟

بالنسبة لعدد متنامٍ من فرق المنتجات، لا. الـ repo يُعرِّف الـ tokens والمكوّنات، وFigma توثّق هذا النظام. بالنسبة للفرق التي ليس لديها قاعدة كود دائمة، فإن كون Figma مصدر الحقيقة لا يزال الإعداد الصحيح.

هل الكود-أولاً يعني أن المصمّمين يتوقفون عن استخدام Figma؟

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

ما دور Figma Code Connect هنا؟

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

أين تتناسب الـ design tokens؟

الـ tokens هي الإسفين. حين يُعرَّف اللون والمسافات والخط في الكود عبر خط أنابيب مثل Style Dictionary ويُزامَن إلى الخارج، يصبح الـ repo المصدر لهذه القيم. نقل الـ tokens أولاً هو الطريقة الأقل خطراً للبدء.

ماذا عن Storybook وshadcn/ui؟

كلاهما يجعل الكود البيت الحي للمكوّنات. Storybook يمنح المكوّن المُبرمَج بيتاً مرئياً قابلاً للاختبار، وshadcn/ui يوزّع المكوّنات ككود حقيقي تنسخه إلى الـ repo بدلاً من طبقة تُعيد رسمها. هنا يشير الفرق حين يقولون إن الكود هو المصدر.

الخلاصة

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

بالنسبة لفرق أكثر في 2026، الـ repo هو ذلك المكان: الـ tokens في الكود، والمكوّنات مرتبطة عبر Code Connect وStorybook، وحلقة بناء تبدأ وتنتهي في قاعدة الكود. Figma لم تفقد وظيفتها. حصلت على وظيفة أوضح، مقدّمة العملية وتوثيق النظام.

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

Want a design system where truth lives in one place? Brainy builds it.

Get Started

More from Brainy Papers

Keep reading