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

2019.12.02.

ホームページ制作

デザイン

株式会社TREVOの月額制ホームページ制作サービス
PR

近年ホームページの制作現場では欠かせないツールとなった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」+「v」でエディタにコードを吐き出します。

まとめ

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

 

関連の記事

ホームページ制作に必要不可欠な事

ホームページを制作する上で欠かせないのがお客様の対話です。ホームページにどのようなコンテンツを入れるのか?そのコンテンツはユーザーにとってどのような意味があるのか? [...]

  • Avatar TREVOWP
よく使われる意味の分かりにくいカタカナ英語 Part.4

月一回程度の更新頻度で書いている、「よく使われる意味の分かりにくいカタカナ英語 Part.4」です。 4回目となる今回の記事では、「フィードバック」、「バジェット」、「バズ・マーケティング」、「アセット」、「サマリー」、「フレームワーク」、「ブレスト」を紹介します。 過去のpart.1とpart.2[...]

  • Avatar TREVOWP
新しい風

事務所を移転して、これまで自宅や別の場所で仕事をしていたスタッフが新しい事務所で仕事をするようになりました。そんなスタッフと、昼食に行ったりして話をしているだけで新しいサービスや、これまでと違った視点で仕事をみれるようになりました。 [...]

  • Avatar TREVOWP
Googleアナリティクスの逆引き出来る本がお勧め

Googleアナリティクスの使い方で悩まれている方が多いです。 Googleアナリティクスは出来る事が多く、確認出来る項目も多いので管理画面を見ただけで「難しそう」、「覚える事が多そう」等の拒否反応を示してしまうお客様もいらっしゃいます。 お客様にお勧めの記事やサイトをご紹介しているのですが、今回は[...]

  • Avatar TREVOWP