Figmaのローカルコンポーネントをライブラリに移動する方法（2023年1月版）

Satoru Kawahara

2023年1月27日 14:23

Figmaのヘルプ「公開済みコンポーネントの移動」ではタイトルの通り、あるライブラリのコンポーネントを別のライブラリへ移動する方法が説明されています。

この記事の内容をすこし応用するとライブラリではないファイルのローカルコンポーネントをライブラリへ移動して再リンクすることができます。

（この記事は2023年1月時点の情報です。Figmaはアップデートが頻繁なので試す前に最新のヘルプを確認することをお勧めします。）

大雑把な手順

移動元ファイルを一度ライブラリとして公開する
移動元ファイルからコンポーネントをカットする
移動先ファイルへペーストする
移動先ファイルをライブラリとして公開
移動元ファイルでリンクのアップデート
移動元ファイルを非公開に戻す

移動元ファイルを一度ライブラリにするのがポイント

上記手順のうちヘルプにないのは1、6番のみです。1番の状態で移動元ファイルが自分自身をライブラリとして参照している状態になります。

この状態にすることでヘルプにあるライブラリからライブラリへの移動手順が行えるようになり、結果としてローカルコンポーネントをライブラリへ移動できるようになります。

移動の際にバリアントの有無、ネストや非公開コンポーネントなどについては気をつける点があるのでヘルプを確認してください。この記事では細かいことを省いてファイルからライブラリの移動についてのみ説明しています。

準備: 作業前にヒストリーを保存しておく

まずは念のため作業前の状態をちゃんと保存しておきます。期待通りの状態にならなかった場合はこのヒストリーを復元しましょう。

手順1: 移動元ファイルを一度ライブラリとして公開する

移動元ファイルで [Assets] から [Publish] を行い公開します。

手順2: 移動元ファイルからコンポーネントをカットする

移動したいコンポーネントをカットします。

手順3: 移動先ファイルへペーストする

移動先ファイルでペーストします。

手順4: 移動先ファイルをライブラリとして公開

ペーストした時点でうまくいっていれば移動したコンポーネントをライブラリとして公開するように促すトーストが出てくるので [Publish…] を選択します。

ライブラリを公開するためのダイアログが開きます。

このとき、コンポーネントのステータスが Move to This file になっていることを確認してください。ここが Add や Modified などになっている場合は移動されません。

Move to this file が確認できたら、 [Publish] します。

公開が完了したら移動元ファイルへ戻ります。

手順5: 移動元ファイルでリンクのアップデート

パブリッシュ後に移動元ファイルに戻ってくるとコンポーネントを移動した旨のトーストが出てくるので [Review] を選択します。

内容を確認して [Update all] します。

アップデート後インスタンスのパネルを参照しリンク先が移動先ライブラリになっていれば成功です。

手順6: 移動元ファイルを非公開に戻す

移動したコンポーネントが一部の場合は移動元ファイルがライブラリとして公開されたままになっているので非公開にして普通のファイルにしておきます。

ここまでの操作ですべてのコンポーネントを移動した場合はその時点で移動元ファイルは自動的にライブラリではなくなり非公開になっています。その場合は操作不要です。（UIが非活性になっており下記で説明する手順が実行できません。）

[Assets] から [Libraries] を開いて移動元のファイルを選択し [Unpublish] したら完了です。

注意：Restore Componentは絶対押さない

もし移動元ファイルのアップデート後にインスタンスを参照して [Restore Component] というボタンが出ている場合は適切に移動ができていません。この場合にRestore Componentボタンは絶対に押さないでください。移動作業をやり直したい場合は最初に保存したヒストリーに戻るかアンドゥでカットする前の状態に戻してください。

（うまくいかない原因は色々ありうるので残念ながら説明できません。ハマってしまった人はがんばってください！）

また手順5のリンクアップデートを行う前にインスタンスパネルをみた時も [Restore Component] ボタンが見えます。この場合も絶対に押さないでください。触らずに手順5のリンクアップデートを進めてください。