【解決】XDにも文字の検索・置換がほしい!

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
XDプラグインFindReplaceSession アイキャッチ図版

Adobe XDにはテキストの検索・置換機能がありません。FigmaやSketchにも本体には文字列検索・置換機能は見当たりませんね。プロトタイピングツールには存在しないのが当たり前なのでしょうか(追記:Figmaは2022/10/07に公式の検索・置換機能がつきました)。

ではどうするかと言うと,ユーザーの誰かが開発したプラグインを入れて解決します。例えばFigmaにはFind and Replaceのような名前のツールがいくつか公開されていて,実際に使えます。ありがたいですね。

Adobe XDでは次のプラグインが近い機能を持っています(ほかにもあるかもしれません)。

ただ全般的に,スタイルをキープしたまま置換すること,テキストフレーム内の一部分を置換すること,ドキュメント全体で検索・置換することなどが苦手です。これはAdobe XDプラグインの仕組み上,そういった機能を作るのがとてもとても難しいから仕方ありません。

今回はそれらの問題を解決したプラグインを開発しました。テキストを検索・置換するAdobe XD用プラグイン,FindReplaceSession を紹介します。

XDプラグインFindReplaceSession イメージ画像

動画で見たい

FindReplaceSessionって何?

テキストを検索・置換するAdobe XD用UXPプラグインです。こんなおすすめポイントがあります。

  • スタイルをキープしたままテキストを置換できる
  • 検索にマッチしたテキストフレームすべてでも,文字の一部分のみでも置換可能
  • ドキュメント全体で検索可能。置換できなかった文字はパネルに表示する
  • パネルに表示したマッチ結果をタップすると,テキストにフォーカスする
  • 選択したアイテムのみ検索対象にすることもできる

どのバージョンに対応しているの?

Adobe XDのバージョン54かそれ以降に対応します。このバージョンのXDが動けば,macOS/Windows問わず使用可能です。

動作確認済み
  • macOS 11.6.8 (Apple Silicon)
  • Windows 10
  • Adobe XD (v54)

どうインストールするの?

今回のプラグインはひとまずxdxファイルとして公開しています。ファイルをダウンロードしてください。

xdxファイルを開くとCreative Cloudアプリが自動で開きます。「プラグインを確認できませんでした」とダイアログが出るので,その右下にある「ローカルにインストール」を選んでください。

「プラグインを確認できませんでした」のダイアログ 画像

ダイアログに出てきた注意事項をよく読み,問題なければOKしてください。インストールされましたとメッセージが出たらようやく完了です。

使いかたは?

基本的にプラグインパネルで操作します。まずはプラグインメニューのFindReplaceSessionを選ぶなどして,専用パネルを開いてください。

Findの部分に検索文字列,Replace withに置換文字列を入力します。その下のチェックボックスでは,検索オプションを指定できます。適宜切り替えてご利用ください。

XDプラグインFindReplaceSession パネル初期状態画像

すべて置換する(Replace all)

  1. パネルのReplace allボタンを選択してください
  2. すると,検索対象になっていて編集可能なテキストをすべて置換します
XDプラグインFindReplaceSession Replace all説明画像

置換できなかったマッチ結果はパネルに表示されます。ロックを解除する,リピートグリッドやコンポーネントの中身を直接選択するなどで編集可能になります。再度置換をお試しください。

XDプラグインFindReplaceSession disabled状態説明画像

すべて検索する(Find all)

  1. パネルのFind allボタンを選択してください
  2. すると,マッチした検索結果すべてをパネルに表示します。現在編集できないテキストも結果に含みます
XDプラグインFindReplaceSession Find all説明画像

文字の一部を置換する

Replace allで置換できなかった文字や,Find allで表示したマッチ結果は,それぞれ一部分ずつ置換できます。

  1. パネル下段に,アイテム名とマッチしたテキストが表示された枠があります。それを見てどの部分を置換するか決めてください
  2. 置換する枠の右側にあるReplaceボタン(循環する矢印のアイコン)を押してください。その部分の文字を置換します。
  3. 同じテキストフレームにまだマッチ結果がある場合,自動的に再検索されてパネルに出てきます
XDプラグインFindReplaceSession 1つだけ置換説明画像

マッチ結果をすべてパネルから取り除く(Reset)

パネルのResetボタンを押してください。マッチ結果が空になります。

マッチ結果の一部をパネルから取り除く

各マッチ結果枠の右上にあるIgnoreボタン(X)を押してください。その1つのみパネルから取り除けます。

検索オプションはどんなの?

Case sensitive

ONにすると,アルファベットの大文字・小文字を区別します。OFFの場合は大文字・小文字一緒くたにマッチします。

Grep

ONにすると正規表現を使用します。正規表現はJavaScriptのルールに基づきます。Look behindなどが使える比較的新しいバージョンです。

Selected text only

ONにすると,検索対象を選択しているアイテムとその子孫のテキストに限定します。OFFの場合は書類上のすべてのテキストを対象にします。

作者に感謝を伝えたい!

Buy me a coffeeは,クレジットカード払いなどでクリエイターにコーヒーをおごれるサービスです。ツール・情報が役に立った! 感謝の気持ちを表現したい! というかた,おごっていただけましたら嬉しいです☕️

これでまた少し仕事が速くなりました。今日もさっさと仕事を切り上げて好きなことをしましょう!

このサイトで配布しているスクリプトやその他のファイルを,無断で転載・配布・販売することを禁じます。
それらの使用により生じたあらゆる損害について,私どもは責任を負いません。
スクリプトやファイルのダウンロードを行った時点で,上記の規定に同意したとみなします。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。

広告

コメントを残す