Figmaの公開済みコンポーネントをインスタンスとのリンクを維持したまま別ファイルに移動する（前編）

デザイン事業部のまきです。今後も同じようなことが多分発生すると思うのでメモ。

状況

現状、Figmaで ❖main component とその ◇instance が1つのファイル[ファイル1]に共存している。
もう１つ、[ファイル2]にも[ファイル1]内のmain componentのInstanceが置いてある。

なぜこんな半端なファイル構成になっているかというと（読み飛ばしてok）
当初1つのファイルでmain componentを作りそのinstanceでザクザク画面デザイン作成進行していたのが、だんだん量が増えるにつれFigmaのファイル容量アラートが常に出るようになり動作も実際重たく、そのうちデータも飛びそうになり、、という事態になり、これはなんとかしないとダメだということで、新しく[ファイル2]を追加して、そこにinstanceで構成された画面デザインの半分くらいをお引越し、かつ[ファイル1]のmaincomponentをライブラリ追加 した、という経緯があった。Figmaビギナーにはありがちな事象だと思う。
この半端なファイル構成がずっと気持ち悪いなと思いつつも、調査が十分じゃないまま下手に動かしてmain componentとinstanceのリンクが今切れちゃったら困るという状況だったので、落ち着いたタイミングでやろうと考えていた。
最近案件がちょっと一区切りついたので、ようやくこのファイル構成大改造に着手できることに。

やりたいこと

今後更新する担当者など誰が見てもそのファイル構成からデザインデータの構造が理解しやすくなるように、main componentを別の新しいコンポーネント用のファイルにinstanceとのリンクを維持したまま移動したい。

[ファイル1][ファイル2]には社内外の関係者が多数インバイトされていて現在進行形で見ている人もいる。なので、[ファイル1]内のmain componentは残してinstance含む画面デザインのみを新ファイルに持っていく形にするのではなく、main componentを新ファイルに引っ越す形にしたい。
予想というか、普通に考えると、main componentをカット→新ファイルにペーストすると、それだけではinstanceとのリンクは維持されない。再度[ファイル1][ファイル2]で大量の各instanceを１つ１つ新ファイルのmain componentのライブラリにswapしなければいけなくなる。

リンクを維持したまま切り離すやり方

Figmaの公式にこんな記事があった。
公開済みコンポーネントの移動

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

まさに求めていた内容！

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

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

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

これを一度読んだだけだと分かったようなわからないような。
このページにあるgifアニメがイメージつきやすく分かりやすかったので、そこから汲み取った内容と合わせて私が理解できる言葉と図でまとめたのが以下。

❖ main componentがあるファイルA （ライブラリにPublish済み）
◇ instanceがあるファイルB
があるとしたら、

１）ファイルAのmain componentをカット

２）新ファイルCにペースト

３）新ファイルCにメッセージ「To move pasted components to this file, publish a library update」（Google翻訳：貼り付けたコンポーネントをこのファイルに移動するには、ライブラリの更新を公開します）が出るので「Publish」を選択

４）InstanceがあるファイルBにメッセージ「Update available」（利用可能なアップデート）が出るので「Update」を選択[24/3/22-仕様変更] 右上のライブラリアイコンをクリックしてライブラリの更新をアップデート
※2024/3/22以降仕様が変更され、ライブラリの更新に関する通知メッセージは右下に出ず、右上にライブラリアイコンが表示されそこから更新を取得する形になった。
右上のライブラリアイコンをクリックし、「Update all」を選択。

５）ファイルBのInstanceのリンク先がファイルAからファイルCに変更される

大まかな流れはおそらくこんな感じ。

要は、お引越ししたいmain componentをカットしてお引越し先のファイルにペーストすると、リンクを維持できるように促す通知メッセージやライブラリ更新が表示されるようなので、それにうまく応えればよさそう。

また、非表示コンポーネント（「.」「_」を接頭辞にしてライブラリにパブリッシュできないようにしてるコンポーネント）は表示コンポーネントになるよう名称変更してパブリッシュする必要があるとのこと。考えてみれば確かにそのままだとパブリッシュの対象に入れないはずなので納得。

事前知識として公式などから得た情報は以上。
後編では、テスト用ファイルを作成して本当にこのやり方でいけるのか試してみる+実際の案件ファイルでやってみての結果報告。