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

Figma では、バリアントを使用して、さまざまなバリエーションをグループ化します。 状態やサイズが異なるなど、同じコンポーネントを 1 つにまとめることができます。リレー保護区 コードのバリアントとして認識されます。このセクションでは Relay がデザイン内のバリアントを処理する仕組み

出発点

ツリー バリアントが表示されたニュースカード

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

  • hero-item は最も重要なニュース記事用です
  • article-item: 一般的な記事の場合
  • audio-item: 読むのではなく聴いている記事用

Figma サンプルをコピーする

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

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

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

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

UI パッケージを作成する

Relay for Figma プラグインはコンポーネントに情報を追加するので、以下を 開発者と協力して コンポーネントをコーディングします

  1. ファイル内の Relay for Figma プラグインを開きます（メニューバー: [Plugins] > [Relay]）。 （Figma の場合）をご覧ください）。[開始] をクリックします。

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

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

  3. [UI Package] が選択された状態で、概要ボックスに説明を追加します。対象 例: 「リストのニュース項目を表示することを目的としたニュースカード コンポーネント」。

    <ph type="x-smartling-placeholder">
    </ph> プラグインの概要ボックス

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

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

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

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

    タイトルの例: イニシャルと新しいカード

    説明の例: ニュース記事項目の初回イテレーション

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

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

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

Android Studio にインポートする

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

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

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

  2. Android Studio で HelloNews プロジェクトに切り替えます。[ファイル >新規 >インポート UI Packages...] を選択します。

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

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

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

  4. [ [Make Project] ボタン プロジェクトを構築します。これには 1 分ほどかかる場合があります。

    <ph type="x-smartling-placeholder">
    </ph> ツールバーのビルドボタン

アプリをプレビュー&コンポーネント

  1. Android ビューで、 app/java/com/example/hellonews/ui/home/HomeScreen.kt, アプリのプレビューが表示され、いくつかのニュース記事が 1 つの画面に表示されます。 書式なしテキスト形式で、音声のストーリーの上にストーリーの印刷を表示します。

    アプリのプレビュー

  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 を使用する準備が整っていません。コンポーネントは ハードコードした 1 つのニュース記事のみを Figma で表示できます。もし コンポーネントを追加すれば 同じニュース記事しか得られません あります。NewsCard のどの部分を埋めるかを指定する方法が必要です 動的データと組み合わせると

コンテンツ パラメータ

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