デザインの更新と反映

このセクションでは、前のプロジェクトをベースにして、Figma でコンポーネントを変更する方法（この場合はテキストの形式を変更する方法）を学習し、その変更が Android Studio のコードベースに反映されていることを確認します。

変更前後の比較

Figma の変更点

Figma コンポーネントを更新しましょう。Figma ファイルに戻って以下の操作を行います。

  1. [Title] テキストレイヤを選択します。[テキスト] セクションでスタイルを [太字] に変更します。

    Figma でタイトルのテキストを選択し、太字にしている

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

次に、更新したコンポーネントをコードベースに統合します。デベロッパーが新しいバージョンのコンポーネントを使用できるようにするには、バージョンを保存する手順を繰り返します。

  1. Figma Relay プラグインを開きます（まだ開いていない場合）。

  2. [デベロッパーと共有] をクリックします。

    メニューの [変更履歴に保存] オプション

  3. [デベロッパーと共有] 画面の [変更履歴を保存] セクションに、新しいバージョンの名前と説明を入力できます。

    メニューの [変更履歴に保存] オプション

  4. キーボードで CMD+L（Mac の場合）または Ctrl+L（Windows の場合）を押して、新しいリンクをクリップボードにコピーします。

コンポーネント コードを更新する

コンポーネントを再インポートしてみましょう。

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

    コンテキスト メニューにある [Update UI Package] 選択肢

    右下に表示される読み込みバーが最後まで進むのを待ちます。

    Android Studio の読み込みバー

  2. [[Make Project] ボタン] をクリックしてプロジェクトをビルドし、更新されたコンポーネントを app/java/com/example/hellofigma/MainActivity.kt のプレビューで確認します。テキストは太字になりました。

    ツールバーにあるビルドボタン
    コンポーネントのプレビュー

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

    ツールバーにある実行ボタン
    エミュレータでのアプリのプレビュー

次のステップ

デザインを更新して、変更後のコードがどのように更新されるのかも確認しました。次に、コンポーネント内で変数データを許可するコンテンツ パラメータを使用して、デザインにアノテーションを付ける方法を学習しましょう。