このページは Cloud Translation API によって翻訳されました。

コンテンツパラメータ

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

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

Figma ファイルでコンポーネントを選択し、Relay for Figma プラグインを開きます（[Plugins] > [Relay for Figma]）。
メインの Figma ウィンドウで [Title] レイヤを選択します。これを行うには、Mac の場合は ⌘ キーを押しながらクリックします。Windows と Linux の場合は Ctrl キーを押しながらクリックします。次に、プラグインで [Parameters] の横にある [+] をクリックし、[text-content] を選択してレイヤのパラメータを追加します。
タイトルテキストのコンテンツパラメータの名前を変更するには、[Name] に名前を入力します。このチュートリアルでは「Title」と入力します。

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

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

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

Figma Relay プラグインを開きます（まだ開いていない場合）。
[デベロッパーと共有] をクリックします。
[デベロッパーと共有] 画面で、バージョンの名前と説明を入力します。

タイトルの例: Hello World Card V3

説明の例: Added parameters

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

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

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

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

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

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

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

プロジェクトを再ビルドすると、更新されたコンポーネントがプレビューに表示されます。これで、新しいパラメータ値が表示されるようになりました。
エミュレータでアプリを実行し、同じ更新を確認します。

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

次のステップ

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

あなたへのおすすめ

注: JavaScript がオフになっている場合はリンクテキストが表示されます
Android Studio でデザインをコードに変換する
デザインの更新と反映
Compose レイアウトの基本

コンテンツ パラメータ

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