Figma で UI パッケージを作成する
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
まず、Figma でコンポーネントを作成します。このチュートリアルでは、既存の Figma ファイルを例として使用します。このファイルには、画像とタイトルを含む自動レイアウト フレームが含まれています。Figma アカウントにログインしていることを確認します。
- HelloFigma.fig という Figma ファイルをパソコンにダウンロードします。
Figma のファイル ブラウザで、[Drafts] にカーソルを合わせます。+ アイコンが表示されます。[+]、[Import...] の順にクリックし、ダウンロードした HelloFigma.fig ファイルを選択します。
Figma で、インポートしたファイルを開きます。
コンポーネントを作成する
インポートしたデザインを Relay for Figma プラグインで使用するには、まずコンポーネントに変換する必要があります。[Hello Card] フレームを選択し、ツールバーで [Create Component] をクリックします。
UI パッケージを作成する
Relay for Figma プラグインにより、コンポーネントに追加情報が追加され、コードでコンポーネントを使用できるデベロッパーと連携できるようになります。
ファイル内の Relay for Figma プラグインを開きます(Figma メニューで [Plugins] > [Relay for Figma])。[利用を開始] をクリックします。
コンポーネントを選択し、[Create UI Package] をクリックします。
UI パッケージが選択された状態で、[Summary] に説明を追加します。例: 「画像とタイトルのコンテンツの表示に使用される Hello Card コンポーネント」
ダイアログの右下にある [デベロッパーと共有] をクリックして、次の画面に進みます。
デベロッパーと共有するフロー
UI パッケージを作成したら、開発チームと共有するコンポーネントを準備します。
コンポーネント ファイルのファイルの新しい名前付きバージョンを作成します。名前付きのバージョンのコンポーネントを使用することで、本番環境のコンポーネントに不要な変更が行われるのを防ぐことができます。
コンポーネントの最初のバージョンの名前と説明を入力し、[保存] をクリックします。
次に、Mac では CMD-L、Windows では Ctrl+L キーを押して、共有可能なコンポーネント リンクを作成し、クリップボードにコピーします。
次のステップ
これで、UI コンポーネントを Android Studio に引き渡す準備が整いました。
Android Studio を開いて、このチュートリアルの次のパートを完了します。
Android Studio でデザインをコードに変換する
このページのコンテンツやコードサンプルは、コンテンツ ライセンスに記載のライセンスに従います。Java および OpenJDK は Oracle および関連会社の商標または登録商標です。
最終更新日 2024-03-25 UTC。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"必要な情報がない"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"複雑すぎる / 手順が多すぎる"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"最新ではない"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻訳に関する問題"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"サンプル / コードに問題がある"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"その他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"わかりやすい"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"問題の解決に役立った"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"その他"
}]
{"lastModified": "\u6700\u7d42\u66f4\u65b0\u65e5 2024-03-25 UTC\u3002"}
[[["わかりやすい","easyToUnderstand","thumb-up"],["問題の解決に役立った","solvedMyProblem","thumb-up"],["その他","otherUp","thumb-up"]],[["必要な情報がない","missingTheInformationINeed","thumb-down"],["複雑すぎる / 手順が多すぎる","tooComplicatedTooManySteps","thumb-down"],["最新ではない","outOfDate","thumb-down"],["翻訳に関する問題","translationIssue","thumb-down"],["サンプル / コードに問題がある","samplesCodeIssue","thumb-down"],["その他","otherDown","thumb-down"]],["最終更新日 2024-03-25 UTC。"]]