تنزيل ملف Figma المهيأ مسبقًا
لنبدأ بإنشاء مكون في Figma. بالنسبة لهذا البرنامج التعليمي، سنستخدم ملف Figma الحالي لاستخدامه كمثال. يحتوي هذا الملف على إطار تخطيط تلقائي مع صورة وعنوان. تأكد من تسجيل الدخول إلى حسابك على Figma.
- نزِّل ملف Figma هذا على جهاز الكمبيوتر: HelloFigma.fig.
في متصفح ملفات Figma، مرر مؤشر الماوس فوق المسودات. سيظهر الرمز +. انقر على +، ثم استيراد...، واختَر ملف HelloFigma.fig الذي نزّلته للتو.
افتح الملف المستورد في Figma.
إنشاء مكوِّن
لاستخدام التصميم المستورد مع المكون الإضافي Relay for Figma، سنحتاج أولاً إلى تحويله إلى مكون. اختَر إطار بطاقة الترحيب ومن شريط الأدوات، انقر على إنشاء مكوّن.
إنشاء حزمة واجهة مستخدم
يضيف المكوّن الإضافي Relay for Figma معلومات إضافية إلى المكون حتى تتمكن من العمل مع المطورين الذين يمكنهم استخدام المكون في التعليمات البرمجية الخاصة بهم.
افتح المكوّن الإضافي Relay for Figma في ملفك (في قائمة Figma: Plugins > Relay for Figma). انقر على البدء.
حدد المكوِّن وانقر على إنشاء حزمة واجهة المستخدم.
بعد اختيار حزمة واجهة المستخدم، أضِف وصفًا إلى الملخّص. على سبيل المثال: "مكوِّن بطاقة الترحيب المستخدَم لعرض محتوى الصورة والعنوان"
انقر على المشاركة مع مطوّر البرامج في أسفل يسار مربّع الحوار للانتقال إلى الشاشة التالية.
المشاركة مع مسار المطوّر
الآن بعد أن أنشأت حزمة واجهة مستخدم، قم بإعداد المكون الخاص بك لمشاركته مع فريق التطوير.
أنشئ نسخة جديدة مُسمّاة من ملف المكوِّن. يؤدي استخدام الإصدارات المُسَمّاة من المكوِّن إلى منع التغييرات غير المرغوب فيها من التأثير في مكوّنات الإنتاج.
أدخِل اسمًا ووصفًا لهذا الإصدار الأول من المكوِّن، ثم انقر على حفظ.
بعد ذلك، يمكنك إنشاء رابط مكوّن قابل للمشاركة ونسخه إلى الحافظة عن طريق كتابة CMD-L على جهاز Mac أو CTRL-L على نظام التشغيل Windows.
الخطوة التالية
أصبحت الآن جاهزًا لتسليم مكوِّن واجهة المستخدم إلى "استوديو Android".
افتح "استوديو Android" لإكمال الجزء التالي من هذا البرنامج التعليمي.
تحويل التصميمات إلى رموز برمجية في "استوديو Android"