ワイヤーフレーム・モックアップを簡単に作成できる!Adobe XD プラグイン「QuickMockup」

今回ご紹介するのはAdobe XDのプラグイン「QuickMockup」!

Quick Mockup

Quick Mockupで、使用頻度の高いUI要素のサンプルから簡単にワイヤーフレームやモックアップを作成、さらにスタイル、ステート、コンテンツのカスタマイズで簡易プロトタイプを作成できます。
しかもこのプラグイン割と少ない日本のデザイン現場向けに作られているため使いやすさに驚きました!

まずはインストール


「プラグインをインストールする」をクリック


「Adobe XD.appを開く」をクリック


プラグインのインストール画面に移動するので、インストールをクリック


インストールが完了しましたので、赤枠をクリックしてみましょう。


UI要素が並んでいますね。
配置したいステージを選択した状態で、必要なUI名のボタンをクリック。


ここですごいのが「ボタン」を配置した場合、サイドナビから「スタイル」、「ステート」、「サイズ」、「ラベル」の変更ができます。
画像はスタイルを変更したものになります。


「ステート」の変更、個人的にはこれが一番魅力的ですね。


「サイズ」の変更


「ラベル」の文言を変更することでボタンのテキストが差し替わります。


「リピートグリッド」等と併用して使用すれば爆速でワイヤーが作れそうです!
β版でこれだけの使いやすさなのでまだまだ期待できますね!

Writer

suzuki

suzuki

マンガがすこぶる好きなWebデザイナーです。
基本的に休みの日は泥酔↔寝るを繰り返す偏食のスーパー不健康人間です。

Contact

ご提案依頼、ご相談、お見積もりなど
お気軽にお問合わせください。

03-6303-9671

平日 10:00~19:00

「Web制作について」とお伝え頂ければ
担当者に取次させていただきます。

Mailform

contact@trym.jp
でも受け付けております。