BLOG

XDの作業効率が確実にUPする!5つのマストプラグイン

2022年6月8日

こんにちは!Cajonの島田です。

今回の記事では、XDを使い始めた中で便利すぎる!と感じたプラグインについてご紹介します!

たくさんある中から厳選した5選なので、最近XDを使い始めた方は特に、ぜひご参考ください😊

 

Icon 4 Design

言わずと知れた人気の Icon 4 Design !

「お申し込みはこちら」の隣によくある矢印などをXD上でササッと使えてしまう時短プラグインです。

英語で検索する必要があるので、よく使うものは覚えておくと便利ですね!

 

arrowアイコン一つでも種類が豊富で、デフォルトはモノトーンですがもちろんXD上で色・太さを変えることができるので使い勝手バツグンです!

他にも簡単なイラストを添えたいときなどにも使えます😊

 

Spacer

複数のオブジェクトを等間隔に揃えたいとき、XDだと手作業になり不便ですよね。

それが「Spacer」があると1px単位で縦横比を簡単に調整できるんです!

例えばこういったオブジェクト間の調整も簡単!オブジェクトを複数選択し、Spacing をクリックします。

 

縦に並んだオブジェクトを整理するときは【Vercical】、横に並んだオブジェクトを整理するときは【Horizontal】にチェックを入れて、その下に入力した数値によって幅を調整することができます!

一括で間違いなく調整ができるので私は重宝しています!

 

Vizzy Chart

なんと、棒グラフ・折れ線グラフ・円グラフを自動作成してくれて、色やサイズも指定可!

本格的な資料作成には不向きかもしれませんが、LPなどで実績として載せる分などであれば十分なものが作れます。

中でも円グラフは個人的にかなり使いやすいのでご紹介していきます!

 

まず、Vizzy Chartを選択し、「Line」を選択し、グラフを書き出すオブジェクトを選択します。

するとプラグインのサイドバーに下のような入力画面が出てきます。

それぞれの入力項目について解説していきます。

 

● DATA

半角・コンマ区切りで数値を入力します。左から時計回りにグラフが構成されていくので、大きいものから並べていきましょう。

● SIZE AND STYLE

円グラフの細かい形について調整ができ、上から順に、《円の直径》・《円グラフの帯の太さ》・《数値間の幅》・《円グラフの帯の丸み》となります。円グラフの帯の太さを直径と同数字にすると、ドーナツ型ではない、ピザ型のような円グラフが作れます。

● LABEL

なにか文字を入力すると円グラフの中央にテキストが反映されますが、後からXDで自由にテキストは加えられるので空白で大丈夫です。

 

例えば、大きい割合から順に50%、30%、20%で円グラフを作りたいとき、↓ のように入力します。

今回は真ん中に穴の空いていないグラフを作りたいので、《円グラフの帯の太さ》に円の直径と同じ数値を入力します。

 

これらを入力して、「Create」を押すと下のようなグラフが自動作成されます!

真ん中に一番大きい数値の「50%」が表示されますが消せます!

 

あとはお好みでカスタマイズできます。

カラー変更も通常のシェイプと同じようにカラー変更ができるので便利すぎますよね!

 

Unsplash Random Image

こちらは、選択したオブジェクトに一括で、Unsplashからランダムに写真を差し込みしてくれるプラグインです!

例えば、デザイン作成の途中過程で、サンプル画像の差し込みをする際

「まずフリー素材サイトに飛んで、検索して、いい感じの画像を見つけてコピペやダウンロードをして、XD上でリサイズして。。」という作業があったかと思うのですが、これがXD上で一括で済ませられるようになる!といったプラグインです✨

 

とっても簡単なのですが、方法を解説していきます。

写真を当てはめたいオブジェクトを複数選択し、Fill with image をクリックします。

 

Search by title のところに欲しい素材のキーワードを入力して「Get Image」を押します。

 

するとばっちり、Unsplashのいい感じの素材が挿入されました!

仮写真を入れたいときに便利なプラグインです。

 

UI Faces

こちらは先ほどの Unsplash Random Image の、人物写真バージョンのようなイメージです!

先ほどと同じように、アバター写真を挿入したいオブジェクトを選択した状態で UI Faces を選択します。

 

そしてそのまま Apply Randomly を選択するとランダムにアバター画像が挿入されます!

SOURCE や FILTERS などで、画像の元サイト、年齢・性別・感情・髪の色なども必要に応じて選択可能です。

先ほどの Unsplash Random Image と同様にデザインの構成途中で仮の写真を入れるのにかなり便利です!

 

最後に

いかがでしたか?

Webデザインをされている方なら持っていて役立つシーンが多いものばかりではないかと思います。

ぜひ作業効率UPに活用してくださいね!

 

Cajonでは自社の事業開発において、このような視点を持ってより良い体験やサービスを作っています。
また、自社の事業を一緒により良いものにしていく仲間を大募集しています。少し変わった個が集まった楽しいチームですので、ぜひお気軽に声をかけてください😊

詳しくはこちら

Page Top