【Adobe XD】これは入れておきたいオススメ無料プラグイン8選

みなさんこんにちは。Webデザイナーのしゅん(@shun_webdesign)です。

Webデザインを作るのにとても便利なAbobe XDですが、さらに便利に使う方法をご存知でしょうか?

今回はAdobeXDにより便利に使えるプラグイン(拡張機能)を紹介したいと思います。

紹介しているプラグインはURLを貼り付けているのですぐにインストールできます。

プラグイン(拡張機能)とは?

プラグインとは複雑で反復の多い作業を自動化するための機能を搭載しており、ユーザーの補助になる役割があります。

外部ツールやサービスと連携することで、デザインワークフローが強化されます。

中にはプラグインがないとできない作業もあるので何ができるのかだけでも知っておきましょう。

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

プラグインのインストール方法がわからない人のために手順を説明します。

STEP.1
プラグインを参照

XDの操作画面[プラグイン]→[プラグインを参照]をクリック。

STEP.2
プラグインの検索

画面左側から[すべてのプラグインを検索]からプラグインを検索します。

その下にある[アプリケーション][XD]にチェックがしてるか確認してください。

検索結果がプラグイン一覧で表示されます。

STEP.3
インストール
[入手]をクリックするとインストールを開始します。

プラグインによってはコンピューターからパスワードを求められるものもあります。

下記画像のように表示されたら[OK]を押してパスワード入力するとインストールを開始します。

 

インストールが終了すると画面下にポップアップが表示されます。

STEP.4
インストール完了

XDの操作画面に戻り、画面左側下プラグインのアイコンをクリックし一覧に表示されてれば完了です。お疲れさまでした。

オススメのプラグイン一覧

Anima

XDのデザインを、クリーンで再利用可能なHTML、Vue、Reactのコードに変換します。

他にもコードを使いXDでは表現が難しいプロトタイプの設定が可能です。

[Anima]をインストール

Copy CSS Clipboard

作成したコンポーネントを選択し、プラグインのボタンをクリックするだけでCSSで変換されペーストできるようになります。

[Copy CSS Clipboard]をインストール

LottieFiles

Lottieアニメーションを埋め込むことができます。

Lottieサイト上に公開されてるフリーアニメーションが使え、公開せずプライベートで自作したLottieファイルも使用可能です。

After Effectsを使ってXDからLottieの軽量モーショングラフィックスを作る

[LottieFiles]をインストール

Mimic

Webサイト上のフォントや画像、色などの情報が知りたい際にURLを入力するだけでXD上に情報を書き出してくれます。

【Adobe XD】Webサイトの情報を一瞬で抽出!Mimicの使い方

[Mimic]をインストール

PhotoSplash2

XD画面上で著作権フリーの写真がキーワード検索ができ、テーマに合わせた画像を探し出せます。

オブジェクトを選択→写真を選択→[Apply]をクリックすると写真を貼り付けることができます。

[PhotoSplash]をインストール

Quick Mockup

ワイヤーフレーム(モックアップ)を作ることができるプラグイン。

サイトのテーマ、ジャンルに合わせて自動で作成できます。

各パーツ、コンポーネントが揃っているので配置するだけで素早くワイヤーフレームが作ることが可能です。

Quick Mockupでワイヤーフレームを作る 【Adobe XD】Quick Mockupを使って瞬時にワイヤーフレームを作る

[Quick mockup]をインストール

Zeplin for XD

デザインデータを読み込むことでCSSの自動生成、フォント、カラーコード表示などコーディングに便利な機能があります。

各パーツの距離がすぐにわかり効率的にコーディングができます。

※Zeplinのアプリを事前にインストールする必要があります。

AdobeXDで使えるZeplinの使い方 【Adobe XD】コーディングが捗る!ZeplinとXDを連携する活用方法

[Zeplin for XD]をインストール

Split Rows

左:バラす前のテキスト 右:改行区切りでバラしたテキスト

 

改行区切りのテキストを一行ずつにばらすことができるプラグインです。

うっかり連結したまま入力してしまったテキストもワンクリックでバラせるのでとても便利です。

[Split Rows]をインストール

 

まとめ

今回はXDのプラグインのインストール方法とオススメのプラグインを紹介しました。

インストール方法

  1. XDの操作画面[プラグイン]→[プラグインを参照]をクリック。
  2. [すべてのプラグインを検索]からプラグインを検索。
  3. [入手]をクリックするとインストールを開始。
  4. プラグインのアイコンをクリックし一覧に表示されてれば完了。

他にもオススメのプラグインがあれば教えて下さい。

最後まで見ていただきありがとうございます!是非記事の共有をよろしくお願いします。

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA