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

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

إليك ما يمتلكه كل طبقة بمجرد أن تجعل التحوّل صريحاً.
| الطبقة | ما تمتلكه الآن | ما لم تعد تمتلكه |
|---|---|---|
| قاعدة الكود / الـ 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 بدلاً من طبقة تُعيد رسمها. حين يملك سؤال "أيّهما صحيح" أخيراً إجابةً حتمية، تكون الإجابة هي الكود.

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

ما الذي تُستخدم Figma من أجله الآن فعلاً
الكثير، ومعظمه هو الجزء الذي يحبّه المصمّمون أكثر.
لا تزال Figma تمتلك مقدّمة العملية: الاستكشاف والتشعّب والتكرار السريع والوسط الفوضوي حيث تجد التصميم قبل أن يوجد. الكود مكان سيئ للتفكير بصوت عالٍ. Figma مبنية لذلك.
كذلك تمتلك التوثيق. التدفقات والحالات والحالات الحدودية والتعليقات التوضيحية و"السبب" والنموذج الأولي الذي تضعه أمام مستخدم. الـ repo هو مصدر الحقيقة، لكن الـ repo مكان سيئ لشرح قرار تصميم لعميل. الملف يفعل ذلك.
| المهمة | أفضل مكان |
|---|---|
| استكشاف فكرة قبل أن توجد | Figma |
| تحديد قيمة الـ token الأساسية | الكود |
| رسم خرائط التدفقات والحالات والحالات الحدودية | Figma |
| حلّ "أيّ مكوّن صحيح" | الكود (عبر Code Connect / Storybook) |
| مراجعة التصميم وعرض العميل | Figma |
| ما يصل فعلاً إلى المستخدمين | الكود |
النقطة المضادة الصريحة
Figma لا تحتضر، ومن يبيعك هذا العنوان يبيعك مجرد عنوان.
ثلاثة قيود حقيقية تُبقي Figma ضرورية:
- الكود معادٍ للاستكشاف المبكّر، لذا لا تزال المرحلة المتشعّبة تنتمي إلى اللوحة.
- غير المهندسين يحتاجون مكاناً لقراءة النظام، والـ repo ليس هو.
- الربط يعمل فقط إذا أبقى إنسان التصميم والمكوّن المُبرمَج متزامنَين، وهذا انضباط لا افتراض افتراضي.
هذا إعادة تموضع. المكان الذي تعيش فيه الحقيقة انتقل. المكان الذي تفكّر فيه الفرق لم ينتقل. عامِل "Figma هي توثيق" باعتبارها توضيحاً للأدوار لا حكماً على الأداة، وسيومئ مصمّموك بدلاً من التحصّن.
كيف تدير نظام تصميم يبدأ من الكود دون أن تخسر الفريق
نمط الفشل ليس تقنياً. إنه حرب تسليم يشعر فيها المصمّمون بالتراجع ويشعر المهندسون بأنهم تسلّموا وظيفة ثانية. أدِرها كتسلسل، لا كمرسوم.
-
انقل الـ tokens أولاً، ولا شيء آخر. عرّف اللون والمسافات والخط ونصف القطر في الكود وزامنها إلى الخارج. دع Figma تستهلك هذه القيم بدلاً من أن تُعلنها. هذا أصغر تغيير يجعل الـ repo موثوقاً، ولا يمسّ أي مكوّن بعد.
-
اربط أعلى عشرة مكوّنات لديك. استخدم Code Connect لتوجيه مكوّنات Figma الأكثر استخداماً إلى نظيراتها المُبرمَجة، وأعطها بيتاً حياً في Storybook. لا تحاول إنجاز كل شيء دفعة واحدة. العشرة مكوّنات الموجودة في كل شيء تحمل معظم الانحراف.

-
سمِّ المصدر بصوت عالٍ. اكتب جملة واحدة في وثائق نظامك: "حين يختلف الملف والكود، الكود صحيح." الغموض هو ما يشعل الحرب، لا القاعدة نفسها.
-
أبقِ المصمّمين في المقدّمة، لا في المؤخّرة. يجب أن يمتلك المصمّمون النية والتسلسل الهرمي واتجاه النظام، ويعملون أمام الكود. لا ينبغي أن يُختزلوا في مراجعة خطوط الإنتاج. إذا حوّل الكود-أولاً مصمّميك إلى مراقبة جودة، فقد أخطأت في التنفيذ.
-
اجعل المزامنة مهمة يمتلكها أحد. الربط بين التصميم والكود لا يُدار وحده. عيّن مسؤولاً. خريطة Code Connect المتقادمة أسوأ من لا خريطة لأنها تكذب بثقة.
من يجب أن يتحوّل ومن لا يجب
ليس كل فريق يجب أن يقلب الافتراض الافتراضي، والعامل الحاسم هو ما إذا كنت تشحن قاعدة كود حقيقية تنحرف عن التصميم.
تحوّل إذا:
- لديك تطبيق إنتاجي بمكتبة مكوّنات في الكود
- ترى انحرافاً متكرراً بين التصميم والبناء
- مهندسوك يعيشون في Storybook أو إعداد مماثل
الـ repo هو المكان الذي تتراكم فيه حقيقتك بالفعل. اجعله رسمياً.

انتظر إذا:
- مخرجاتك في الغالب مواد تسليم ثابتة أو صفحات تسويقية أو أعمال عروض تقديمية
- لا شيء يُنفَّذ كمكتبة مكوّنات دائمة
إذا لم يكن هناك قاعدة كود لتعيش فيها الحقيقة، فـ"الكود-أولاً" شعار لا نظام. الإبقاء على 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




