ريتلا لـ Figma
نزّل ملف Figma من لوحة التحكم، واستخدمه مكتبةً لفريقك، وبدّل بين الفاتح والداكن والإنجليزية والعربية بأوضاع المتغيرات، واستلم التحديثات.
ريتلا لـ Figma ملف Figma واحد: جانب التصميم من Ritla UI، بالمكوّنات نفسها ورموز التصميم نفسها وقواعد العربية نفسها. تشرح هذه الصفحة كيف تُدخل الملف إلى Figma وكيف تعمل به. أما ما يتيحه لك الترخيص ففي صفحة الترخيص.
احصل على الملف#
- سجّل الدخول إلى لوحة التحكم وافتح التنزيلات.
- اختر نزّل، فتحصل على ملف واحد بامتداد
.fig. - في Figma افتح مسوداتك أو مشروعًا لفريقك واستورد الملف: اسحبه إلى متصفح الملفات، أو اختر Import من القائمة الرئيسية.
يُنشأ رابط التنزيل لك لحظة النقر، فنزّل الملف من جديد كلما احتجته بدل أن تشارك رابطًا محفوظًا. وكل من له مقعد على ترخيصك ينزّله من لوحة التحكم الخاصة به.
ابدأ بصفحة «Start here»#
الصفحة الأولى في الملف، Start here، هي الفهرس. وتحتها صفحات Getting started التي تشرح كيف نُظّم الملف، وكيف تستخدمه مكتبةً، وكيف يصبح التصميم كودًا، وأسماء أصحاب الخطوط والأيقونات والصور المستخدمة. اقرأها مرة واحدة قبل أن تبدأ.
استخدمه مكتبةً لفريقك#
انسخ الملف إلى فريقك، ثم انشره من هناك مكتبةً: Assets ثم Libraries ثم انشر. عندها تأخذ ملفات التصميم المكوّنات والمتغيرات من نسختك، ويصبح التحديث تحديثًا واحدًا للمكتبة بدل إعادة بناء الملفات.
المتغيرات والأوضاع#
كل لون ومسافة وانحناء زاوية وحدّ وحجم خط في الملف متغيرٌ، والمكوّنات مربوطة بها. هذه المجموعات التي تتبدّل أوضاعها:
| المجموعة | الأوضاع | ما الذي تبدّله |
|---|---|---|
1. Colors | Light mode وDark mode | كل ألوان الأسطح والنصوص والأيقونات والحدود |
2. Typography | English وArabic | عائلات الخطوط وأحجامها وارتفاعات الأسطر |
0. Brand | وضع لكل لون علامة | تدرّج لون العلامة الذي تُبنى منه الألوان |
8. Size | Desktop وMobile | أحجام المكوّنات والتخطيط |
لكل متغير رمز تصميم بالاسم نفسه في الكود، فالقيمة التي تختارها في Figma هي القيمة التي يجدها المطوّر. وتشرح صفحة رموز التصميم الطريق من متغير Figma إلى متغير CSS وصنف Tailwind.
الفاتح والداكن#
لتجعل إطارًا داكنًا، اضبط مجموعة 1. Colors على Dark mode لذلك الإطار من اللوحة الجانبية. يتبعه كل ما بداخله، ويمكن لبطاقة واحدة أن تبقى فاتحة داخل صفحة داكنة. لا تغيّر ألوان مكوّن بيدك لتجعله داكنًا: الوضع يفعل ذلك، والكود يفعل الشيء نفسه (الوضع الداكن).
النص العربي#
اضبط مجموعة 2. Typography على Arabic في الإطار العربي، فيأخذ النص العربي خط IBM Plex Sans Arabic بالأحجام وارتفاعات الأسطر التي تحتاجها العربية، وتبقى أنماط النص بأسمائها نفسها كما في الإنجليزية. وتستخدم الأرقام والمبالغ والتواريخ خط Geist في اللغتين، فتصطف الأرقام بالطريقة نفسها في الاتجاهين. والمكوّنات التي لها نسخة من اليمين إلى اليسار تحمل خصائص نص عربية خاصة بها، فتكتب العربية داخل المكوّن لا فوقه. وفي مبادئ العربية والاتجاه أسباب كل قرار من هذه.
Code Connect#
ليس Code Connect جزءًا من الملف بعد. يعرض Dev Mode المتغيرات وبنية الطبقات، وتعرض كل صفحة مكوّن في المكوّنات الكود للمكوّن نفسه.
كيف تصلك التحديثات#
حين يصدر إصدار جديد من الملف، يحلّ محل الملف في صفحة التنزيلات، ويذكر سجل التغييرات ما الذي تغيّر. نزّله، ثم انشره فوق نسخة مكتبة فريقك، أو احتفظ بنسختك وخذ منه ما تحتاجه فقط. ويشمل ترخيصك كل تحديثات الملف دون أي تكلفة إضافية.