コンテンツ パラメータ

実装する際、ほとんどのコンポーネントのコンテンツは静的でなく、コンポーネントに渡されるデータに応じて変化します。これをデザインに反映させるには、コンテンツ パラメータを使用します。コンテンツ パラメータを使用すると、実際のデータをハードコードすることなく、デザインのどの部分にデータを含めるかを指定できます。

コンテンツ パラメータを追加する

1. Figma ファイルでコンポーネントを選択し、Relay for Figma プラグインを開きます（[Plugins] > [Relay for Figma]）。

   

2. メインの Figma ウィンドウで [Title] レイヤを選択します。これを行うには、Mac の場合は ⌘ キーを押しながらクリックします。Windows と Linux の場合は Ctrl キーを押しながらクリックします。次に、プラグインで [Parameters] の横にある [+] をクリックし、[text-content] を選択してレイヤのパラメータを追加します。

   

3. タイトル テキストのコンテンツ パラメータの名前を変更するには、[Name] に名前を入力します。このチュートリアルでは「Title」と入力します。

   

   名前を編集する以外に、別のプロパティ タイプを選択したり、コード内にコメントを生成するために説明を追加したりできます。デベロッパーと協力して最適な命名スキームを見つけてください。コンテンツ パラメータの名前は、生成されるコンポーザブルのパラメータ名に変換されます。

名前付きのバージョンを保存する

このバージョンをコードにインポートする準備ができているとマークしましょう。

1. Figma Relay プラグインをまだ開いていない場合は、開きます。
2. [デベロッパーと共有] をクリックします。

3. [Share with developer] 画面で、バージョンの名前と説明を入力します。

   タイトルの例: Hello World Card V3

   説明の例: Added parameters

Android Studio でコンポーネントを更新する

Android Studio のコンポーネントを更新しましょう。

1. Android Studio で [Project] ツール ウィンドウが [Android] ビューになっていることを確認します。次に、app/ui-packages/hello_card/ を右クリックして [Update UI Package] を選択します。

   

2. をクリックして、プロジェクトを再度ビルドします。

   

   app/java/com/example/hellofigma/hellocard/HelloCard.kt を開くと、title というパラメータが追加されていることがわかります。このパラメータの名前は、Figma で指定したコンテンツ パラメータの名前です。

   

3. app/java/com/example/hellofigma/MainActivity.kt を開きます。

4. MainActivity クラスを 1 行変更して、title パラメータに値を追加します。

   class MainActivity : ComponentActivity() {
       override fun onCreate(savedInstanceState: Bundle?) {
           super.onCreate(savedInstanceState)
           setContent {
               HelloFigmaTheme {
                   // A surface container using the 'background' color from the theme
                   Surface(color = MaterialTheme.colors.background) {
                       HelloCard(title="Balloon World!") // Change this line
                   }
               }
           }
       }
   }
   

5. 同じファイルのさらに下にあるコンポーザブルのプレビューで、もう 1 行変更します。

   @Preview(showBackground = true)
   @Composable
   fun DefaultPreview() {
       HelloFigmaTheme {
           HelloCard(title="Balloon World!") // Change this line
       }
   }
   

6. プロジェクトを再ビルドすると、更新されたコンポーネントがプレビューに表示されます。これで、新しいパラメータ値が表示されるようになりました。

   

7. エミュレータでアプリを実行し、同じ更新を確認します。

   お疲れさまでした。以上で、Relay ワークフローの基本を習得しました。

次のステップ

基本チュートリアルはこれで終了です。Relay ワークフローの機能をたくさん見てきましたが、利用できる機能は他にもいくつかあります。インタラクション ハンドラのような機能の使用方法や、複数の Figma バリアントを持つコンポーネントを扱う方法などに興味がある場合は、上級チュートリアルに進んでください。