![عنصر البطاقة مع الصورة والعنوان](https://developer.android.com/static/develop/ui/compose/tooling/relay/images/basic-tutorial/card-component.png?authuser=6&hl=ar)
يوضح هذا البرنامج التعليمي الأساسي سير عمل المصمم والمطور في Relay، مما يوفر تجربة أولى كاملة وشاملة. بعد إعداد المكوّن الإضافي Relay، يمكنك الوصول بسرعة إلى المرحلة التي يمكنك فيها مشاهدة واجهة المستخدم في "استوديو Android". ننصحك بالالتزام بها.
ينشئ البرنامج التعليمي مكون بطاقة أساسية في Figma، ويستورده إلى Android Studio حيث يمكنك عرض التعليمة البرمجية التي تم إنشاؤها. سوف تتعلم كيفية القيام بما يلي:
في Figma:
- تصميم مكون واجهة المستخدم في Figma.
- قم بإنشاء حزمة واجهة المستخدم باستخدام المكون الإضافي Figma.
- احفظ نسخة مُسَمّاة من التصميم.
- مشاركة عنوان URL لـ Figma مع المطورين.
في "استوديو Android":
- باستخدام عنوان URL لـ Figma، قم باستيراد حزمة واجهة المستخدم إلى مشروع.
- يمكنك إنشاء رمز Jetpack Compose من خلال إنشاء المشروع.
- أضِف مرجعًا إلى العنصر القابل للإنشاء الذي تم إنشاؤه في رمز واجهة المستخدم الخاص بالمشروع.
- شغِّل المشروع.
الخطوة التالية
أولاً، لننشئ تصميمنا وننشئ حزمة واجهة مستخدم في Figma.