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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
XD線形グラデーション角度 アイキャッチ図版

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

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

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

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

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

GradientAngleって何?

線形グラデーションの角度の数値を取得したり,設定したりするAdobe XD用プラグインです。線形グラデーションの塗りを持つアイテムを1つ選択すると,プラグインパネルのテキストフィールドに角度が表示されます。新しい角度を入力すれば,グラデーションはその通りに回転されます。

角度取得サンプル画像

インストール方法

今回のXDのプラグインは現状では野良プラグインです。こちらのファイルをダウンロードし,ダブルクリックするなどして開いてください。自動的にXDが起動しインストールされます。
審査に通り,プラグインマネージャからインストールできるようになりました。GradientAngleのリンクに飛ぶとすぐに完了します。

仕様

  • 開発用に共有で出てくる角度がピンとこないので,Illustratorと同じ形式(左から右まっすぐで0度,上から下で-90度)にしました
  • 新しい角度をセットする際は,アイテムの中心を軸にしてグラデーション制御点を回転します
  • グラデーション始点から終点までの長さを変更しないため,制御点は必ずしもアイテム枠上ぴったりになりません

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

プラグインを紹介していただきました。

コードはこちら

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

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

SNSでもご購読できます。

広告

コメント

コメントを残す