メインコンポーネント（マスターコンポーネント）探しに役立つFigmaプラグイン「Find Components」
by Tsutomu Takanashi
今やweb業界を中心に、デザイナーだけでなくプロダクトに関わるほぼ全ての業種の方が触れているのではないかというくらい有名なデザインツール「Figma」（フィグマ）。
2016年のリリース以降、2020年には InVision や Adobe XD などの他ツールを抑えて圧倒的シェアを占め、日々様々なSNS上でも見かけない日はありません。
皆さん、Figma使いこなせてますか！？
私は2023年頃からほぼ毎日使っているのである程度熟れた自負はあったのですが、今でも「え、こんな設定あったん…？え…、あなたこんなことできたの…！？！？」とすばらしい発見をする度に初心に返り、精進する日々を送っております。。w
さて、そんな奥深い魅力あふれるデザインツールのFigmaですが、よりツールを便利にするための**プラグイン（拡張機能）**の存在を忘れてはいけません。
よく「おすすめFigmaプラグイン10選！」のような記事で便利なプラグインが取り上げられていますが、たまに「これじゃないんだよなぁ…」みたいに、求めてる使い方を実現できるプラグインが中々見つからない。。なんて経験ありませんか？
弊社内でもそんな会話をしていたある時、「無いんだったら作ってみるか！」と盛り上がり、その翌日に爆誕、さらにその2日後に爆速リリースしたプラグイン第一弾が今回ご紹介する「Find Components」（ファインドコンポーネンツ）になります…！！
（前置き長くなりすいません。。。！w）
「Find Components」（ファインドコンポーネンツ）で出来ること
- メインコンポーネント/インスタンスの絞り込み
- 選択したレイヤーの中から、メインコンポーネント/インスタンスのみを抽出して選択できる
- 選択対象の切り替え
- ドロップダウンメニューからメインコンポーネント/インスタンスのどちらを選択対象とするかを選択できる
- グループ化されたレイヤーにも対応
- グループ化されたレイヤーの奥深くにネストされたコンポーネント/インスタンスも探し出して選択できる
- 処理のキャンセル
- レイヤーを選択し過ぎたりサイズの大きなファイル上での実行処理が重い場合でも、途中で処理をキャンセルできる
出来ることとしはシンプルではありますが、「メインコンポーネント/インスタンス」で選択対象が選べたり、処理を途中でキャンセルできるのは個人的にとてもうれしいです。
（用途に合わせて複数のプラグインを入れなくて済んだり、処理に時間がかかる大規模ファイル上での実行でも途中キャンセル出来る安心感から気軽に実行できる、、、などの観点から）
※メインコンポーネント = マスターコンポーネント（master components）です
（余談ですが、数年前のFigma使い始め初期頃、日本語切り替えができる前くらいは「マスターコンポーネント | master components」で表記されてた気がするのだけど、いつから「メインコンポーネント | main components」になったんだろう。。。）
1. Find Componentsプラグインのインストールと起動
プラグインのインストールは簡単で、Figmaアカウントログイン状態で「Find Components」ページにアクセスして上図の「保存」マークを選択すればOKです。
プラグインの保存後は、
- Figmaのデザインファイル内のキャンバス上で右クリック後に「プラグイン / プラグインを管理…」を選択
- 「Find Components」を検索＆選択
- 「Find Components」のUIを確認
とすれば、プラグインの起動完了です！
※2025/03/11(火) 14:05追記
「Find Components」ページで保存をしなくても、Figmaのデザインファイル内のプラグイン管理で「Find Components」と検索すればコミュニティのアイテムに一覧の中に出てきて、その画面からも「保存」や「実行」を選べます
2. Find Componentsプラグインの実行
Find Componentsプラグイン実行の際の基本的な操作は以下の通り、
- 検索対象レイヤーを選択： 「メインコンポーネント / インスタンス」を探す対象となる複数レイヤー・レイヤーグループ・フレーム・セクションなどを選択
- 「実行」ボタン押下： Find Componentsプラグインの「実行」ボタンを押下
とすればあとはプラグインが働いてくれます。
図のサンプルではセクション内にレイヤー階層違いで複数個のメインコンポーネント / インスタンスを配置しています。
実行結果イメージは以下の通りです。
メインコンポーネント検索の実行・実行結果
「3個のメインコンポーネントを選択しました」とメッセージが表示され、ファイル/レイヤー上でもその対象のコンポーネントが選択されます。
インスタンス検索の実行・実行結果
「メインコンポーネント → インスタンス」と検索対象を変更するには、Find Components上の選択したいオブジェクトで「インスタンス」を選択後、実行します。
完了後はメインコンポーネントと同様に「2個のインスタンスを選択しました」とメッセージが表示され、ファイル/レイヤー上でもその対象のインスタンスが選択されます。
そして「メインコンポーネント / インスタンス」のどちらのオブジェクト検索処理中にいつでも処理のキャンセルが行えます。
（処理中は進捗率をプログレスバーで視覚的に確認もできるようになってます）
ちなみに、コンポーネントが見つからなかった時は「選択範囲内にメインコンポーネントが見つかりませんでした」とメッセージが表示されます。
いかがでしたでしょうか。。！？
今回ご紹介のプラグインは「Find Components」という名前の通り、コンポーネント検索に特化したものになっているため、主にデータ整理時に効力を発揮するのかなと考えています。
今後もこのようなプラグイン開発から、自分たちを含む同様の悩みのある方の課題解決に繋がれば弊社スタッフ一同、とてもうれしく思います！
また何かしらで機能が必要な際はプラグイン開発＆リリースをするつもりではいますが、もしこの記事を読まれている方で「こういう感じのプラグインがあるとうれしい」や「〇〇のようなことって出来ないの？」など、直近でお困りのことがあればお気軽に お問い合わせ からご連絡・ご相談ください！
それではまた次回のプラグインリリースをお楽しみに♪ ＾＾b