コンテンツ パラメータ

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

プラグインの Title パラメータ

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

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

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

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

    Figma プラグインのパラメータ詳細

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

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

それでは、更新したコンポーネントをコードベースに統合しましょう。デベロッパーがコンポーネントの最新バージョンを使用できるようにするため、新しい名前付きバージョンを作成します。

  1. [File] > [Save to version history] に移動し、新しいバージョンのタイトルと説明を入力します。

    タイトルの例: Hello World Card V3

    説明の例: Added parameters

    メニューの [Save to version history] オプション

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

それでは、コンポーネントを更新しましょう。

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

    コンテキスト メニューの [Update UI Package] オプション
  2. [Make Project] ボタン をクリックして、プロジェクトを再ビルドします(ビルドエラーが発生しますが、これについては後で説明します)。

    ツールバーのビルドボタン

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

    Figma および生成されるコードの Title パラメータ

    しかし、HelloCard を呼び出す MainActivity のコードに新しい Title パラメータの値が含まれていないため、ビルドエラー No value passed for parameter 'title が発生します。MainActivity を修正し、HelloCardtitle パラメータに値を渡す必要があります。

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

    テキスト スタイルが更新された Hello カードのプレビュー
  7. エミュレータでアプリを実行し、同じ更新を確認します。

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

次のステップ

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