نگاشت سبک ها برای نوشتن تم

Figma به طراحان این امکان را می دهد که یک سبک را برای یک عنصر طراحی اعمال کنند. یک سبک مجموعه ای از ویژگی های قابل استفاده مجدد است، مانند رنگ ها یا تایپوگرافی. از آنجایی که به صورت مرکزی تعریف شده است، یک تیم می تواند هنگام به روز رسانی یک عنصر طراحی واحد، ویژگی ها را در همه طرح ها تعریف و به روز کند. می‌توانید Relay را تنظیم کنید تا سبک‌های Figma را به تم‌های Jetpack Compose ترجمه کند.

نگاشت بین سبک های Figma و تم های Compose از طریق یک فایل پیکربندی مشخص می شود.

به عنوان مثال، طرح Figma که در زیر نشان داده شده است از سبک‌های کیت طراحی Material 3 Google استفاده می‌کند. برای متن Primary - Title large ، فونت M3/title/large و رنگ آن M3/sys/light/primary است.

اگر طرح را با فعال کردن ترجمه سبک‌های کیت طراحی M3 وارد کنیم، کد زیر برای متن بزرگ اصلی - عنوان ایجاد می‌شود:

@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، به File > New > Import UI Packages… بروید و سپس تیک Translate Figma styles to Compose را بزنید.

در این مرحله، شما باید یک پیکربندی برای ترجمه سبک های طراحی خود انتخاب کنید:

• اگر آنها مستقیماً از Google's Material 3 Design Kit برای Figma (که فرمت M3/body/medium or M3/sys/light/primary دارند) آمده اند، سپس گزینه Material 3 Design Kit را انتخاب کنید.
• اگر مستقیماً از Google's Material 2 Design Kit برای Figma (که فرمت 01. Primary/500 or Subtitle 1 دارند) آمده اند، سپس گزینه Material 2 Design Kit configuration را انتخاب کنید.

• اگر تعاریف سبک خود را دارید، سپس گزینه Custom configuration را انتخاب کنید و فایلی را انتخاب کنید که حاوی نگاشت بین سبک های Figma و تم های Compose است (توضیح داده شده در این بخش ).

  

اگر سبک‌هایی در طراحی Figma وجود داشته باشد که در پیکربندی انتخاب‌شده نیستند، کادر محاوره‌ای Import یک هشدار برای هر سبک نگاشت نشده نشان می‌دهد. هر سبک نقشه برداری نشده به جای آن به ارزش تحت اللفظی خود ترجمه می شود. هشدارها در ابتدا فرو ریخته می شوند. برای باز شدن بر روی بنر هشدارها کلیک کنید. هر هشدار دارای پیوندی به لایه خاصی در فایل Figma است که باعث ایجاد هشدار می شود.

پس از وارد کردن، پیکربندی سبک در پروژه Android Studio قرار می گیرد. آنها را در دایرکتوری ui-package-resources/style-mappings جستجو کنید.

فایل های پیکربندی برای ترجمه های سفارشی

ترجمه سبک های Figma به تم های Compose شامل دو مرحله است:

1. یک سبک Figma در یک بسته UI به یک نشانه طراحی در فایل JSON تعریف بسته UI در پوشه بسته UI در پروژه Android Studio شما ترجمه می شود.
2. یک نشانه طراحی در یک فایل تعریف بسته UI به قطعه ای از کد تم Compose در پروژه Android Studio شما ترجمه می شود.

فرمت فایل پیکربندی سفارشی (که با فرمت 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 و نشانه طراحی مربوطه را مشخص می کند که باید در فایل تعریف بسته UI نوشته شود.
• بخش colors compose یک نشانه طراحی را در فایل تعریف بسته UI و قطعه کد مربوطه را مشخص می‌کند که باید در کد نوشتن شما نوشته شود.

در پیکربندی مثال بالا، هر چیزی که از رنگ my-app-theme/sys/light/primary در Figma استفاده می‌کند، رنگ آن به صورت myapp.sys.color.primary در فایل تعریف بسته UI نوشته شده است. سپس، در طول تولید کد، آن رنگ به عنوان 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 and Compose، یک سبک تایپوگرافی شامل نام فونت، وزن فونت، اندازه، فاصله حروف و ارتفاع خط و بسیاری موارد دیگر است. به‌جای اینکه نیاز به نقشه‌برداری مکرر ویژگی‌های فرعی هر سبک داشته باشیم، در عوض استایل‌های کلی را به نشانه‌ها و تم‌ها نگاشت می‌کنیم و سپس هر ویژگی فرعی را به‌طور جداگانه ترسیم می‌کنیم.

مثال بالا بیان می‌کند که وقتی یک آیتم متنی Figma با سبک my-app-theme/headline/large در فایل تعریف بسته UI نوشته می‌شود، فونت متن myapp.sys.typescale.headline-large.font است، اندازه آن است. myapp.sys.typescale.headline-large.size و غیره. سپس، هنگامی که کد Compose تولید می‌شود، یک RelayText composable (که Text قابل نوشتن را در Compose Material می‌پیچد) ایجاد می‌شود، که در آن پارامتر font MaterialTheme.typography.headlineLarge.fontFamily ، پارامتر size MaterialTheme.typography.headlineLarge.fontSize است، و به همین ترتیب

برای نمونه‌هایی از فایل‌های پیکربندی، می‌توانید به پیکربندی‌های داخلی Material 3 و Material 2 Design Kit نگاه کنید که دقیقاً از همان فرمت استفاده می‌کنند. فایل ها را می توانید از اینجا دانلود کنید:

• پیکربندی کیت طراحی مواد

محدودیت ها

در حال حاضر، موقعیت‌های مختلفی وجود دارد که سبک‌ها به مضامین ترجمه نمی‌شوند:

• سبک های متنی که فقط برای بخشی از یک عنصر متن اعمال می شوند (همانطور که در چند سبک در متن توضیح داده شده است)
• اگر سبک های مختلفی برای انواع مختلف یک جزء اعمال شود، تنها یک سبک ترجمه می شود.