XD

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

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

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

• Find and Show（検索）
• INK 3（検索・置換）
• Simple Find and Replace（置換）
• Text Plus（置換）
• Text Toolbox（置換）
• Tool Kit（置換）

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

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

Adobe XDでは，よく使うものの直接取得できない数値があります。例えばline-heightやletter-spacingなどです。インターネットを検索すると，それらの算出方法・式を紹介しているサイトがたくさんヒットします。それだけ困っているかたがいるわけですね。

この問題はExcelやGoogleスプレッドシートなどで関数を作ればある程度解決します。単純な計算ならSpotlightやAlfredに式を入力するのも良いでしょう。

しかし，毎回Adobe XDのプロパティインスペクターから数値をコピーし，別の何かにペーストするのは手間がかかります。次のような流れにできたら最高ですよね。

そこで今回は，リアルタイムに式を計算するプロパティパネル的Adobe XD用プラグインOfuda（おふだ） を紹介します。

Adobe XDでフローチャートや図版を作る際，斜めに傾いているアイテム同士の角度を合わせるのに苦労します。というのも，Adobe XDでは回転軸が常に中心になり，回転しながらアンカーポイントや見た目をスナップできないからです。アイテムを近くに寄せ，目視で傾きを確認しながら何となく回転させることになります。

しかしこういった角度は，少しの違いが目立つものです。せっかくデジタルなのだから，数値で角度を取得して正確に一致させたくなりますね。

そこで今回は，直線の角度に合わせてアイテムを回転するAdobe XD用プラグイン AdjustAngle を紹介します。

Adobe XDでデザインを共有するとき，エンジニアやコーダーにメモを残したいことがあります。例えば，データを見ただけでは判断しにくいデザイナーの意図を言葉や絵で補完するときなどです。

メモ書きにはAdobe XDの共有機能／コメントを利用するなどさまざまな実現方法があります。対象アートボード付近のペーストボードに，テキストや画像を置くのもわかりやすくて良いでしょう。特に操作しなくても，書類を開けば目に入るのは大きな利点です。

しかしこの方法では，アートボードを動かしてもメモ用アイテムは一緒についてきません。毎回自力でちまちまアイテムを選択して近くに寄せることになります。せっかくの軽量高速アプリが泣きますね。

そこで今回は，ペーストボード上に置いたアイテムとアートボードを関連付け，一緒に動かせるようにするAdobe XD用プラグイン Kizuna を紹介します。

Adobe XDについて，次のような願いを見かけました。

• テキストを中央揃えにする，塗りをOFFにするといった地味な操作をショートカットにしたい
• パスの方向を反転したい
• コンポーネントを解除したとき中身がバラバラになってしまうが，グループに入った状態にしたい

これらは一般的な操作なので，プラグイン制作により比較的簡単に実現できます。しかしAdobe XD用のプラグインを公開するには，プログラムを書くだけでなくアイコンをデザインしたりイメージ画像を作ったり，何かと手間がかかります。個々にリリースするのは大変すぎるのです。

そこで今回は，行揃えの変更など，一般的で地味な操作の自動化を寄せ集めた1つのAdobe XD用プラグインにしました。それが今回紹介するCommonoです。

Adobe XDでは，パスや四角形などのシェイプを拡大・縮小するとき，もとの線の太さを変えずに維持します。角丸の半径やシャドウ（内側）／ドロップシャドウの距離・ぼかしの数値も同様です。そのため，SVGアイコンなどベクター素材をリサイズすると見た目が変わってしまいます。

グラフィック操作はIllustrator，プロトタイピングはAdobe XDと分担するのが基本的な使いかたでしょう。IllustratorでグラフィックをCCライブラリに登録し，Adobe XDで［リンクを配置］すれば線幅・効果は比率に応じて変更してくれます。

しかし実際のところ，Adobe XDとIllustratorを行ったり来たりするのは面倒です。また，すでにXDのオブジェクトになっているものをCCライブラリに登録しても，線幅が変わらない形式になります。やはりXDで直接できたら嬉しいですね。

そこで今回は，選択アイテムのサイズと線幅・効果を，拡大率を指定して拡大・縮小するAdobe XD用プラグインTransformSessionを紹介します。

You’d be surprised to find that you can’t do things that you would normally do unconsciously. For me, it was the “Align to key object” in Adobe XD, and we’d be happy if XD had that too.

In this article, I’ll introduce Singari, a plugin for Adobe XD that treats the last selection as a key object and performs alignment and distribution.

「Adobe XDでフォントの余白分の高さを削除してくれるプラグインはないの？」というコメントを見かけました。確かにフォントによっては文字の上下が大きく空いていて，数値上のマージンと見た目のマージンに差が出ます。空きが実際どれくらいなのかわかりにくいですね。

ただテキストのパネルを見ても，Wordのようなトリミングくい込み設定などはなさそうです。

そこで今回は，選択しているテキストを，文字のアウトラインサイズの四角でマスクするAdobe XD用プラグイン「MaskText」を紹介します。

Adobe XDで作業をしていると，選択しているアイテムをまとめて別のオブジェクトに変えたくなることがあります。例えばただのグループとして作ったボタンを後からコンポーネントに変換するなどです。

普通にやろうとすると，オブジェクトを複製して整列するという動作を延々と続けることになります。これでは終わりが見えず，途方に暮れてしまいますよね。

そこで今回は，選択しているアイテムをまとめて置換するAdobe XD用プラグイン，ReplaceItemsを紹介します。

続きを読む

CSS Nite LP67「All About XD update 2020」とAdobe MAX Japan 2019のXD Short Sessionsでスピーカーを担当しました。XDプラグインやシステム環境設定・Keyboard Maestroなどの自動化アプリケーションを利用し，2秒かかる手間を0.3秒に縮めるような小さな効率化をする話です。

1回目の記事【まとめ】プラグインとカスタマイズで作ろう！自分だけの最速XD（1）では，macOSの環境設定やXDプラグインの設定ファイルを編集するなどの方法でXDプラグインにショートカットを設定します。

【まとめ】プラグインとカスタマイズで作ろう！自分だけの最速XD（2）は，Keyboard Maestroを使ってXDプラグインを実行する，そして画像認識でAdobe XDのUIを操る，の2つがメインです。

3回目の今回は，Automatorの記録機能を使いAdobe XDのUIを操ったり，XDプラグインに自動化アプリ用の裏口を仕掛けて利用したりします。

続きを読む

CSS Nite LP67「All About XD update 2020」とAdobe MAX Japan 2019のXD Short Sessionsでスピーカーを担当しました。XDプラグインやシステム環境設定・Keyboard Maestroなどの自動化アプリケーションを利用し，2秒かかる手間を0.3秒に縮めるような小さな効率化をする話です。

1回目の記事【まとめ】プラグインとカスタマイズで作ろう！自分だけの最速XD（1）では，いくつかの方法でXDプラグインにショートカットを設定しました。

2回目の今回は，Keyboard Maestroなどの自動化アプリケーションを利用してXDをもっと便利にします。

続きを読む

このエントリーは Adobe XD プラグイン制作 Advent Calendar 3日目の記事にします。

Adobe MAX Japan 2019で，XD Short Sessionsの1つを担当しました。XDプラグインやシステム環境設定・Keyboard Maestroなどの自動化アプリケーションを利用し，2秒かかる手間を0.3秒に縮めるような小さな効率化をする話です。

当日は実演中心でしたが，文字で伝えたほうがわかりやすい要素が多いため内容を再構成して紹介します。今回はその1回目です。

続きを読む

このエントリーは Adobe XD プラグイン制作 Advent Calendar 2日目の記事です。

「XDのグラデーションの角度（数値）ってどうやったら分かるの？」というコメントを見かけ，改めて確認しました。この設定は手作業のみだったのですね。90度や45度ならわかりやすいですが，それ以外は大雑把になりそうでした。

@OsatoCom さんによると，開発用に共有を使うと正確な数値を取得できるそうです。ところがこの方法はインターネット接続が必要で，実行には結構な時間がかかります。

せっかく Advent Calendar の季節ですし，XDプラグインを作ってみることにしました。

そこで今回は，線形グラデーションの角度をGet/SetするAdobe XD用プラグインGradientAngleを紹介します。

Adobeの審査を通過したXDプラグインなら，自動でプラグインマネージャーのインストール画面を開くリンクを用意できます。ユーザーは情報を見つけたその場で簡単にインストールでき，作者にとっては宣伝しやすくなるというお得な機能です。感謝！

リンクのパスは上のように，https://adobe.com/go/xd_plugins…?name=に続いてe46fe5a4などプラグインIDをつけます。IDはFinderでプラグインのデータがあるフォルダを開き，manifest.json内のnameとid項目を確認するとわかります。しかしそういう手間がかかることはなるべくしたくないですよね。

そこで今回は，XDにインストールされているプラグインの名前とインストールリンクをクリップボードにコピーするAutomatorサービス（クイックアクション）を紹介します。Automator用なのでmac専用です。windowsのかたはすみません。

続きを読む

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

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

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

普段無意識でやっているようなものは，できないことに気づくと驚きますよね。私にとってはAdobe XDの「キーオブジェクトに整列」がそうでした。XDにもあったら嬉しいですね。

そこで今回は，最後に選択したものをキーオブジェクトとして扱い，整列や分布を実行するXD用プラグイン Singari（しんがり）を紹介します。

Adobe XDでレイアウト・図版・スライドなどを作る際には，1行程度のテキストを大量に用意することになります。

通常ですと，テキストエディタなどで入力した改行区切りのテキストを1行ずつコピペして分割していきます。ただこれはかなり疲弊する作業です。

もしIllustratorでやる場合にはテキストばらしという定番スクリプトがあり，名前の通りテキストを一瞬で1行ずつにばらしてくれます。Adobe XDにもこれがあったら嬉しいですね。さらに言えば，ばらしたテキストを連結したり，行だけでなく列も分解できたら最高です。

そこで今回は，テキストを行ごと／文字ごとに分割したり，区切り文字で分割・結合するAdobe XD用プラグイン，Split Rows for XD を紹介します。