Figmaで検索・置換する方法。ショートカットからでOK。 / メモ / いがわ

Figmaで検索・置換する方法。ショートカットからでOK。

2022.12.02 2024.02.03更新。

Contents - 目次

1 Figmaで検索・置換が可能に。
2 検索のショートカットと置換入力欄の出し方。
3 Figmaのテキストの整列。
4 Figma 関連メモ。

Figmaで検索・置換が可能に。

Figmaのアップデートで検索と置換の機能が実装されていた。

ショートカットで検索、置換ができるので、なかなか使い勝手が良い。

使い方は簡単で、以下のショートカットですぐに覚えられる。

ショートカット

Mac：「Command」 + 「F」
Win：「Ctrl」 + 「F」

※「F」は「Find（探す、見つける）」の「F」と覚えると覚えやすい。
（このショートカットは様々なツールで共通しているので、扱えるととても便利。）

例）

検索・置換を行う前の状態。（デザインに特に意味はない。）

今回は例として、「Replace」の文字を「置換」に変える。

Figmaで検索・置換をする。

検索のショートカットと置換入力欄の出し方。

ショートカット

Mac：「Command」 + 「F」
Win：「Ctrl」 + 「F」

のショートカットで、Figmaの画面左上に「Find…（検索文字列を入力…）」の画面が現れる。

「Find…（検索文字列を入力…）」のすぐ右横のアイコンをクリックし、メニューから「Replace（置換）」の選択で、「Replace with…（置換後…）」の入力欄が現れる。

Figmaで検索・置換をする。

「Find…」の欄に、「Replace」と入力。すると該当する「Replace」の文字が目立つようにフォーカスされる。

Figmaで検索・置換をする。

「Replace with…」の欄に「置換」と入力し、「Replace」の文字を「置換」に変える。

その後、「Replace」のボタンをクリックするか、エンターキーを押すと実際にテキストが置換される。

「Replace all」をクリックすると、全ての文字が一発置換される。

戻ると進む（取り消しとやり直し）もショートカットで。

もし間違った場合は、

Mac：「Command」 + 「Z」
Win：「Ctrl」 + 「Z」

で戻ることができる。

また、戻り過ぎた場合は、

Mac：「Command」 + 「shift」 + 「Z」
Win：「Ctrl」 + 「shift」 + 「Z」

で進むことができる。

※このショートカットも様々なツールで共通している。

Figmaで検索・置換をする。

Figmaのテキストの整列。

今回の例では文字数が変わった影響で、文字の位置がズレてしまった。

こんなときは、Figmaの画面右横の「整列パネル」でセンタリング。

※この整列方法も色々なツールと共通している。

Figmaで整列をする。

以上で、文字列の検索と置換によりテキストの置き換え、そして整列により位置の調整が完了。

文字入力の打ち間違えやスペルミス、テキスト修正時に重宝できる機能で、とてもありがたい。

テキストの中央揃え。

ちなみにあらかじめ「テキスト」のパネル左下にある設定箇所で、「Text align center(テキスト中央揃え）」に指定しておくと、文字数が変わっても位置は自動的に中央に揃えられる。

※これもやはり多くのツールで共通している。

Figmaでテキストを検索・置換する方法。これは便利。

以上、参考になれば幸いです。

※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いているので「です・ます調」ではありません。（元々はメモ書きでした。） ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。

井川宜久 / Norihisa Igawa

Figma 関連メモ。