Adobe XDを使うならとりあえず入れておきましょう。っていうものを紹介します。

とりあえず入れるもの

Icondrop

IcondropはWeb上でアイコンの配布＆販売しているサービスなんですが、それがXD向けにプラグインを作ったものがIcondropプラグインです。たくさんのアイコンを簡単にXDに配置できます。わざわざブラウザ開かなくても済むので大変便利。

私はよくつかうアイコンはまとめて保管しているのですが、ちょっと特殊だったり、同じハートのアイコンでもちょっとだけ雰囲気を変えたいなんて時は簡単に探せてとても重宝しております。

海外でよく使われるデザインのアイコンが多いイメージ。

Ikono

もう一つアイコンのプライグイン。Ikonoはアイコンの線幅を指定することができます。

IcondropとIkono、お好きな方を選んでください。

unDraw

めっちゃおしゃれなフラットデザインが詰まっています。しかもパーツを分解できるという優れもの！！

画像データではないのでイラストを自由に変形することができちゃいます。これ本当に便利！！

ちなみにこの記事のサムネイルもunDrawを使っています。

Confetti

たった1クリックで豪華で綺麗な背景パターンを生成します。Confettiって紙吹雪って意味なんですよね。

xdで手動でいい感じに背景パターンを作るのって結構面倒なのでこれは重宝します。

説明動画を見れば大体わかります。このどうがめっちゃオシャレに編集されてます。

Zeplin

こちらはレイアウト指示書を作成してデザインを確認することができます。

Sketch3やPhotoshopの他のアプリケーションでも使用されており、Chromeのディベロッパーツールのようなことができます。デザイナーさんとの意思疎通を行うときには非常に役に立ちます。airbnb,slack,starbacksなど多くの有名企業も使用しているので安心して使えます。

公式サイトで、「Zeplinは、デザイナーと開発者の間の究極のコラボレーションツールです。」と言っています。まさにその通り。

Overflow

overflowは画面遷移図作成ツールがもともと存在し、最近xdのプラグインになりました。

サイト制作時に画面遷移図って必須ですよね。質が良くい画面遷移図を効率よく作成するには必須。

Singari

入れ忘れていました。要素の整列のプラグインです。

Align LeftとかAlight Rightとかをしてくれます。結構便利。

縦に並んでいる幅がバラバラの要素も、全体を選択して、プラグイン  >  Singari  >  Distribute vertical spaceで、幅を削除して、均等幅にすることができます。

単純なプラグインですが結構使います。

Split Rows

縦に並んだリストをバラしてくれます。めっちゃ重宝。コピペして、Split Rowsみたいな流れが結構多いです。こーゆーシンプルだけどめっちゃ使えるやつ好きです。

Artboard Plus

すべてのアートボードを適切に構造化できます。

グリッド内のアートボードを並べ替えたり、名前で並べ替えたり、選択範囲の周りにアートボードを作成したりできます。

やっぱり綺麗に並んでいる方がいいです。

なんかxdのプラグインの説明動画って全部かっこいいしオシャレだ。。。

あったらいいかも

yotako

これは登録が必要なので少し面倒ですが、このプラグインを使用すれば、Adobe XD内から直接モバイルアプリケーションとWebサイトを作成できるようになります。完璧とまではいきませんが、60~70%の作業を省くことができるので大変便利。

もっと精度がよくなればコーディングの仕事を省くことができるので期待。タコが可愛いです。

公式サイト

以下は説明動画です。

UI Faces

顔写真のイメージが勝手に入ってくれるのでありがたいです。スマホアプリのフォロワー一覧とか表示させるときによく使ったりします。人の顔写真が入っていると実際にイメージがわきやすいのであった方がいいかもしれません。

性別、表情、髪の色なんかも選べます。すごい。

airtable

ダミーデータを入れられるやつです。前は使ってましたが最近はあんまり使わなくなりました。

Rename it

レイヤーとアートボードの名前を一括で変更することができます。

これはあったらいいかなくらいです。レイヤーとアートボードの名前がぐちゃぐちゃになっちゃう人はおすすめ。

Odin Chart

ダッシュボードのUIとか考えるときによく使います。使う人を選ぶので。デザインでグラフなどをよく使う人にはおすすめです。

VizzyCharts

もう一つグラフに関するプラグイン。csvファイルからデータを読み込んで折れ線グラフ、円グラフ、棒グラフのいずれかのパターンを作成することができます。チャートは自動でカラーや幅などが設定されます。もちろん手動でも設定可能

私はVizzyChartsの方が好きです。

まとめ

いかがでしたでしょうか？

Adobe xdにはできることがたくさんあります。

これらを使いこなすことができればあなたのデザインワークがはかどることは間違いありません。

ぜひ使ってみてください。

Adobe xd最高！！