公開済みコンポーネントの移動

この機能を使用できるユーザー

プロフェッショナルプラン、エデュケーションプラン、およびビジネスプランでサポートされます

移動元ファイルと移動先ファイルの両方の編集可アクセス権があるユーザーだけが、ファイル間でコンポーネントを移動できます。

公開済みコンポーネントとコンポーネントセットを、インスタンスへのリンクを維持した状態でファイル間で移動します。このプロセスは、大きいライブラリを小さいファイルに分割するときに使用します。

公開済みコンポーネントを移動するときに使用できるのは、このプロセスだけです。ファイル間ではメインコンポーネントとそのインスタンスをコピーして貼り付けることができます。Figmaでは、コンポーネントとインスタンスが同じファイルにある限り、コンポーネントとインスタンスの間の関連付けが維持されます。

これは、コンポーネントの切り取りおよび貼り付けと、変更の公開という2段階のプロセスです。コンポーネントを移動し、関連付けられているインスタンスを更新するには、この両方を行う必要があります。

仕組み

各コンポーネントには一意のIDがあります。FigmaではこのIDを使用して、メインコンポーネントとそのインスタンスのコネクションが維持されます。

ファイル間でコンポーネントを切り取って貼り付けると、貼り付けられたコンポーネントは新しいコンポーネントとして扱われます。新しいコンポーネントには、元のメインコンポーネントとは異なる一意のIDが設定されます。

この複製をライブラリに公開すると、登録済みファイルに対してこの変更が通知されます。これらの更新を受け入れると、公開先ライブラリからインスタンスに切り替わります。

このようなメカニズムのため、このプロセスを取り消すことはできません。このアクションを取り消す ↓ための唯一の方法は、コンポーネントを元のファイルに戻すことです。

用語

• 公開済みコンポーネント: チームまたは組織のライブラリに公開されているコンポーネント。ファイル、プロジェクト、またはチーム内のインスタンスは、公開済みコンポーネントから更新を取得できます。
• ローカルコンポーネント: 現在のファイルに含まれており、ライブラリに公開されていないコンポーネント。ローカルインスタンスは、コンポーネントと同じファイルに含まれている場合にのみ更新されます。これには、意図的に非表示にしたコンポーネントも含まれます。
• 移動元ファイル: コンポーネントの移動アクションに関連する固有の用語です。移動元ファイルとは、新しい場所に移動する前に、コンポーネントが含まれていたファイルです。
• 移動先ファイル: コンポーネントの移動アクションに関連する固有の用語です。移動先ファイルとは、コンポーネントの移動先のファイルです。新しいファイル/ライブラリまたは既存のファイル/ライブラリを移動先ファイルとして使用できます。
• 登録済みファイル: アクティブな公開済みライブラリにリンクしているスタイルとインスタンスが含まれているFigmaデザインファイルまたはFigJamファイルです。

コンポーネントまたはコンポーネントセットの移動

ファイルおよびライブラリ間で切り取りと貼り付けを実行して、公開済みコンポーネントとコンポーネントセットを移動します。コンポーネントとインスタンスの間の関連付けを維持するか、完全に新規のコンポーネントとして扱います。

コンポーネントを移動する前に

コンポーネントを移動する前に、いくつかの点を考慮する必要があります。

• A

  非表示のコンポーネントの公開

  ファイル間で非表示のコンポーネントを移動することはできませんが、このような操作を実行したい場合があります。たとえば、非表示のコンポーネントのネストしたインスタンスを使用するコンポーネントがある場合などです。

  非表示のコンポーネントを別のファイルに移動するには、その前に非表示のコンポーネントを公開する必要があります。非表示のコンポーネントを移動し、変更をライブラリに公開したら、コンポーネントを再び非表示にできます。

  1. 非表示のコンポーネントをライブラリに公開します →
  2. コンポーネントを切り取って移動先ファイルに貼り付けます ↓
  3. 移動先ファイルをライブラリとして公開します ↓
  4. コンポーネントを非表示にしてライブラリから削除します →
• B

  ネストしたインスタンスとオーバーライド

  移動するコンポーネント内にネストしたインスタンスがある場合は、メインコンポーネントが含まれる場所を考慮する必要があります。これは特に、メインコンポーネントにオーバーライドを適用している場合に重要です。

  メインコンポーネントが同じファイル内にある場合は、コンポーネントをまとめて移動して公開することをお勧めします。ネストしたインスタンスのメインコンポーネントが非表示の場合は、最初にメインコンポーネントを公開する必要があります。

  コンポーネントで別の公開済みライブラリのメインコンポーネントが使用されている場合、そのライブラリへの関連付けは維持されます。

  コンポーネントの変更を検討する前に、公開先ライブラリからコンポーネントを公開することをお勧めします。

  例を使って説明します

  ダイアログウィンドウのメインコンポーネントがあります。このメインコンポーネントには、ボタンコンポーネントとアイコンコンポーネントのネストしたインスタンスがあります。アイコンとボタンはいずれも非表示コンポーネントです。

  ダイアログコンポーネントのインスタンスでは、汎用情報アイコンが警告アイコンと入れ替えられており、色のオーバーライドがアイコンボタンとプライマリーボタンの両方に適用されていました。

  これらのコンポーネントを移動してオーバーライドを維持するには、次の手順に従います。

  1. アイコンコンポーネントとボタンコンポーネントをライブラリに公開します。非表示のコンポーネントの公開 →
  2. 現在のファイルからすべてのコンポーネントを切り取ります。これには、アイコンコンポーネント、ボタンコンポーネント、およびこれらのコンポーネントのインスタンスを使用するダイアログコンポーネントが含まれます。
  3. 切り取ったコンポーネントを移動先ファイルに貼り付けます。以下の説明を参照 ↓
  4. 移動先ファイルをライブラリとして公開します。以下の説明を参照 ↓
  5. 登録済みファイルでライブラリからの更新を受け入れます。ライブラリの更新の受け入れ →
  6. アイコンとボタンの両方のメインコンポーネントを非表示にします。公開時にコンポーネントを非表示にする →
• C

  バリアントの削除

  コンポーネントとコンポーネントセットを移動するには、ファイル間でこれらのコンポーネントを切り取って貼り付ける必要があります。Figmaでは、切り取りと貼り付けの実行時にファイルに存在していたバリアントだけが移動されます。

  バリアントを削除したが、今後復元する可能性がある場合は、移動元ファイルでこの操作を行う必要があります。コンポーネントセットの移動前にこの操作を行うことをお勧めします。ただし移動元ファイルが存在している限り、この操作を後で実行できます。

  1. 削除されたバリアントをインスタンスから復元します。これにより、バリアントが元のファイルでメインコンポーネントとして復元されます。
  2. 復元したコンポーネントを、移動元ファイルのライブラリに公開します。移動できるコンポーネントは公開済みコンポーネントだけです。
  3. 以下で説明する切り取りと貼り付けの手順を使用して、移動先ファイルにコンポーネントを移動します。
  4. 移動したコンポーネントを、既存のコンポーネントセットにドラッグします。

コンポーネントの切り取りと貼り付け

コンポーネントまたはコンポーネントセットを移動するには、次の手順に従います。

1. メインコンポーネントが含まれているファイルを開きます。これは移動元ファイルです。
2. 移動するメインコンポーネントまたはコンポーネントセットを選択します。
3. 切り取りのショートカットを使用して、コンポーネントまたはコンポーネントセットをクリップボードに追加します。
   • Mac: ⌘ Command - X
   • Windows: Ctrl + X
4. コンポーネントを移動するファイルを開きます。これは移動先ファイルです。
5. 何も選択されていないことを確認してから、ファイルにコンポーネントを貼り付けます。
   • Mac: ⌘ Command - V
   • Windows: Ctrl + V

ライブラリの変更の公開

ファイル間で公開済みコンポーネントを移動すると、影響を受けるすべてのライブラリに変更を公開するように求められます。

移動プロセスを完了するには、これらの変更を公開する必要があります。変更を公開すると、すべての登録済みファイルに更新がプッシュされます。

1. 通知で[公開]をクリックするか、ショートカットを使用してライブラリモーダルを開きます。
   • Mac: ⌥ Option 3
   • Windows: Alt 3
   
2. このファイルに移動したすべてのコンポーネントを含め、ライブラリの変更がすべてリストされます。コンポーネントごとに、[このファイルに移動]または[コピーとして公開]を選択します。
   1. 移動するすべてのコンポーネントで[このファイルに移動]を選択します。これにより、メインコンポーネントと既存のインスタンスの間の関連付けが維持されます。
   2. コンポーネントを新しいメインコンポーネントとして公開するには、[コピーとして公開]を選択します。これにより、コンポーネントとインスタンスのコネクションが解除され、インスタンスは以後更新を取得しなくなります。
   
3. 変更の説明を追加します。この説明はファイルのバージョン履歴に表示されます。
4. [公開]をクリックして、変更をライブラリに公開します。

ライブラリへの更新の公開 →

更新の取得

Figmaでは、スタイルとコンポーネントを使用するすべてのファイルに更新がプッシュされます。標準のベル通知と、ライブラリからの更新の取得を促すプロンプトが表示されます。ライブラリからの更新の確認と受け入れ →

更新を確認して受け入れるまでは、移動元ファイルの削除済みコンポーネントにインスタンスがリンクされた状態のままになります。登録済みファイルで更新を受け入れ、ローカルインスタンスを更新します。

• 登録済みファイル

  更新を取得する前にインスタンスを選択または編集すると、移動元ファイルの削除済みメインコンポーネントが引き続きポイントされます。ライブラリから更新を取得すると、移動先ファイルのメインコンポーネントがポイントされます。

• 移動元ファイルのローカルインスタンス

  これらのコンポーネントが移動先ファイルのライブラリに公開されるまで、移動元ファイルのローカルインスタンスは更新を取得しません。

  [更新]をクリックして更新を取得し、インスタンスが新しい場所のコンポーネントにリンクされていることを確認します。

• 移動先ファイルのローカルインスタンス

  移動先ファイルのインスタンスが、移動元ファイルから移動したコンポーネントにリンクされている場合、これらのインスタンスは自動的に更新され、新しく移動されたローカルコンポーネントをポイントするようになります。

コンポーネントの移動の取り消し

次のいずれの方法でも、コンポーネントの移動アクションを取り消すことはできません。

• 取り消しのキーボードショーカットを使用する
• 削除済みコンポーネントをインスタンスから復元する
• ファイルのバージョン履歴の古いバージョンを復元する

ファイルではこれらのアクションを実行できますが、コンポーネントが元の場所に戻ることはなく、予期しない結果が発生する可能性があります。

コンポーネントを元の場所に戻すには、前述のコンポーネント移動プロセス ↑を使用することをお勧めします。