تعيين الأنماط لإنشاء مظهر

تتيح Figma للمصممين تطبيق نمط على عنصر التصميم. النمط هو مجموعة قابلة لإعادة الاستخدام من الخصائص، مثل الألوان أو أسلوب الخط. نظرًا لأنه يتم تحديدها مركزيًا، يمكن للفريق تحديد وتحديث الخصائص عبر جميع التصميمات عند تحديث عنصر تصميم واحد. يمكنك إعداد Relay لترجمة أنماط Figma إلى مظاهر Jetpack Compose.

يتم تحديد التعيين بين أنماط Figma ومظاهر Compose من خلال ملف تهيئة.

على سبيل المثال، يستخدم تصميم Figma الموضح أدناه أنماطًا من مجموعة أدوات تصميم Material 3 من Google. في النص أساسي - عنوان كبير، يكون الخط هو M3/title/large ولوّنه M3/sys/light/primary..

إذا استوردنا التصميم مع تفعيل ترجمة أنماط M3 Design Kit، فسيتم إنشاء الرمز التالي للنص Primary - العنوان الكبير:

@Composable
fun PrimaryTitleLarge(modifier: Modifier = Modifier) {
    Text(
        content = "Primary - Title large",
        fontSize = MaterialTheme.typography.titleLarge.fontSize,
        fontFamily = MaterialTheme.typography.titleLarge.fontFamily,
        color = MaterialTheme.colorScheme.primary,
        height = MaterialTheme.typography.titleLarge.lineHeight,
        letterSpacing = MaterialTheme.typography.titleLarge.letterSpacing,
        textAlign = TextAlign.Left,
        fontWeight = MaterialTheme.typography.titleLarge.fontWeight,
        modifier = modifier
    )
}

لاستخدام هذه الميزة، استخدم الأنماط كما تفعل عادةً في Figma. ثم في Android Studio، انتقل إلى ملف > جديد > استيراد حزم واجهة المستخدم...، ثم حدد ترجمة أنماط Figma إلى مظهر Compose.

في هذه المرحلة، يجب عليك اختيار تكوين لترجمة أنماط التصميم الخاص بك:

• إذا كانت مصدرها مباشرة مجموعة أدوات تصميم المواد 3 من Google لـ Figma (التي لديها التنسيق M3/body/medium or M3/sys/light/primary)، فحدد خيار إعدادات مجموعة أدوات تصميم المواد 3.
• أما إذا كانت تأتي مباشرةً من مجموعة أدوات تصميم المواد 2 من Google لـ Figma (التي لديها التنسيق 01. Primary/500 or Subtitle 1)، فعندئذٍ حدد خيار إعدادات مجموعة أدوات تصميم المواد 2.

• إذا كان لديك تعريفات الأنماط الخاصة بك، فحدد خيار التهيئة المخصصة واختر الملف الذي يحتوي على التعيينات بين أنماط Figma ومظاهر Compose (الموضحة في هذا القسم).

  

إذا كانت هناك أنماط في تصميم Figma غير موجودة في التكوين المحدد، يعرض مربع الحوار "Import" (استيراد) تحذيرًا لكل نمط لم يتم تعيينه. بدلاً من ذلك، تتم ترجمة كل نمط غير معيّن إلى قيمته الحرفية. يتم تصغير التحذيرات في البداية، وانقر على بانر التحذيرات لتوسيعها. يحتوي كل تحذير على رابط للطبقة المحددة في ملف Figma التي تسبب التحذير.

بعد الاستيراد، تقع تهيئة النمط في مشروع استوديو Android. ابحث عنها داخل دليل ui-package-resources/style-mappings.

ملفات الإعداد للترجمات المخصّصة

تتكون ترجمة أنماط Figma إلى مظاهر Compose من خطوتين:

1. تتم ترجمة نمط Figma في حزمة واجهة المستخدم إلى رمز مميز للتصميم في ملف JSON لتعريف حزمة واجهة المستخدم، داخل مجلد حزمة واجهة المستخدم في مشروع استوديو Android الخاص بك.
2. تتم ترجمة الرمز المميّز للتصميم في ملف تعريف حزمة واجهة المستخدم إلى مقتطف لرمز المظهر Compose في مشروعك على "استوديو Android".

يعكس تنسيق ملف الإعداد المخصّص (بتنسيق JSON) هاتين الخطوتين. في ما يلي مثال على ملف إعداد مخصّص بسيط يعالج أنماط الألوان فقط:

{
  "figma": {
    "colors": {
      "my-app-theme/sys/light/primary": "myapp.sys.color.primary",
      "my-app-theme/sys/light/primary-container": "myapp.sys.color.primary-container",
      "my-app-theme/sys/light/background": "myapp.sys.color.background",
      "my-app-theme/sys/light/on-background": "myapp.sys.color.on-background",
      "my-app-theme/sys/dark/background": "myapp.sys.color.background",
      "my-app-theme/sys/dark/on-background": "myapp.sys.color.on-background"
    }
  },
  "compose": {
    "colors": {
      "myapp.sys.color.primary": "MaterialTheme.colorScheme.primary",
      "myapp.sys.color.primary-container": "MaterialTheme.colorScheme.primaryContainer",
      "myapp.sys.color.background": "MaterialTheme.colorScheme.background",
      "myapp.sys.color.on-background": "MaterialTheme.colorScheme.onBackground"
    },
    "options": {
      "packages": {
        "MaterialTheme": "androidx.compose.material3"
      }
    }
  }
}

هناك قسمان من المستوى الأعلى، وهما figma (الذي يحدّد الخطوة 1) وcompose (الذي يحدّد الخطوة 2). يتضمّن كلاهما القسم colors:

• يحدّد القسم colors في figma نمط Figma ورمز التصميم المقابل الذي يجب كتابته في ملف تعريف حزمة واجهة المستخدم.
• يحدّد القسم colors في compose رمزًا مميّزًا للتصميم في ملف تعريف حزمة واجهة المستخدم ومقتطف الرمز المقابل الذي يجب كتابته في رمز ComposeAllowed.

في نموذج التهيئة أعلاه، أي شيء يستخدم اللون my-app-theme/sys/light/primary في Figma مكتوب لونه كـ myapp.sys.color.primary في ملف تعريف حزمة واجهة المستخدم. بعد ذلك، أثناء إنشاء الرموز البرمجية، تتم كتابة هذا اللون على هيئة MaterialTheme.colorScheme.primary في Compose.

يحتوي القسم compose أيضًا على القسم options الذي ينص على الحزمة التي يتوفّر فيها رمز رمز معيّن. ينص المثال أعلاه على أن MaterialTheme موجودة في حزمة androidx.compose.material3، والتي يجب بالتالي استيرادها في أي رمز تم إنشاؤه.

يعد تعيين أنماط أسلوب الخط أكثر مشاركة من أنماط الألوان. فيما يلي نفس المثال المذكور أعلاه، ولكن مع إضافة أنماط الخط:

{
  "figma": {
    "colors": {
      "my-app-theme/sys/light/primary": "myapp.sys.color.primary",
      "my-app-theme/sys/light/primary-container": "myapp.sys.color.primary-container",
      "my-app-theme/sys/light/background": "myapp.sys.color.background",
      "my-app-theme/sys/light/on-background": "myapp.sys.color.on-background",
      "my-app-theme/sys/dark/background": "myapp.sys.color.background",
      "my-app-theme/sys/dark/on-background": "myapp.sys.color.on-background"
    },
    "typography": {
      "symbols": {
        "my-app-theme/headline/large": "myapp.sys.typescale.headline-large",
        "my-app-theme/body/medium": "myapp.sys.typescale.body-medium"
      },
      "subproperties": {
        "fontFamily": "font",
        "fontWeight": "weight",
        "fontSize": "size",
        "letterSpacing": "tracking",
        "lineHeightPx": "line-height"
      }
    }
  },
  "compose": {
    "colors": {
      "myapp.sys.color.primary": "MaterialTheme.colorScheme.primary",
      "myapp.sys.color.primary-container": "MaterialTheme.colorScheme.primaryContainer",
      "myapp.sys.color.background": "MaterialTheme.colorScheme.background",
      "myapp.sys.color.on-background": "MaterialTheme.colorScheme.onBackground"
    },
    "typography": {
      "symbols": {
        "myapp.sys.typescale.headline-large": "MaterialTheme.typography.headlineLarge",
        "myapp.sys.typescale.body-medium": "MaterialTheme.typography.bodyMedium"
      },
      "subproperties": {
        "font": "fontFamily",
        "weight": "fontWeight",
        "size": "fontSize",
        "tracking": "letterSpacing",
        "line-height": "lineHeight"
      }
    },
    "options": {
      "packages": {
        "MaterialTheme": "androidx.compose.material3"
      }
    }
  }
}

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

ينص المثال أعلاه على أنه عند كتابة عنصر نصي في Figma بالنمط my-app-theme/headline/large في ملف تعريف حزمة واجهة المستخدم، يكون خط النص هو myapp.sys.typescale.headline-large.font، وحجمه myapp.sys.typescale.headline-large.size، وهكذا. بعد ذلك، عند إنشاء رمز Compose، يتم إنشاء عنصر RelayText قابل للإنشاء (الذي يلّف عنصر Text القابل للإنشاء في Compose Material)، حيث تكون المَعلمة font هي MaterialTheme.typography.headlineLarge.fontFamily، والمَعلمة size هي MaterialTheme.typography.headlineLarge.fontSize، وهكذا.

للحصول على أمثلة على ملفات التهيئة، يمكنك إلقاء نظرة على تكوينات Material 3 وMaterial 2 Design Kit المدمجة التي تستخدم التنسيق نفسه بالضبط. يمكنك تنزيل الملفات هنا:

• إعدادات مجموعة أدوات التصميم المتعدد الأبعاد

القيود

حاليًا، هناك العديد من المواقف التي لا تتم فيها ترجمة الأنماط إلى موضوعات:

• أنماط النص التي يتم تطبيقها على جزء من عنصر نصي فقط (كما هو موضح في أنماط متعددة في النص)
• إذا كانت هناك أنماط مختلفة مطبقة على متغيرات مختلفة للمكون، تتم ترجمة نمط واحد فقط.