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

URL: https://webrandum.net/figma-find-and-replace/
公開日: 2022-03-03
更新日: 2022-03-02
カテゴリー: デザイン
タグ: Figma, Figmaプラグイン
出典: Webrandum（著者: サイトウ マサカズ）

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

他にも問題になってくるのが表記揺れです。

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

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

## Find and Replace

![Find and Replace](https://webrandum.net/mskz/wp-content/uploads/2022/03/image_1-2.png)

[![](https://www.google.com/s2/favicons?domain=www.figma.com)Figma![](https://s.wordpress.com/mshots/v1/https%3A%2F%2Fwww.figma.com%2Fcommunity%2Fplugin%2F735072959812183643%2FFind-and-Replace?w=160)Figmahttps://www.figma.com/community/plugin/735072959812183643/Find-and-ReplaceFigma 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...](https://www.figma.com/community/plugin/735072959812183643/Find-and-Replace)

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

### 基本的な機能

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

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

![Find and Replaceパネル](https://webrandum.net/mskz/wp-content/uploads/2022/03/image_2-1.png)

| 項目 | 内容 | 備考 |
| --- | --- | --- |

| 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で検索置換](https://webrandum.net/mskz/wp-content/uploads/2022/03/image_3-1.png)

### 検索しても反応しない場合

いろいろ設定し回っていると、たまに検索が走らなくなるときがあります。

そういうときは一度Find and Replaceのパネルを開き直せば動くようになります。

まだ2回ほどしか遭遇していませんが、頭の片隅にとどめておいてください。

## Keyboard Maestroでショートカットキーを設定

Keyboard Maestroでショートカットキーを設定しておくと、一瞬で表示できてラクになります（Keyboard Maestroについて知らないかたは[こちらの記事](https://webrandum.net/keyboard-maestro/)をご覧ください）。

control + F（Find）で、メニューを選択するだけでもいいのですが、トグルで表示・非表示が切り替わると便利なので条件分岐をしています。

![Keyboard MaestroでFind and Replaceにショートカットキーを設定](https://webrandum.net/mskz/wp-content/uploads/2022/03/image_4-1.png)

パネルヘッダーが見つかったときはescでパネルを閉じて、見つからない場合はメニューを選択してパネルを開きます。

プラグインによるみたいなのですが、Find and Replaceの場合はescでパネルが閉じられたのでescを押すようにしています（対応していない場合は画像クリックで切り抜けます）。