このセクションでは、前のプロジェクトをベースにして、Figma でコンポーネントを変更する方法(この場合はテキストの形式を変更する方法)を学習し、その変更が Android Studio のコードベースに反映されていることを確認します。
Figma の変更点
Figma コンポーネントを更新しましょう。Figma ファイルに戻って以下の操作を行います。
[Title] テキストレイヤを選択します。[テキスト] セクションでスタイルを [太字] に変更します。
名前付きのバージョンを保存する
次に、更新したコンポーネントをコードベースに統合します。デベロッパーが新しいバージョンのコンポーネントを使用できるようにするには、バージョンを保存する手順を繰り返します。
Figma Relay プラグインを開きます(まだ開いていない場合)。
[デベロッパーと共有] をクリックします。
[デベロッパーと共有] 画面の [変更履歴を保存] セクションに、新しいバージョンの名前と説明を入力できます。
キーボードで CMD+L(Mac の場合)または Ctrl+L(Windows の場合)を押して、新しいリンクをクリップボードにコピーします。
コンポーネント コードを更新する
コンポーネントを再インポートしてみましょう。
Android Studio で [Project] ツール ウィンドウが [Android] ビューになっていることを確認します。 次に、
app/ui-packages/hello_card/
を右クリックし、[Update UI Package] を選択します。右下に表示される読み込みバーが最後まで進むのを待ちます。
[] をクリックしてプロジェクトをビルドし、更新されたコンポーネントを
app/java/com/example/hellofigma/MainActivity.kt
のプレビューで確認します。テキストは太字になりました。アプリを実行して、同じ更新内容をエミュレータで確認します。
次のステップ
デザインを更新して、変更後のコードがどのように更新されるのかも確認しました。次に、コンポーネント内で変数データを許可するコンテンツ パラメータを使用して、デザインにアノテーションを付ける方法を学習しましょう。
あなたへのおすすめ
- 注: JavaScript がオフになっている場合はリンクテキストが表示されます
- コンテンツ パラメータ
- Android Studio でデザインをコードに変換する