كل المقالات
تصميمTokens
4 أبريل 2026·6 دقائق قراءة

نظام تصميم تستخدمه فعلاً

ليه بنتعامل مع الـ tokens ككود من البداية — ولماذا ينفعك لما البراند يتطور.

ك س
كريم سعد
رئيس التصميم

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

الحل ليس مزيداً من التوثيق. الحل أن تجعل النظام الطريق الأقل مقاومة — للمصممين والمهندسين، كل يوم.

نبدأ كل مشروع باستخراج الـ design tokens قبل استخراج المكونات. ألوان، spacing، type scale، radii، shadows، motion — هذه تُعرّف مرة واحدة، في الكود، وتُصدّر كـ Figma variables، CSS custom properties، و TypeScript constants. مصدر واحد للحقيقة، ثلاثة أسطح للاستهلاك.

المكونات تأتي بعدها، لكنها ليست قلب النظام. الـ tokens هي القلب. لما البراند يتطور (وهو دائماً يتطور)، تغيير token واحد ينتشر عبر كل مكون، كل صفحة، كل prototype، أوتوماتيكياً. أطلقنا brand refreshes في أيام بدل أسابيع بسبب هذا.

الدرس: تعامل مع نظام التصميم كبنية تحتية code-first، لا كمكتبة Figma. مهندسون يساهمون فيه. مصممون يرجعون إليه. PMs يثقون فيه. ويبقى حياً — لأن استخدامه أسرع من الالتفاف حوله.

تصميمTokens
شارك المقال