UI パッケージを共有する

おすすめの方法

共有する前にエラーをチェックし、名前付きの版を作成する

コンポーネントまたはコンポーネントのページを共有する準備ができたら、名前付きバージョンを作成することで、UI パッケージ定義を安定させることができます。これにより、Figma ファイルに対する変更が本番環境のコンポーネントに影響しなくなります。

  1. プラグインの [Share with developer] オプションをクリックします。

    [Android] ビューの StatusCard
  2. デベロッパーがコンポーネントの使用を妨げるエラーは、リストとして表示されます。まずエラーを修正してください。

  3. すべてのブロックエラーの修正後に変更履歴を保存できます。これは、Figma 内に変更履歴を保存するのと同じです。新しいバージョンのタイトルと説明を入力します。[保存] をクリックします。

    [Android] ビューの StatusCard
  4. 新しいバージョンは Figma 内に変更履歴として保存されます。

    [Android] ビューの StatusCard

これにより、Android Studio プロジェクトが最新の名前のバージョンにリンクされ、シームレスなアップデートが可能になります。ファイルに名前付きバージョンがない場合、Android Studio のアップデートでは常に、自動保存された最新のバージョンが取得されます。名前付きの版を使用することをおすすめします。

準備ができたら、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 パッケージをインポートできます。

[Android] ビューの StatusCard

高度な使用方法

Relay のワークフローでは、同じプロジェクトに異なる UI パッケージ バージョンをインポートできますが、Figma ファイルの URL を手動で作成する必要があります。

  1. インポートするコンポーネントへの直接リンクをコピーします。コンポーネント レイヤを選択して、右クリックし、[Copy/Paste as] > [Copy link] を選択します。例:

    www.figma.com/file/sample_file_id/FileName?node-id=123%3A45

  2. 使用するコンポーネントのバージョンを選択します。[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

  3. 2 つの URL を組み合わせて、コンポーネントのバージョン付き URL を作成します。バージョン付きリンクの node-id 値をコンポーネント リンクの値に置き換えるか、version-id パラメータをコンポーネントのリンクに挿入できます(どちらのパラメータも URL に存在する場合)。例:

    www.figma.com/file/sample_file_id/FileName?version-id=7654321&node-id=123%3A45