Android Studio でデザインをコードに変換する

Figma からデザインをインポートする

次に、Figma で作成した UI パッケージを Android Studio プロジェクト。UI パッケージを組み込むには、共有 URL をコピーします。 を Android Studio のインポート ウィザードに表示します。

  1. 事前設定された Android Studio プロジェクトの ZIP ファイルをダウンロードします。 (これは、[Relay のインストール] ページのプロジェクトと同じプロジェクトです)。

  2. ファイルをダブルクリックして解凍します。そうすると、HelloFigma という名前のフォルダが作成されます。このフォルダをホームフォルダに移動します。

  3. Android Studio に戻ります。[File] > [Open] を選択してホームフォルダに移動し、[HelloFigma] を選択して [Open] をクリックします。

  4. プロジェクトを開くときに、Android Studio から、プロジェクトを信頼するかどうかを尋ねられる場合があります。その場合は [Trust Project] をクリックします。

  5. Android Studio で [File] > [New] > [Import UI Packages…] を選択します。

    [File] メニューの [Import UI Packages…] オプション
  6. [Import UI Packages] ダイアログで、Figma ファイルの URL を貼り付けて [Next] をクリックします。

    [Import UI Packages] ダイアログ
    キーチェーン システム ダイアログ
  7. ファイルがダウンロードされるのを待ちます。ダウンロードが正常に完了すると、コンポーネントのプレビューが表示されます。[作成] をクリックします。

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

    新しいファイルがプロジェクトに追加されていることを確認します。これらのファイルは、プロジェクトの一部としてソース管理にコミットする必要があります。プロジェクトの [Android] ビューは次のように表示されます。

    [Android] ビューの [ui-packages] フォルダ
    • app/ui-packages/hello_card/*
      コードでコンポーネントを記述するために必要なすべてのソースアセット。これらのファイルは、ビルドステップでコード生成に使用されます。

    • app/ui-packages/hello_card/hello_card.json
      コンポーネントの定義(レイアウトやその他のプロパティ)を含む JSON ファイル。

    • app/ui-packages/hello_card/fonts/*
      Jetpack Compose でコンポーネントをサポートするために必要なすべてのフォント ファイル。

    • app/ui-packages/hello_card/*.png または *.jpeg
      コンポーネントをサポートするために必要なすべての画像アセット。

    • app/ui-packages/hello_card/VERSION.txt
      UI パッケージのインポートに使用される Relay for Android Studio プラグインのバージョン。

    • app/ui-packages/hello_card/config.json
      プレビューに使用されるテーマ。

コードをビルドして生成する

  1. [Make Project] ボタン をクリックして、プロジェクトをビルドします。

    ツールバーの [Make Project] ボタン
  2. ビルド結果を表示するには、[Build] タブをクリックします。

    Android Studio の下部の [Build] タブ
  3. これで、生成済みのコードがプロジェクトに追加されました。これは生成済みのコードであるため、プロジェクトの一部としてソース管理にコミットしてはなりません。プロジェクトの [Android] ビューは次のように表示されます。

    [Android] ビューに表示された生成済みのコード
    • app/java (generated)/com/example/hellofigma/hellocard
      生成済みの Jetpack Compose コードとフォント。

    • app/java (generated)/com/google/relay/compose
      すべての UI パッケージで使用される共有ランタイム コード。

  4. app/java (generated)/com/example/hellofigma/hellocard/HelloCard.kt を開きます。これは、Figma コンポーネント用の生成済みの Jetpack Compose 関数です。コンポーネントをプレビューすることもできます。

    これで、レイアウト、アセット、スタイル設定の情報が Figma からコードに転送されました。

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

    コードでは、Figma に追加されたサマリーが、生成済みのコンポーザブルの上のコメントに変換されています。

     /**
     * Hello Card component used to display the image and the title content
     *
     * This composable was generated from the UI package ‘ hello_card’
     * Generated code; do not edit directly
     */
    @Composable
    fun HelloCard(modifier: Modifier = Modifier) {...
    

コンポーネントを統合してアプリを実行する

それでは、コンポーネントをメイン アクティビティに統合しましょう。

  1. app/java/com/example/hellofigma/MainActivity.kt で、先頭の import セクションに追加します。

    import com.example.hellofigma.hellocard.HelloCard
    
  2. 同じファイルの下の方で、MainActivity クラスの次のコードを変更します。

    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) {
                        // Greeting("Android") // Delete this line
                        HelloCard()  // Add this line
                    }
                }
            }
        }
    }
    
  3. 同じファイルのさらに下にあるコンポーザブルのプレビューで、もう 1 行変更します。

    @Preview(showBackground = true)
    @Composable
    fun DefaultPreview() {
        HelloFigmaTheme {
            HelloCard() // Change this line
        }
    }
    
  4. ツールバーでデバイスが選択されていることを確認します。

  5. ツールバーの ▶ をクリックして、プロジェクトを実行します。

    ツールバーの実行ボタン

    エミュレータが起動し、プロジェクトがビルドされて、アプリが開始されます。

    エミュレータに表示されたアプリのプレビュー

    お疲れさまでした。以上で、初めての Figma コンポーネントを Jetpack Compose アプリに組み込みことに成功しました。

次のステップ

デザインの更新と反映

エンドツーエンドの動作の例を学んだので、次は、元のデザインを更新してコードを再生成する方法を習得しましょう。