Figma で UI パッケージを作成する

事前構成された Figma ファイルをダウンロードする

まず、Figma でコンポーネントを作成します。このチュートリアルでは、既存の Figma ファイルを例として使用します。このファイルには、画像とタイトルを含む自動レイアウト フレームが含まれています。Figma アカウントにログインしていることを確認します。

1. HelloFigma.fig という Figma ファイルをパソコンにダウンロードします。

2. Figma のファイル ブラウザで、[Drafts] にカーソルを合わせます。+ アイコンが表示されます。[+]、[Import...] の順にクリックし、ダウンロードした HelloFigma.fig ファイルを選択します。

   

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

コンポーネントを作成する

インポートしたデザインを Relay for Figma プラグインで使用するには、まずコンポーネントに変換する必要があります。[Hello Card] フレームを選択し、ツールバーで [Create Component] をクリックします。

UI パッケージを作成する

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

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

   

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

   

3. UI パッケージが選択された状態で、[Summary] に説明を追加します。例: 「画像とタイトルのコンテンツの表示に使用される Hello Card コンポーネント」

   

4. ダイアログの右下にある [デベロッパーと共有] をクリックして、次の画面に進みます。

デベロッパーと共有するフロー

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

コンポーネント ファイルのファイルの新しい名前付きバージョンを作成します。名前付きのバージョンのコンポーネントを使用することで、本番環境のコンポーネントに不要な変更が行われるのを防ぐことができます。

1. コンポーネントの最初のバージョンの名前と説明を入力し、[保存] をクリックします。

   

2. 次に、Mac では CMD-L、Windows では Ctrl+L キーを押して、共有可能なコンポーネント リンクを作成し、クリップボードにコピーします。

   

次のステップ

これで、UI コンポーネントを Android Studio に引き渡す準備が整いました。

Android Studio を開いて、このチュートリアルの次のパートを完了します。

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