ホームページ制作で便利なAdobe XD、おすすめプラグインの紹介

近年ホームページの制作現場では欠かせないツールとなったXDは、徐々に便利なプラグインが増えてきました。
制作に便利なプラグインを幾つか紹介します。

プラグインのインストール

XDを立ち上げキーボードの「shift」+「ctrl」+「p」を押します。
「プラグインを見つける」をクリックすると別画面でプラグインリストが表示されます。

プラグインはプラグイン名を入力検索して見つけるか、カテゴリに表示されているプラグイン名をクリックすることでインストールすることが出来ます。

プラグインの使い方

XDを立ち上げキーボードの「shift」+「ctrl」+「p」を押します。
インストールしたプラグイン一覧が表示されるので使用したいプラグインをクリックします。

Mimic

WEBデザインを作成する前に参考にしたいサイトがあると思います。
その時に「Mimic」を使うと文字スタイル、使用している色、画像の情報を抽出してくれます。
使い方も非常に簡単で、抽出したいサイトのURLを入力するだけでXDに表示してくれます。

自社サイトで試した場合

URLを入力するだけで既存のWebサイトからXDプロジェクトに色、フォント情報、画像情報を一覧化してくれるプラグインです。

下記のように文字スタイル、使用している色、画像が抽出されます。

Ikono

アイコンプラグインになります。
「Ikono」はアイコンがフォントなので色や線幅が細かく変更することが出来ます。

CSS Copy

XDで作成したテキストやオブジェクトをCSSプロパティしてコピーしてくれます。
情報をCSSとしてコピーできるプラグインです。

「ctrl」+「ｖ」でエディタにコードを吐き出します。

まとめ

プラグインを上手に使うことで作業の効率化が大幅に期待できます。
XDはデザインだけではなく、コーディングの作業スピードアップも助けてくれるのが大変嬉しいです。
紹介したプラグインはまだ、ほんの一部になります。
XDの便利なプラグインはこれからも増え続けているようなので今後も紹介しています。