【解決】XDにも選択メニューがほしい!

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
XD共通選択・オブジェクト選択 アイキャッチ図版

「コンポーネントって一括削除できないのかなぁ」というコメントを見かけ,そういえばXDにはIllustratorの自動選択ツールや選択メニューのような類似したアイテムを選択する機能ってないよねと気づきました。

塗り色や線の色が共通なアイテムを選択するプラグインSelectionは見つかりましたが,共通コンポーネントはないようです。

そこで今回は,名前/種類/コンポーネントのインスタンス/座標など属性が共通するアイテムを選択するAdobe XD用プラグインSelectMenuを紹介します。

SelectMenuって何?

似たような属性のアイテムをすべて選択するAdobe XD用プラグインです。下記の機能があります。

共通選択(Select Same)

1つアイテムを選択して実行すると,似たような属性のアイテムをすべて選択します。

Same Name同じ名前のアイテムを選択する
Same Name & Classテキスト/長方形/アートボードなどの種類が同じで名前も一致するアイテムを選択する
Same Class種類が同じアイテムを選択する
Same Components同じコンポーネントのアイテムを選択する。マスターとインスタンスは区別されない
Same Position (Local)アートボード左上からの相対座標が同じアイテムを選択する
Same Left (Global)絶対座標のX値が同じアイテム(同じ縦方向の列)を選択する。おもにアートボード選択を想定

共通テキスト選択(Select Same Text)

1つテキストを選択して実行すると,似たような属性のテキストをすべて選択します。選択はテキストフレーム単位で行い,文字単位では区別しません。

Same Font Family同じフォント名のテキストを選択する
Same Font Family & Styleフォント名とウェイト(またはイタリック・コンデンスなど)が一致するテキストを選択する
Same Font Family & Style & Sizeフォント名・ウェイト・文字サイズが一致するテキストを選択する
Same Font Size同じ文字サイズのテキストを選択する

行列選択(Select Aligned Items)

グリッド状に整列されたアイテムのうち1つを選択して実行すると,同じ行や列など共通する座標のアイテムをすべて選択します。

Same Row同じ横方向の行のアイテム(絶対座標のY値が同じアイテム)を選択する
Left of the Row同じ行で元アイテムより左方向にあるアイテムを選択する
Right of the Row同じ行で元アイテムより右方向にあるアイテムを選択する
Same Column同じ縦方向の列のアイテム(絶対座標のX値が同じアイテム)を選択する
Above of the Column同じ列で元アイテムより上方向にあるアイテムを選択する
Below of the Column同じ列で元アイテムより下方向にあるアイテムを選択する

オブジェクト選択(Select Objects)

あらかじめ用意してある特定の条件のアイテムをすべて選択します。

All Artboardすべてのアートボードを選択する
Locked Itemsすべてのロックされたオブジェクトを選択する
Hidden Itemsすべての非表示オブジェクトを選択する
Marked Items[書き出し対象にする]がチェックされたすべてのオブジェクトを選択する

テキスト選択(Select Texts)

あらかじめ用意してある特定の条件のテキストをすべて選択します。選択はテキストフレーム単位で行い,文字単位では区別しません。

All Textすべてのテキストを選択する
Point Textsすべてのポイントテキスト(幅の自動調整)を選択する
Auto Height TextsすべてのAuto Height Text(高さの自動調整)を選択する
Fixed Height TextsすべてのFixed Height Text(固定サイズ)を選択する
Area Textsすべてのエリアテキストを選択する。高さの自動調整・固定サイズ両方を含む

インストール方法

今回のXDのプラグインはAdobeの公開審査をすでに通過しているので,次のリンクから直接インストールできます。
https://xd.adobelanding.com/en/xd-plugin-download/?name=e46fe5a4

「このページで“Adobe XD.app”を開くことを許可しますか?」と出たら許可してください。Creative Cloudアプリが自動で開きます。その右のほうにあるインストールボタンを押せばインストールは完了です。

使いかた

次の動作を行うと,対象のオブジェクトが選択されます。

共通選択・共通テキスト選択・行列選択

アートボード上でアイテムを1つ選択し,メニューの プラグイン > SelectMenu の中から Same Name など目的の項目を実行してください。

オブジェクト選択・テキスト選択

メニューの プラグイン > SelectMenu の中から All Artboard など目的の項目を実行してください。何もアイテムを選択していない場合,書類全体から該当アイテムを検索し選択します。すでに何かアイテムを選んでいる場合,そのアイテムの同階層から下層にかけて検索・選択します。

注意

書類全体のアイテム数が多いと固まったり,動作が遅かったりするかもしれません。ただAdobe XDは動きが速く,結構な数があっても一瞬で終わります。限界はどのあたりなのか……

Edit context rule

XDには Edit context rule というプラグインが編集/選択できる範囲を定めた決まりがあり,動作が制限されます。そのため,1度の実行では該当アイテムすべてを選択しきれない可能性があります。心に留めておいてください。

具体的に言うと次のような制限です。

  • 編集/選択できるのは,基本的にプラグイン実行時に選択していたアイテムから2階層下(孫)まで
  • リピートグリッド/コンポーネント/マスクのグループ/ブーリアングループ(複合シェイプ)の中身は選択できない
  • 単なるグループの中身は例外的に2階層を超えて選択できる

ちなみに

このプラグインは比較的簡単に別の選択条件を開発できるので,こんなのがあったら絶対使うというものがあったらぜひ教えてください。

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

 

コードは長いので,ダウンロードして見てください。

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

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

SNSでもご購読できます。

広告

コメント

  1. Pちゃん より:

    初めまして。
    とても良いプラグインをたくさん有難うございます!

    XDのテキスト関連でほしい機能がたくさんあります

    ●「同じ書体を全て選択」
    テキストを一括変換したい時が結構あります。

    ●アートボード内に配置しているテキストを全体的に拡大きくしたい、
    というときにいつも困っています…

    「複数テキストを○pt拡大」といった感じでしょうか。
    これが無理であれば、
    「同じサイズのテキストを選択」が可能になればいいのかな…。

    (複数選択してカーソルで拡大するとデザインがズレていちいち修正するのが大変ですが、
    これを解決したうえで拡大、というのはさすがに無理ですよね)

    …あと、全然違うプラグインになると思いますが、
    アートボード内で何のフォントを使ったかを忘れてしまう事があってよく困ります(;´∀`)
    何のフォントを使っているのが一覧で解って、
    それぞれのフォントをクリックするとそれがどこに使われているのか解る、
    みたいなのがあると嬉しいです!

    勝手ばかり言ってすみません

  2. Pちゃん より:

    すみません

    オブジェクト>テキスト>フォントサイズを大きく
    で複数テキストのサイズを拡大できることに気づきました!!!

    これで、行間も拡大してくれたら完璧なんですが…(;’∀’)

    1. したたか企画 より:

      初めまして,ご意見ありがとうございます。参考になります。

      「同じ書体を全て選択」
      プラグインはテキストフレーム単位での動作なので,文字単位で選択できないんですよね。なので,Illustratorで言う「フォント検索」機能を別プラグインとして作った方が良さそうです。

      「複数テキストを○pt拡大」
      文字サイズと行間を+4pxとか-4px,あるいは1.2倍のように相対的に指定できるイメージでしょうか。これもまた別プラグインとして作れそうです。デザインのズレ防止には,スタックを使ってレスポンシブリサイズ可能にしておくのが良いと思います。

      「同じサイズのテキストを選択」
      これはテキストフレーム単位でよければ追加できます。

      何のフォントを使っているのが一覧で解って、それぞれのフォントをクリックするとそれがどこに使われているのか解る
      今回のリクエストは全体的にXrayで代用できそうな気がします。ぜひお試しください。

コメントを残す