![AdobeXDおすすめプラグイン 2020年3月版](https://mk-design.jp.net/wp-content/uploads/2020/03/20200316adobexd-blog-1024x410.png)
AdobeXDヘビーユーザーなMika(@designer_mika)です。
もはや、XDなしではwebデザイン制作できないようになってしまったかも?というくらいです。元はIllustratorでwebデザインしている人間でした。
私がデザイン制作で使用しているXDプラグインを紹介します。
Golden Ratio_Transform v1.0.0
矩形を黄金比率に調整できるプラグインです。
Resize Artboard to Fit Content
アートボードをリサイズできるプラグイン。control+Fでリサイズ調整ができます。下層ページ作っていてページ毎に長さが変わる時にアートボードの長さを調整できるので便利です。これをインストールしてない時は手動で調整してました。
Trimlt
テキストエリアを自動調整長い文章の流し込みで隠れてしまいがちなテキストボックスの調整などに便利なプラグインです。
![AdobeXD Trimlt](https://mk-design.jp.net/wp-content/uploads/2020/03/20200316adobexd-blog-Trimlt.png)
Split Rows
改行区切りのテキストを行単位でテキストボックスに分割することができます。
![AdobeXD Split Rows](https://mk-design.jp.net/wp-content/uploads/2020/03/20200316adobexd-blog-SplitRows.png)
Remove Decimal Numbers
XDで作成したオブジェクトを小数点以下を切り捨てることができるプラグインです。webデザインは端数があるオブジェクトが多いとコーディング側が小数点切り捨てて調整する必要があるのでコーディング側の作業負担が増えます。こういったプラグイン入れて端数のないwebデザイン作成をデザイナーは心がけたい所です。
Repeat Grid Fitter
リピートグリッドを緑の部分ぴったりで作成できるプラグインです。(列と個数も指定可能です)
![AdobeXD Repeat Grid Fitter](https://i0.wp.com/designlabo-mika.com/wp-content/uploads/2020/03/20200316adobexd-blog-RepeatGridFitter.png?fit=1024%2C836&ssl=1)
Mimic
URLを入力するだけで既存のWebサイトからXDプロジェクトに色、フォント情報、画像情報をアートボードで自動作成してくれるプラグインです。参考サイトから色を抽出するのに便利です。
![AdobeXD Mimic](https://mk-design.jp.net/wp-content/uploads/2020/03/20200316adobexd-blog-MIMIC.png)
Copy CSS to Clipboard
XDのオブジェクトのCSSをコピーできるプラグインです。コードは表示されませんが色やフォントサイズのCSSが抜き取れるのでコーディング時には欠かせられないプラグインです。
Invisible Space
テキストや画像の周りにパディング、マージンを指定して四角を作ることができる(ロゴ周囲のアイソレーションゾーンの作成)私はボタンデザイン作成に使ったりしてました。webデザインでパディングの20px、30pxとか自分でマウス操作して調整するのは面倒臭いと思ってました。Photoshopだと未だにそういう制作方法だと思います。このプラグインがあると隙間を正確に調整できるので超便利です。
Repetor
リピートグリッドに対して一括で写真素材を追加できるプラグインです。
とりあえずダミー写真でデザイン提出したい時に自分で写真を検索して探さなくて良いので便利です。
海外製なので人物写真は欧米人が多く日本のwebデザインでは少し違和感ありそうなのが難点ですが。。
投稿者プロフィール
![Mika](https://mk-design.jp.net/wp-content/uploads/2021/11/proficon-150x150.png)