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…] を選択します。

   

6. [Import UI Packages] ダイアログで、Figma ファイルの URL を貼り付けて [Next] をクリックします。

   

   

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

   

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

   

   • 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. をクリックして、プロジェクトをビルドします。

   

2. ビルド結果を表示するには、[Build] タブをクリックします。

   

3. これで、生成済みのコードがプロジェクトに追加されました。これは生成済みのコードであるため、プロジェクトの一部としてソース管理にコミットしてはなりません。プロジェクトの [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 アプリに組み込みことに成功しました。

次のステップ

デザインの更新と反映

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