Composer

باختصار#

قماش لا نهائي لترتيب الأشياء: مستندات متعددة الصفحات، وتصاميم شاشات، وتخطيطات، بعناصر تحكم في الطباعة تتجاوز «اختر خطًا ومقاسًا».

التخطيط#

ما تفعله هنا#

الصفحات والإطارات#

يحتوي المستند على صفحات؛ وتحمل الصفحة إطارات (ألواح). هذا هو الفرق عن Vectra، الذي يرسم على لوح واحد في كل مرة: Composer مخصص لمجموعة شاشات أو مجموعة صفحات مزدوجة (spreads).

الطبقات والأصول والمكوّنات#

أربع علامات تبويب فوق المستند نفسه. Components هي القطع القابلة لإعادة الاستخدام، تُعرَّف مرة وتُوضع مرات، وتحرير التعريف يجعل كل نسخة تتبعه. Assets هو ما يجلبه المستند. قائمة الطبقات مجمَّعة حسب النوع (نص، صور، رسومات)، وهو أسرع في التصفح من قائمة مسطحة في صفحة مزدحمة.

تخطيط دقيق#

X وY وW وH ونصف قطر الزاوية، إضافةً إلى المحاذاة والتوزيع. Margins وGuides وشبكة Baseline مفاتيح تبديل على شريط الأدوات: شبكة الأساس (baseline) هي ما يجعل نصًا متعدد الأعمدة يصطف عبر صفحة مزدوجة.

الطباعة#

الجزء الذي يُكسب Composer مكانته:

النموذج الأولي والكود#

تربط علامة التبويب Prototype الشاشات معًا في تدفق قابل للنقر. تعرض علامة التبويب Code التصميم ككود.

المتغيرات والأنماط#

لوحتان تحوّلان المستند إلى نظام بدلًا من مجموعة صفحات:

• Variables: قيم مسمّاة (لون، رقم، نص) تُستخدم عبر المستند، مع محدِّد متغيرات أينما ضُبطت قيمة. غيِّر المتغيّر، ويتبعه كل استخدام.
• Styles: أنماط نص وكائنات مسمّاة.
• Fills: محرر التعبئة، بما في ذلك التدرّجات والصور.

إلى جانب Components، هي ما يجعل التصميم مدفوعًا بـ"tokens": يمكن لمساحة عمل DA في Vectra تصدير design tokens، وComposer هو حيث تُستخدَم.

بناء النموذج الأولي#

النموذج الأولي هنا رسم بياني فوق الإطارات التي رسمتها بالفعل. كل تفاعل هو أربعة أشياء: مُحفِّز (trigger) (نقر أو تمرير)، وإطار هدف، وانتقال (transition)، ومدة (duration). اسحب من مقبض الاتصال في إطار إلى الإطار الذي يجب أن يؤدي إليه.

يحوّل Prototype Mode القماش إلى عرض التدفق؛ ويُشغِّله Preview Player كما سيراه القارئ، مع إعادة تشغيل. لا يوجد مستند نموذج أولي منفصل، الإطارات هي الشاشات.

Dev Mode، تسليم التصميم إلى الكود#

علامة التبويب Inspect هي النصف الآخر من أداة التصميم: تقرأ التحديد وتنتج الكود له، على ثلاث علامات تبويب للمنصات.

إلى جانب الكود المُولَّد، يُبلِّغ بالأرقام الحقيقية التي يطلبها المطور: الحجم، ونصف القطر، والدوران، والعتامة، والتعبئة، والحد (stroke)، والتأثيرات، والخط ومقاسه، والتباعد المقاس إلى الأصل (parent) وإلى الأشقاء (siblings): المسافتان اللتان تحددان التخطيط. يُنسَخ الكود إلى الحافظة أو يُنزَّل.

التصدير#

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

تفصيلان تذكرهما اللوحة بدلًا من تركهما لتكتشفهما:

• PNG وSVG فقط يحملان الشفافية. اختيار خلفية شفافة على JPG إعداد بلا أثر، وتقول اللوحة ذلك.
• مصدر التصدير إما عقدة (node) أو شريحة (slice): يصنع Create Slice منطقة تصدير من التحديد الحالي، وهذه هي الطريقة لتصدير جزء من إطار دون تقطيع الإطار.

تحفظ Presets مجموعة إعدادات كاملة، بحيث تُكتَب تهيئة التصدير لمشروع مرة واحدة.

الملفات التي يقرأها ويكتبها#

إرسال العمل إلى استوديوهات أخرى#

ينتج تركيبة، واللوح النشط معروضًا كصورة. يقبل فن البكسل، والفن المتجهي، والصور.

العمل مع شخص آخر#

يُزامَن Composer كـمستند: الحالة كاملة، مع تأخير تجميعي، إضافةً إلى إجراءات مُرسَلة. عندما يحرِّر شخصان الصفحة نفسها في اللحظة نفسها، يفوز أحدهما فقط؛ اعملا على صفحات مختلفة.

القيود والمشاكل الشائعة#

• يتعارض Auto width وAuto height مع التخطيطات الثابتة. الصندوق المضبوط على Auto width لن يلتف النص فيه؛ إذا كان النص يفيض عن الإطار، فهذا هو السبب عادةً.
• ربط النص ليس تلقائيًا. يُبلِّغ الصندوق بـNot linked حتى تربطه.
• تنتشر Components من التعريف، لا من نسخة. تحرير نسخة لا يُحدِّث النسخ الأخرى.