Figmaのコンポーネント化を解除・削除する方法
この記事では、Figmaファイルで作成されたオブジェクトのコンポーネント状態やヴァリアントなどを解除・削除する方法を紹介します。不要になったコンポーネントを処分したり、間違えてコンポーネント化してしまった場合などに参考にしてください。
この記事のーターゲット
Figmaでコンポーネント・ヴァリアントを解除・削除したい方
Figmaで不要なインスタンスを削除したい方
コンポーネント化を解除・削除する方法
2022年1月現在、Figmaで作成したコンポーネント化された状態を直接解除する方法はありませんが、複製したインスタンスを解除してからコンポーネントを削除することで、間接的にコンポーネントの解除と同等の状態にすることは可能です。やり方は次のとおりです。
削除したいコンポーネント・ヴァリアントからインスタンスを作成
インスタンスの切り離し（Detach instance）をしてインスタンスをプレーンなオブジェクトに変更
削除したいコンポーネント・ヴァリアントを選択してDeleteキーなどで削除
▼コンポーネントの場合
▼ヴァリアントの場合
コンポーネントを削除することで起きること
コンポーネントやヴァリアントを削除することで、以下の現象が発生します。
複製されたインスタンスは、親となるコンポーネントやヴァリアントが削除されても、そのままインスタンスとして残り続ける
残されたインスタンスから、元のコンポーネントやヴァリアントを復元することができる
削除したコンポーネント・ヴァリアントと全く同じ名前のコンポーネント・ヴァリアントを作成しても、削除したものとは区別され、全く別のコンポーネント・ヴァリアントとして扱われる
コンポーネントから複製されたインスタンスを探す方法
Figmaファイルの中から特定のインスタンスを探す方法はいくつかあります。代表的な方法は次のとおりです。
ファイル内キーワード検索を使用する
プラグイン「Instance Finder」を利用する
ファイル内キーワード検索を使用する方法
ファイル内のキーワード検索を使用する場合の注意点として、インスタンスを特定して検索することはできず、あくまでインスタンス名をテキスト一致で検索することになります。
したがって、インスタンス名を変更していた場合は検索結果から漏れてしまう可能性があります。
キーワード検索の詳しい使い方は以下の記事を参考にしてください。
Figmaでファイル内のテキストを検索・一 括置換する方法
今回はFigmaのファイル内のオブジェクト名やコンテンツ内のテキストを検索・置換する方法を紹介します。ファイル内で特定の文言を一括で置き換えたい場合や、UIコンポーネントをテキスト検索で引き当てたいときに便利です。 ...
プラグイン「Instance Finder」を利用する方法
プラグイン「Instance Finder」を使用すれば、ファイル内で使用されているインスタンスを特定することができます。
使い方は以下の通りです。
ファイル内で検索したいインスタンスまたはコンポーネント・ヴァリアントを選択する
「アセット」メニューからプラグイン「Instance Finder」を実行
起動したポップアップメニューから検索したい範囲を設定して、「Find」をクリック
選択できる範囲は、Entire Document（ファイル全体）、Current Page（現在のページのみ）、Selected Frame（選択したフレーム内のみ）の３種類です
デモとして、以下のようにファイルの中の複数ページにまたがってインスタンスが存在する状態からインスタンスを検索してみようと思います。
まず、プラグインを起動して検索したいコンポーネントを選択して検索してみます。すると、ポップアップウインドウに検索結果が表示され、検索結果をクリックすると特定したインスタンスが選択されます。
ページをクリックすると、ページ内の全てのインスタンスを一括選択することもできます。インスタンスをまとめて置き換える場合などに便利です。
ヴァリアントのインスタンスを検索する場合は少し注意が必要で、ヴァリアントの全体（紫色の点線）を選択しても検索できません。
ヴァリアントの単体を選択することで、インスタンスを検索することができます。
この記事を読んだ方におすすめの記事
Figmaで汎用的なUIコンポーネントを作る方法
今回はFigmaで汎用的なUIコンポーネントを作る方法をいくつか紹介します。この記事の方法では、プラグインなどは利用せずにFigmaの基本機能のみで作成できます。実際のサンプルデータもあわせて用意しているので、参考にしてみてください。 ...
