থিম রচনা করতে ম্যাপিং শৈলী

ফিগমাতে স্টাইল থেকে থিমে কম্পোজে ম্যাপিং

ফিগমা ডিজাইনারদের একটি ডিজাইনের উপাদানে একটি শৈলী প্রয়োগ করতে দেয়। একটি শৈলী হল বৈশিষ্ট্যগুলির একটি পুনঃব্যবহারযোগ্য সংগ্রহ, যেমন রঙ বা টাইপোগ্রাফি। যেহেতু এটি কেন্দ্রীয়ভাবে সংজ্ঞায়িত করা হয়েছে, একটি দল একটি একক নকশা উপাদান আপডেট করার সময় সমস্ত ডিজাইনের বৈশিষ্ট্যগুলিকে সংজ্ঞায়িত এবং আপডেট করতে পারে। আপনি রিলে সেট আপ করতে পারেন যাতে এটি ফিগমা শৈলীগুলিকে জেটপ্যাক কম্পোজ থিমে অনুবাদ করে।

ফিগমা শৈলী এবং রচনা থিমের মধ্যে ম্যাপিং একটি কনফিগারেশন ফাইলের মাধ্যমে নির্দিষ্ট করা হয়।

কনফিগারেশন ফাইল ফিগমা শৈলী এবং রচনা থিম মানচিত্র

উদাহরণ হিসেবে, নিচে দেখানো ফিগমা ডিজাইনটি Google-এর Material 3 ডিজাইন কিট থেকে স্টাইল ব্যবহার করে। প্রাথমিক - শিরোনাম বড় টেক্সটের জন্য, ফন্টটি হল M3/title/large এবং এর রঙ হল M3/sys/light/primary ..

ফিগমায় উপাদান 3 শৈলী

যদি আমরা 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
    )
}

এই বৈশিষ্ট্যটি ব্যবহার করতে, স্টাইলগুলি ব্যবহার করুন যেমন আপনি সাধারণত ফিগমাতে করেন। তারপরে অ্যান্ড্রয়েড স্টুডিওতে, ফাইল > নতুন > ইমপোর্ট UI প্যাকেজে যান... এবং তারপর থিম রচনা করতে অনুবাদ ফিগমা শৈলী পরীক্ষা করুন।

এই মুহুর্তে, আপনার ডিজাইনের শৈলীগুলি অনুবাদ করার জন্য আপনাকে অবশ্যই একটি কনফিগারেশন চয়ন করতে হবে:

  • যদি সেগুলি সরাসরি Google-এর Material 3 ডিজাইন কিট ফর ফিগমা (যার ফর্ম্যাট M3/body/medium or M3/sys/light/primary ) থেকে আসে, তাহলে Material 3 ডিজাইন কিট কনফিগারেশন বিকল্পটি নির্বাচন করুন৷
  • যদি তারা সরাসরি Google-এর Material 2 Design Kit for Figma (যার বিন্যাস 01. Primary/500 or Subtitle 1 ) থেকে আসে, তাহলে উপাদান 2 ডিজাইন কিট কনফিগারেশন বিকল্পটি নির্বাচন করুন।

  • যদি আপনার নিজস্ব শৈলী সংজ্ঞা থাকে, তাহলে কাস্টম কনফিগারেশন বিকল্পটি নির্বাচন করুন এবং ফিগমা শৈলী এবং রচনা থিমের মধ্যে ম্যাপিং ধারণ করে এমন ফাইলটি চয়ন করুন ( এই বিভাগে বর্ণিত)।

    UI প্যাকেজ ডায়ালগ আমদানি করুন

যদি ফিগমা ডিজাইনে এমন শৈলী থাকে যা নির্বাচিত কনফিগারেশনে না থাকে, আমদানি ডায়ালগ প্রতিটি আনম্যাপ করা শৈলীর জন্য একটি সতর্কতা দেখায়। প্রতিটি আনম্যাপ করা শৈলী পরিবর্তে তার আক্ষরিক মান অনুবাদ করা হয়. সতর্কতা প্রাথমিকভাবে ধসে পড়েছে; প্রসারিত করতে সতর্কতা ব্যানারে ক্লিক করুন। প্রতিটি সতর্কতার সাথে Figma ফাইলের নির্দিষ্ট স্তরের সাথে একটি লিঙ্ক রয়েছে যা সতর্কতা সৃষ্টি করে।

আমদানি ডায়ালগে সতর্কতা

আমদানি করার পরে, শৈলী কনফিগারেশন অ্যান্ড্রয়েড স্টুডিও প্রকল্পে অবস্থিত। ui-package-resources/style-mappings ডিরেক্টরির ভিতরে তাদের সন্ধান করুন।

কাস্টম অনুবাদের জন্য কনফিগারেশন ফাইল

থিম রচনা করতে ফিগমা শৈলী অনুবাদ করার দুটি ধাপ রয়েছে:

  1. আপনার অ্যান্ড্রয়েড স্টুডিও প্রোজেক্টের UI প্যাকেজ ফোল্ডারের মধ্যে UI প্যাকেজ সংজ্ঞা JSON ফাইলে একটি UI প্যাকেজে একটি ফিগমা শৈলী একটি ডিজাইন টোকেনে অনুবাদ করা হয়।
  2. একটি UI প্যাকেজ সংজ্ঞা ফাইলে একটি ডিজাইন টোকেন আপনার অ্যান্ড্রয়েড স্টুডিও প্রোজেক্টে কম্পোজ থিম কোডের একটি স্নিপেটে অনুবাদ করা হয়েছে।

কাস্টম কনফিগারেশন ফাইলের বিন্যাস (যা 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 বিভাগ অন্তর্ভুক্ত:

  • figma এর colors বিভাগ একটি Figma শৈলী এবং সংশ্লিষ্ট ডিজাইন টোকেন নির্দিষ্ট করে যা UI প্যাকেজ সংজ্ঞা ফাইলে লেখা উচিত।
  • compose colors বিভাগটি UI প্যাকেজ সংজ্ঞা ফাইলে একটি ডিজাইন টোকেন এবং সংশ্লিষ্ট কোড স্নিপেট নির্দিষ্ট করে যা আপনার রচনা কোডে লেখা উচিত।

উপরের কনফিগারেশনের উদাহরণে, Figma-এ my-app-theme/sys/light/primary ব্যবহার করে যেকোন কিছুর রঙ UI প্যাকেজ সংজ্ঞা ফাইলে myapp.sys.color.primary হিসাবে লেখা থাকে। তারপর, কোড জেনারেশনের সময়, সেই রঙটি রচনায় MaterialTheme.colorScheme.primary হিসাবে লেখা হয়।

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"
      }
    }
  }
}

টাইপোগ্রাফি বিভাগগুলির গঠন এই সত্যকে প্রতিফলিত করে যে একটি টাইপোগ্রাফি শৈলী অনেকগুলি উপ-সম্পত্তির সমন্বয়ে গঠিত। ফিগমা এবং কম্পোজে, একটি টাইপোগ্রাফি শৈলীতে টাইপফেসের নাম, হরফের ওজন, আকার, অক্ষরের ব্যবধান এবং লাইনের উচ্চতা অন্তর্ভুক্ত রয়েছে। প্রতিটি শৈলীর স্বতন্ত্র উপ-সম্পত্তিকে বারবার ম্যাপ করার প্রয়োজনের পরিবর্তে, আমরা টোকেন এবং থিমগুলিতে সামগ্রিক শৈলীগুলিকে ম্যাপ করি এবং তারপর পৃথকভাবে প্রতিটি পৃথক উপ-সম্পত্তিকে ম্যাপ করি।

উপরের উদাহরণে বলা হয়েছে যে যখন UI প্যাকেজ সংজ্ঞা ফাইলে my-app-theme/headline/large শৈলী সহ একটি ফিগমা পাঠ্য আইটেম লেখা হয়, তখন পাঠ্যটির ফন্টটি myapp.sys.typescale.headline-large.font হয়, এর আকার হয় myapp.sys.typescale.headline-large.size , ইত্যাদি। তারপর, যখন কম্পোজ কোড জেনারেট করা হয়, তখন একটি RelayText কম্পোজেবল (যা কম্পোজ ম্যাটেরিয়ালে Text কম্পোজ করা যায়) তৈরি হয়, যেখানে font প্যারামিটারটি MaterialTheme.typography.headlineLarge.fontFamily , size প্যারামিটারটি MaterialTheme.typography.headlineLarge.fontSize , andfontsize. তাই

কনফিগারেশন ফাইলগুলির উদাহরণের জন্য, আপনি অন্তর্নির্মিত উপাদান 3 এবং উপাদান 2 ডিজাইন কিট কনফিগারেশনগুলি দেখতে পারেন, যা ঠিক একই বিন্যাস ব্যবহার করে। আপনি এখানে ফাইল ডাউনলোড করতে পারেন:

সীমাবদ্ধতা

বর্তমানে, বেশ কয়েকটি পরিস্থিতি রয়েছে যেখানে শৈলীগুলি থিমগুলিতে অনুবাদ করা হয় না:

  • টেক্সট শৈলী যা শুধুমাত্র একটি টেক্সট উপাদানের একটি অংশে প্রয়োগ করা হয় ( টেক্সটের একাধিক শৈলীতে বর্ণিত)
  • যদি একটি উপাদানের বিভিন্ন রূপের জন্য বিভিন্ন শৈলী প্রয়োগ করা হয়, শুধুমাত্র একটি শৈলী অনুবাদ করা হয়।
{% শব্দার্থে %} {% endverbatim %} {% শব্দার্থে %} {% endverbatim %}