XD

【解決】XDのパネルに計算式とその結果を表示したい!

XDプラグインOfuda アイキャッチ図版

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

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

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

  1. Adobe XDの中で式を書いておく
  2. アイテムを選択したとき,自動でそのアイテムの情報を利用して式が計算される
  3. 結果がXDのプラグインパネルに表示される

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

続きを読む

【解決】XDで線に合わせてアイテムを回転したい!

XDプラグインAdjustAngle アイキャッチ図版

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

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

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

続きを読む

【解決】XDでメモをアートボードと一緒に移動したい!

XDプラグインKizuna アイキャッチ図版

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

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

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

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

続きを読む

【まとめ】XDプラグインCommono 地味な自動化詰め合わせ

XD一般的操作自動化プラグイン アイキャッチ図版

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

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

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

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

続きを読む

【解決】XDでも線幅と効果を拡大・縮小したい!

XD線幅・効果拡大プラグイン アイキャッチ図版

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

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

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

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

続きを読む

【解決】XDで文字の上下にある余白を削除したい!

XDテキスト余白を削除 アイキャッチ図版

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

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

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

続きを読む

【解決】XDで選択したオブジェクトを一気に差し替えたい!

XDキーオブジェクトで置換 アイキャッチ図版

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

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

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

続きを読む

【まとめ】プラグインとカスタマイズで作ろう!自分だけの最速XD(3)

プラグインとカスタマイズで作ろう!自分だけの最速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)では,macOSの環境設定やXDプラグインの設定ファイルを編集するなどの方法でXDプラグインにショートカットを設定します。

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

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

続きを読む

【まとめ】プラグインとカスタマイズで作ろう!自分だけの最速XD(2)

プラグインとカスタマイズで作ろう!自分だけの最速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をもっと便利にします。

続きを読む

【まとめ】プラグインとカスタマイズで作ろう!自分だけの最速XD(1)

プラグインとカスタマイズで作ろう!自分だけの最速XD アイキャッチ画像

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

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

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

続きを読む

【解決】XDで線形グラデの角度を確認・指定したい!

XD線形グラデーション角度 アイキャッチ図版

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

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

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

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

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

続きを読む

【解決】XDプラグインの紹介リンクを一瞬で作りたい!

XDプラグインのインストールリンクをコピー アイキャッチ図版

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

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

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

続きを読む

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

XD共通選択・オブジェクト選択 アイキャッチ図版

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

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

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

続きを読む

【解決】XDでもキーオブジェクトに整列・分布したい!

XDキーオブジェクトに整列・分布 アイキャッチ図版

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

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

続きを読む

【解決】XDにもテキストばらしがほしい!

XDテキストばらし アイキャッチ図版

Adobe XDはこれまで,アクションやスクリプトといった機能拡張に対応していませんでした。しかし2018年10月にアップデートされ,現在はプラグインで自動処理ができるようになっています。

プラグインといってもJavaScriptで記述する親しみやすいものです。今後はどんどん個人開発者が増え,便利になっていくことでしょう。楽しみですね。

さて本題です。図版やスライドなどを作る際には,1行程度のテキストを大量に用意することになります。
通常ですと,テキストエディタなどで入力した改行区切りのテキストを1行ずつコピペして分割していきます。ただこれはかなり疲弊する作業です。

もしIllustratorでやる場合にはテキストばらしという定番スクリプトがあり,名前の通りテキストを一瞬で1行ごとにばらしてくれます。XDにもこれがあったら嬉しいですね。

そこで今回は,改行区切りのテキストを1行ずつに分解するXD用プラグインを紹介します。

続きを読む