Figmaでテキストの一括置換を行うプラグイン「Find and Replace」
デザイン上のテキストに修正が入ったとき、1つ1つ変えていくのは非効率ですし、ミスの可能性も出てきます。
他にも問題になってくるのが表記揺れです。
「お問い合わせ」なのか「お問合せ」なのかなど、細かい表記を合わせていく上でも、検索したり一括置換が必要になります。
今回はそんなテキストの一括置換を行いたいときに使えるFigmaプラグイン「Find and Replace」についてまとめておきます。
Find and Replace
プラグインをインストールすると、Figmaメニューバーに［Plugins］→［Find and Replace］が追加されます。
基本的な機能
メニューの［Plugins］→［Find and Replace］を選択するとパネルが表示されます。
「Text」か「Layer Name」か選択できて、レイヤー名のみの置換もできます。
| 項目 | 内容 | 備考 |
|---|---|---|
| Find | 検索テキストを入力する | |
| Anywhere in text | 下記4つの中から検索オプションを選択する。
| |
| Find in selection | 選択オブジェクトの中から検索する | |
| Case sensitive | 大文字・小文字も判定する | |
| Match whole word | 単語全体にマッチする | cutで検索するときにcuteが引っかからなくなる （単語としてマッチするかどうか） |
| Replace with | 置換テキストを入力する | |
| Keep original case | ケースのルールを維持したまま置換する | |
Update layer name （Replace whole layer name） | レイヤー名も一緒に変更する |
設定できたら「Replace」をクリックするかenterで1つずつ置換、置換したくないテキストがある場合は「Find」横の矢印アイコンをクリックしてスキップできます。
「Replace All」をクリックするかcommand + enterで一括置換できます。
プレビューで確認
検索したあとは「Preview」に実際に置換後のプレビューが表示されるので、1つずつの置換であれば実行前に確認できます。
検索しても反応しない場合
いろいろ設定し回っていると、たまに検索が走らなくなるときがあります。
そういうときは一度Find and Replaceのパネルを開き直せば動くようになります。
まだ2回ほどしか遭遇していませんが、頭の片隅にとどめておいてください。
Keyboard Maestroでショートカットキーを設定
Keyboard Maestroでショートカットキーを設定しておくと、一瞬で表示できてラクになります（Keyboard Maestroについて知らないかたはこちらの記事をご覧ください）。
control + F（Find）で、メニューを選択するだけでもいいのですが、トグルで表示・非表示が切り替わると便利なので条件分岐をしています。
パネルヘッダーが見つかったときはescでパネルを閉じて、見つからない場合はメニューを選択してパネルを開きます。
プラグインによるみたいなのですが、Find and Replaceの場合はescでパネルが閉じられたのでescを押すようにしています（対応していない場合は画像クリックで切り抜けます）。
