デザイン バリアントの処理

Figma では、状態やサイズなど、同じコンポーネントの異なるバリエーションをグループ化するためにバリアントが使用されます。Relay は、コンポーネントのバリアントをコードに変換する際に保持します。このセクションでは、Relay でデザインのバリアントを処理する方法について説明します。

出発地

ツリーのバリエーションが表示されたニュースカード

3 つのバリアントを持つ News Card コンポーネントを含む Figma ファイルから始めます。

  • hero-item は最も重要なニュース記事です。
  • article-item: 典型的な記事の場合
  • audio-item は、読むのではなく音声で聞く記事を対象としています

Figma サンプルをコピーする

このチュートリアルでは、既存の Figma ファイルをサンプルとして使用します。Figma アカウントにログインしていることを確認してください。

  1. HelloNews.fig をパソコンにダウンロードします。

  2. Figma で、ファイル ブラウザに移動します。左側の [下書き]にカーソルを合わせます+ アイコンが表示されたら、[+] アイコン、[インポート] の順にクリックします。 ダウンロードした HelloNews.fig ファイルを選択します。これには 10 秒から 1 分ほどかかります。

  3. Figma で、インポートしたファイルを開きます。

UI パッケージを作成する

Relay for Figma プラグインによってコンポーネントに情報が追加されるため、Google のコンポーネントをコードで使用するデベロッパーと連携できます。

  1. ファイル内の Relay for Figma プラグインを開きます（メニューバーで [Plugins] > [Relay for Figma] を選択します）。[利用を開始] をクリックします。

  2. コンポーネントを選択し、[Create UI Package] をクリックします。

    プラグインの [Create UI Package] ボタン

  3. UI パッケージが選択された状態で、概要ボックスに説明を追加します。例: 「リストのニュース アイテムを表示するニュースカード コンポーネント」。

    プラグインの概要ボックス

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

UI パッケージを作成したら、開発チームと共有するコンポーネントを準備します。

  1. Figma Relay プラグインを開きます（まだ開いていない場合）。
  2. [デベロッパーと共有] をクリックします。
  3. [デベロッパーと共有] 画面の [変更履歴を保存] セクションに、新しいバージョンの名前と説明を入力できます。

  4. [保存] をクリックします。

    タイトルの例: Initial New Card

    説明の例: ニュース記事の初回の反復

Android Studio プロジェクトをダウンロードする

このチュートリアルの Android Studio のパートでは、事前構成済みの Android Studio プロジェクトを使用します。このプロジェクトには、ニュース記事を書式なしテキスト形式で表示するアプリが含まれています。

  1. サンプルの HelloNews.zip ファイルをダウンロードします。
  2. ファイルをダブルクリックして解凍すると、HelloNews というフォルダが作成されます。ホームフォルダに移動します。
  3. Android Studio に戻ります。[File] > [Open] に移動してホームフォルダに移動し、[HelloNews] を選択して [Open] をクリックします。
  4. Android Studio でプロジェクトを開くと、そのプロジェクトを信頼するかどうかの確認が表示されます。[Trust Project] をクリックします。

Android Studio にインポートする

Figma コンポーネントをプロジェクトにインポートします。

  1. Figma に戻り、ニュースカード チュートリアルの Figma ファイルの URL をコピーします。この URL を使用してコンポーネントをインポートします。Figma の右上にある [Share] ボタンをクリックします。表示されたダイアログ ボックスで、[リンクをコピー] をクリックします。

    [ファイル] タブの [リンクをコピー] オプション

  2. Android Studio で HelloNews プロジェクトに切り替えます。Android Studio のメニューバーから、[File] > [New] > [Import UI Packages...] に移動します。

    [File] メニューの [Import UI Packages…] オプション

  3. Figma ファイルの URL を貼り付けて、[Next] をクリックします。

    [Import UI Packages] ダイアログ
    キーチェーン システム ダイアログ
    1. ファイルの取得が完了したら（しばらく時間がかかることがあります）、[完了] をクリックします。
    コンポーネントのプレビュー

  4. [Make Project] ボタン をクリックして、プロジェクトをビルドします。この処理には 1 分ほどかかる場合があります。

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

アプリとコンポーネントをプレビューする

  1. Android ビューで app/java/com/example/hellonews/ui/home/HomeScreen.kt を開くと、アプリのプレビューが表示されます。これにより、複数のニュース記事が書式なしテキスト形式で表示され、音声記事の上に印刷された記事が表示されます。

    アプリのプレビュー

  2. app/java (generated)/com/example/hellonews/newscard/NewsCard.kt を開きます。これは、Figma コンポーネント用に生成された Jetpack Compose コードです。プレビューを見ると、NewsCard コンポーネントの 3 つのバリアントが Figma からコードに変換されていることがわかります。コードを詳しく見てみましょう。

    NewsCard コンポーネントのプレビュー

  3. View 列挙型を使用すると、このコンポーネントに使用するバリアントを選択できます。列挙型の名前とその値は、Figma コンポーネントのバリアントから派生したものです。これは、NewsCard コンポーザブルの view パラメータで使用されます。

    Figma のバリアントと対応する View 列挙型

  4. NewsCard コンポーザブルは UI パッケージから生成されました。これには View タイプのパラメータが含まれており、ニュースカードのバリアントをインスタンス化するように設定しています。

    package com.example.myapplication.newscard

import ...

// Design to select for NewsCard
enum class View {
    HeroItem,
    ArticleItem,
    AudioItem
}

/**
* News card component intended to display news items for a list.
*
* This composable was generated from the UI Package 'news_card'.
* Generated code; do not edit directly
*/
@Composable
fun NewsCard(
    modifier: Modifier = Modifier,
    view: View = View.HeroItem
) {...}

次のステップ

NewsCard はまだ使用できる段階ではありません。このコンポーネントは異なるニュース記事を表示する方法は認識せず、Figma に同じハードコードされたニュース記事を表示するだけです。したがって、今コンポーネントを追加すると、同じニュース記事が繰り返されることになります。NewsCard のどの部分に動的データを入力するかを指定する手段が必要です。

コンテンツ パラメータ

このセクションでは、NewsCard コンポーネントにコンテンツ パラメータを追加します。