おすすめの方法
共有する前にエラーをチェックし、名前付きの版を作成する
コンポーネントまたはコンポーネントのページを共有する準備ができたら、名前付きバージョンを作成することで、UI パッケージ定義を安定させることができます。これにより、Figma ファイルに対する変更が本番環境のコンポーネントに影響しなくなります。
プラグインの [Share with developer] オプションをクリックします。
デベロッパーがコンポーネントの使用を妨げるエラーは、リストとして表示されます。まずエラーを修正してください。
すべてのブロックエラーの修正後に変更履歴を保存できます。これは、Figma 内に変更履歴を保存するのと同じです。新しいバージョンのタイトルと説明を入力します。[保存] をクリックします。
新しいバージョンは Figma 内に変更履歴として保存されます。
これにより、Android Studio プロジェクトが最新の名前のバージョンにリンクされ、シームレスなアップデートが可能になります。ファイルに名前付きバージョンがない場合、Android Studio のアップデートでは常に、自動保存された最新のバージョンが取得されます。名前付きの版を使用することをおすすめします。
Figma リンクの共有
準備ができたら、Figma URL リンクを使用して UI パッケージをデベロッパーと共有できます。
ページ内のすべての UI パッケージを共有する
左側のパネルでページを右クリックして、[Copy link to page] を選択します。
ページ上のすべての UI パッケージが共有されます。デベロッパーは、Figma ページで UI パッケージの一部またはすべてをインポートできます。
特定の UI パッケージを共有する
コンポーネントを選択した状態で右クリックし、[Copy/Paste as] > [Copy Link] を選択します。
選択した UI パッケージのみが URL を通じて共有されます。デベロッパーがインポートできるのは共有 UI パッケージのみです。
ファイル内のすべての UI パッケージを共有する
Figma デスクトップで、タブを右クリックして URL をコピーし、[Copy link] を選択します。
https://www.figma.com/file/sample_file_id/FileName?node-id=1234567
URL の node-id より後の部分をすべて削除します。新しい URL をデベロッパーと共有します。
https://www.figma.com/file/sample_file_id/FileName
デベロッパーは、すべての UI パッケージを Figma ファイルにインポートできます。
ページ内のすべての UI パッケージを特定のバージョンと共有する
Figma で変更履歴パネルを開きます。右クリックして [リンクをコピー] を選択します。
デベロッパーは、指定された名前付きバージョンでページ上のすべての UI パッケージをインポートできます。
高度な使用方法
Relay のワークフローでは、同じプロジェクトに異なる UI パッケージ バージョンをインポートできますが、Figma ファイルの URL を手動で作成する必要があります。
インポートするコンポーネントへの直接リンクをコピーします。コンポーネント レイヤを選択して、右クリックし、[Copy/Paste as] > [Copy link] を選択します。例:
www.figma.com/file/sample_file_id/FileName?node-id=123%3A45
使用するコンポーネントのバージョンを選択します。[File] > [Show version history] の順に移動して、バージョンを選択します。次に、右クリックして [Copy link] を選択し、バージョンの URL をコピーします。例:
www.figma.com/file/sample_file_id/FileName?version-id=7654321&node-id=0%3A1&viewport=2425%2C1794%2C2.99
2 つの URL を組み合わせて、コンポーネントのバージョン付き URL を作成します。バージョン付きリンクの
node-id
値をコンポーネント リンクの値に置き換えるか、version-id
パラメータをコンポーネントのリンクに挿入できます(どちらのパラメータも URL に存在する場合)。例:www.figma.com/file/sample_file_id/FileName?version-id=7654321&node-id=123%3A45