Figmaでテキストの一括置換を行うプラグイン「Find and Replace」

デザイン上のテキストに修正が入ったとき、1つ1つ変えていくのは非効率ですし、ミスの可能性も出てきます。

他にも問題になってくるのが表記揺れです。
「お問い合わせ」なのか「お問合せ」なのかなど、細かい表記を合わせていく上でも、検索したり一括置換が必要になります。

今回はそんなテキストの一括置換を行いたいときに使えるFigmaプラグイン「Find and Replace」についてまとめておきます。

Find and Replace

Figma

Figma

https://www.figma.com/community/plugin/735072959812183643/Find-and-Replace

Figma Community plugin — Search for texts on your page and replace them just like a text editor.You can search for objects on your page by either text content or layer name. Click on the ... button next to each section to display more settings.Keyboard shortcutsWhen focused on "Find":Enter: Go to next result⇧ Enter...

プラグインをインストールすると、Figmaメニューバーに［Plugins］→［Find and Replace］が追加されます。

基本的な機能

メニューの［Plugins］→［Find and Replace］を選択するとパネルが表示されます。

「Text」か「Layer Name」か選択できて、レイヤー名のみの置換もできます。

項目	内容	備考
Find	検索テキストを入力する
Anywhere in text	下記4つの中から検索オプションを選択する。 Beginning of text：指定文字で始まる Anywhere in text：指定文字が含まれる（デフォルト） End of text：指定文字で終わる Exact match：指定文字と完全一致
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を押すようにしています（対応していない場合は画像クリックで切り抜けます）。