Design systems and handoffأنظمة التصميم والتسليم

Nobody decides to have eleven shades of grey and four button styles. It happens one reasonable decision at a time, by people who could not see what already existed — and that is the problem a system solves.

لا أحد يقرر أن يكون لديه أحد عشر تدرّجًا من الرمادي وأربعة أنماط أزرار. بل يحدث ذلك قرارًا معقولًا بعد آخر، على يد أناس لم يستطيعوا رؤية ما كان موجودًا أصلًا — وتلك هي المشكلة التي يحلّها النظام.

A token is one design decision given a name, stored in one place, and referred to everywhere else. It is the smallest unit of a design system and the one that makes every other part possible.

الرمز قرار تصميمي واحد أُعطي اسمًا، وحُفظ في موضع واحد، ويُشار إليه في كل مكان آخر. وهو أصغر وحدة في نظام التصميم، وهو ما يجعل كل جزء آخر ممكنًا.

A system is only as good as its names, because a component nobody can find is a component nobody uses. Naming is not decoration — it is the search interface, and most systems fail here rather than in the design.

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

Not everything that appears twice deserves to be a component. The test is whether the two uses will change together — and getting that wrong produces either duplication nobody can maintain or abstractions nobody can use.

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

Most components are designed in one state — the one where everything is present, valid and nothing is happening. The other seven are where the design is finished or abandoned, and they are the ones a developer will invent for you if you do not.

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

A variant is the same component doing the same job with different emphasis. Every one you add multiplies the states to design and test — so the discipline is not inventing them, it is refusing most of the ones people ask for.

المتغيّر هو المكوّن نفسه يؤدي العمل نفسه بتأكيد مختلف. وكل واحد تضيفه يضاعف الحالات التي تُصمَّم وتُختبر — فالانضباط ليس اختراعها، بل رفض معظم ما يطلبه الناس منها.

A system of ten small pieces that combine covers more ground than fifty finished screens ever will. The skill is choosing pieces that fit together — and leaving room inside them for content you have not seen.

نظامٌ من عشر قطع صغيرة تتركّب يغطي من الأرض أكثر مما تغطيه خمسون شاشة جاهزة أبدًا. والمهارة اختيار قطع تتلاءم — وترك متّسع بداخلها لمحتوى لم تره.

The concepts you have just learned exist in Figma under different names. Knowing which feature maps to which idea is most of what makes a design file maintainable rather than a folder of pictures.

المفاهيم التي تعلّمتها للتوّ موجودة في Figma بأسماء أخرى. ومعرفة أي خاصية تقابل أي فكرة هي معظم ما يجعل ملف التصميم قابلًا للصيانة لا مجلدَ صور.

Most design system documentation is written to be complete and read by nobody. The version that gets used answers one question — "can I use this here?" — in the ten seconds someone has before they give up and build their own.

معظم توثيق أنظمة التصميم يُكتب ليكون شاملًا ولا يقرؤه أحد. أما النسخة التي تُستخدم فتجيب عن سؤال واحد — «أأستطيع استخدام هذا هنا؟» — في العشر ثوانٍ التي يملكها أحدهم قبل أن ييأس ويبني واحدًا خاصًا به.

Most accessibility failures are decided in a design file and discovered in code, months later, when they are expensive. The ones a designer owns are few, specific, and cost nothing if they are decided at the right moment.

معظم إخفاقات إتاحة الوصول تُقرَّر في ملف تصميم وتُكتشف في الكود بعد أشهر، حين تصير باهظة. وما يملكه المصمم منها قليل ومحدد، ولا يكلّف شيئًا إن قُرِّر في اللحظة الصحيحة.

A significant number of people navigate entirely by keyboard — some by necessity, many by preference. The design decisions that make that possible are small, and the ones that make it impossible are usually made for aesthetic reasons.

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

A screen reader turns a page into a sequence of announcements. What it says comes from the structure underneath, which means a designer decides most of it — by choosing headings, labels and order, long before any code exists.

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

A developer opening your design has to answer questions you already know the answers to. Every one you leave unanswered is either a message you will be sent or a decision someone else will make on your behalf.

المطوّر الذي يفتح تصميمك عليه أن يجيب عن أسئلة تعرف إجاباتها أصلًا. وكل سؤال تتركه بلا جواب إما رسالة سترسَل إليك وإما قرار سيتخذه غيرك نيابةً عنك.

The gap between a design and the built version is where systems quietly die. Reviewing the real thing — in a browser, with a keyboard, at three widths — is the last step of designing it, not a courtesy afterwards.

الفجوة بين التصميم والنسخة المبنيّة هي حيث تموت الأنظمة بهدوء. وفحص الشيء الحقيقي — في متصفح، وبلوحة مفاتيح، عند ثلاثة أعراض — هو آخر خطوة في تصميمه لا مجاملةً بعده.

A system that is never broken is a system nobody is testing against real problems. The skill is not holding the line — it is telling the difference between a genuine gap and a preference, and knowing what to do with each.

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

Everything in both design courses, applied to one small product: tokens, four components with their states, documentation someone can use in ten seconds, and a handover a developer could build from without asking you anything.

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